Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length
May 25, 2012, 10:49:37 AM

Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: help for creating an authentic 3D Cover Flow effect  (Read 791 times)
nafieta
Pong! (the videogame) Master
*****
Offline Offline

Posts: 28


WWW
« on: December 14, 2011, 08:18:31 PM »
If you've used a Mac or iTunes at all, you've probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar.

It's a nice effect, but it requires a fair bit of processing power to accomplish. I thought it'd be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript.

So do you know how to create an authentic 3D Cover Flow effect in a web browser using CSS and jQuery?

Thanks for any idea.
Logged
Rosetta Stone Japanese could be useful when traveling Japan, Rosetta Stone English
MrPhil
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 5219
« Reply #1 on: December 15, 2011, 11:53:21 AM »
Could you give a URL where this is demonstrated on a website, and doesn't need a membership or subscription? I've seen an iMac where the icons grow/shrink as you pan across it the row with the mouse -- is that what you're referring to? If so, I don't see what's 3D about it. It seems like that wouldn't be too hard to do in JS/CSS (mouseover -> change height and width of image, move x and y of all images to accommodate). http://www.harmonicinc.com does something kind of similar (click on an icon to bring front and center, and enlarge). Are you talking about a different effect?
Logged
Visit My Site

E-mail Me
 
-= From the ashes shall rise a sooty tern =-
scanman20
Senior Moderator
Über Jedi
*****
Offline Offline

Posts: 1524



WWW
« Reply #2 on: December 15, 2011, 02:11:18 PM »
Quote from: nafieta on December 14, 2011, 08:18:31 PM
If you've used a Mac or iTunes at all, you've probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar.

It's a nice effect, but it requires a fair bit of processing power to accomplish. I thought it'd be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript.

So do you know how to create an authentic 3D Cover Flow effect in a web browser using CSS and jQuery?

Thanks for any idea.

Ever heard of this cool site called Google? http://lmgtfy.com/?q=javascript+cover+flow
Logged
Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: