[ 1 post ]

Brad Smith

  • Offline
  • Profile

Creating an animated, rotating list?

Post Posted: Thu Sep 23, 2010 1:46 pm
+0-
I've been toying with ideas for creating unusual navigation tools for a website, and I was thinking about creating a "chain" of divs that rotated left or right when dragged, like one of those fancy flash-based photo viewers, or the iphone's album viewer. I've never used YUI, and figured this would be a fun project to learn with. I've been planning out my approach, but would like to sanity check it with those more experienced than I before committing a lot of effort to trial-and-error.

Each div in the chain would be dragable, with setYConstraint() set such that it could only be dragged left or right, not up or down. When an element passes the edge of the screen, it would either be moved to the opposite end, so the chain is presented as an infinite, two-dimensional plane, or if I'm feeling really ambitious, maybe shrink it, put it behind the other chain elements, and start it moving in the opposite direction to create the illusion of a three-dimensional ring.

Assuming all that is even sane/possible, the really tricky part seems to be how I would make all the other objects in the chain move when one is dragged. I could have an startDrag listener that triggers animation events in each of the other elements to mirror the movement of the dragged element, but that sounds terribly inefficient, and painful to implement right. Is there an easier way to, for lack of a better term, "broadcast" drag movements to each of a set of elements, such that each figures out how to react based on its position?

Maybe I'm biting off more than I can chew here, but I'm resisting my usual urge to dive in and only find that out after hours of work on something that doesn't take full advantage of the tools at hand, so if anyone has ideas or other advice before I begin, I'd love to hear it.

Thanks!
  [ 1 post ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum