CSS only* coverflow (Webkit only example)

This was fun but I've mostly lost interest in it so I thought I'd put it up incase someone else wanted to take it from here :)

* Okay, so it's not quite CSS, there's a Safari bug with general sibling selectors in dynamic situations so the code is right but it doesn't work. The javascript fuction just adds and removes a class to get Safari to reflow the conent. The 'right scroll' animation might work properly if it wasn't for this problem.

I only built it with the webkit prefixes, some of this will work in FireFox with the -moz too. Some of it already does ;)

Here's a fun test file that I used to figure out the side scroll effect, I'm sure it has other applications, I'd love a tweet with a link if you find one.

Some stuff that needs to be fixed, maybe with javascript maybe with CSS:

• it doesn't work on load if you don't load to a target
• the animation effect 'scrolling' to the right doesn't work
• smooth side scrolling
• an actual slider to go between 'albums'

Some links I found useful putting this together:

• http://webkit.org/blog/138/css-animation/ (transitons)
• http://webkit.org/blog/175/introducing-css-gradients/ (gradients)
• http://webkit.org/blog/181/css-masks/ (mask)
• http://webkit.org/blog/182/css-reflections/ (reflections)
• http://www.westciv.com/tools/gradients/ (gradient)

There were two other links I'd like to share but I've lost them. They were more inspiration than resources. One was a portfolio website where the selected photo was clear but the others blurry. The other was a replication of coverflow using javascript intended for use on the iPad. A tweet if you recognize my descriptions would be awesme :)

2010. May. 28.