cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Spent a couple of hours seeing if I could recreate the album scroller found in the store view of the latest version of iTunes. Uses CSS3 transforms for animation and some jQuery to handle interaction. Definitely needs tidying up, and probably only works in WebKit and latest FireFox for now.

Update: Fixed the auto-scroll so now it will pause when you hover the scroller. Also fixed couple of other little bugs with the animation queue.

Comments

  1. I really like the subtle border-radius and reflections, great job!

  2. Thanks, there's something very sexy about those 1px highlights and borders.

  3. really cool!

  4. Nice effect! I tested in Firefox and the next button appears in the wrong place, it appears about 400px at the right of the pictures. Do you have an idea how to fix it? In Chrome and Safari it's working perfect!

  5. @Alessandro I think I have fixed this now :)

  6. In Opera Dont work (((

  7. @vaskemaskine Great! fixed in Firefox. Congratulations, great design you created! Thanks for sharing the codes!

  8. Very neat! Check out these screenshots to see where it works (assuming that it works when it looks correct :D) http://www.browserstack.com/screenshots/763110f5dc8cf064b0dfb41b46136471a640b0c7

  9. @ltse Cheers for that, although this thing was never really meant to be cross-browser. It was just a little experiment :)

  10. wow... amazing work!

  11. Hi Chris, are you for hire? I would like to purchase some time with you on making this also work in Firefox, Safari and Internet Explorer if possible. Internet Explorer may be a stretch since it is such a problematic browser but I would like to give it a try. Please let me know if you are interested.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...