Kicking off my “Make it with YUI” series, I decided to begin with something classic. Building a “ticker” or a tickertape like element for your site is not too difficult to do without YUI, but if you already have it on your site, or are considering using it for adding more interactivity, you might like this. YUI transitions come to great effect here, and turn this bit of code into a fairly trivial exercise. Click over to the “result” tab to see our ticker in action.
With a bit of tweaking, you can get the speed just right for your site, and the code should be fairly adaptable to varying widths of viewport and content. Basically what we are doing here is creating a div with a set height and width, and setting its overflow to “hidden”. We then set the inner span to be absolutely positioned. Once we have that finished, we simply slide the inner span to the left via the transition – using the inner span’s width. Once the inner span has travelled all the way past the left side of the outer div, we reset the inner span’s “left” attribute to be just to the right of the outer div’s view.
After that, its just a matter of running the animation again with this new starting point, and repeat forever.
I intentionally made the code a bit verbose, but I’m sure you could pare it down quite a bit if you wanted. How did I do? Do you have a smaller, faster, or better scrolling ticker done in YUI? Did I miss something obvious? Let me know!
