Oh sweet holy lord of Pixels, what have we got here!? Who knew something as mundane as scrolling a list could be turned into something so beautiful?
Hakim El Hattab, the Lead Interactive Developer at Qwiki has put together a collection of lists having various scroll effects achieved through CSS/JS. There are eleven different scroll effects to experience, and each one is better than the other.
From the description, Hakim says:
Decided it was time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. Not intended for any practical use but the visuals are surprisingly impactful.
This works by applying a future/past class to list items outside of the viewport as you scroll. Based on this class a variety of transforms are transitioned to via CSS.
The page has CSS 3D effects like Curl, Flip, Fly & Reverse Fly and normal effects like Wave, Skew, Helix, Fan, Tilt, Papercut and Zipper. The best way only way to know more about these is to check them out yourself.
Hakim has other gorgeous CSS experiments too, my favorite being the WebGL Particles one.