Tuesday, April 10, 2012

All CSS Scrolling SlideShow

A great Chris Coyler demo for an infinitely scrolling slideshow:

http://css-tricks.com/infinite-all-css-scrolling-slideshow/

... The way I did it was to make one big long graphic where the first part and the last part are visually identical.

Then you animate the left position of that image until it appears it's completed one full cycle (but really is just moved far enough to look identical), then it quickly warps back to the original position and starts over.
We just need an outer wrapper to be relative positioned and hide the overflow, then an inside container in which to animate (which is the image).

2 comments: