After researching a good method to create a 3D Carousel I came across two resources that intrigued me; firstly GOTOANDLEARN.com which provided an amazing flash 3D Carousel tutorial and then the jQuery 3D Carousel.
After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“
Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.
So here we go…
code
html
As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside. That is all that is required at this stage from an html perspective. Obviously the number of images and the images themselves can be changed here.
<div><a href="#"><img src="images/dreamweaver.png" /></a></div>
<div><a href="#"><img src="images/director.png" /></a></div>
<div><a href="#"><img src="images/flash.png" /></a></div>
<div><a href="#"><img src="images/freehand.png" /></a></div>
<div><a href="#"><img src="images/swf-player.png" /></a></div>
<div><a href="#"><img src="images/coldfusion.png" /></a></div>
</div>
css
The CSS is also very simple setting the style attributes for the main container as well as the images width and height within each of their containing divs. One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.
#carousel{
background-color:#000000;
width:700px;
height:400px;
position:relative;
border:1px solid #FFFFFF;
}
img{
width:100%;
height:100%;
border:0px solid #FFFFFF;
}
</style>
JavaScript Variables
This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.
centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.
Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
demo
Have a look for yourself at the Simple 3D Carousel demo.
download
Feel free to download the Simple 3D Carousel.
notes
This is a very basic demo and as such should not be treated as a finished product. I’m using this article as more of a tutorial to create clear stages between the version above and a far more advanced version that I will release in the not to distant future.
I’m still looking to further improve the smoothness of the carousel and new features such as automatic image reflection and arrows to manually rotate the carousel will be added in future versions.
mootools modules
Core
- Core
Class
- Class
Native
- Array
- String
- Function
- Number
- Element
Element
- Element.Event
Window
- Window.DomReady
23 Comments Received
I’m not being an arse, just being constructive: it doesn’t work in Opera (9.23), just get the black container. It does work in IE7 and Firefox though so I wouldn’t worry too much at this early stage.
A marvellous piece of kit!
Ok that’s now sorted.
That is pretty impressive mate, I’m having a lot of fun toying with Mootools at the moment…
Awesome! Ajax goes 3D.
Andrew,
Thanks so much for this example. I am using it to load favorite beers from a database to prefill a users sixpack. You saved me a bit time
Super Job!
Awesome!!! Brilliant work!!! It works fine with Prototype, too. You have only to change the line window.addEvent(’domready’, function(){ to Event.observe(window, ‘load’, function() {… and obviously to change framework!!! A pretty different flavour… but I prefer Prototype…
Fantastic job, Andrew. Thank you a lot.
Sincerely your, an Italian Sellick fan.
Hello Andrew;
good article but would have been a better one if you had added some “conclusion”. I’ve skipped the reason to add this on our pages just b/c you’ve also skipped that revealing -in time- your own reasons were obvious (to us).
What is this revolving thing is used for.. if the answer is to please our appealing eyeses then I’ll take my PS3, if not that we’re talking about Flash and web design.
If this is about web design, then the question is as follows:
Have you ever managed to click on something you’d really love to? If you haven’t, so what good a fancy IMG revolver sit atop on your website?
If this is web development, then I would say no.. this is about Mootools gaming and taking out a smal challenge – and again – a good challenge indeed.. but rather useless, all in my humble opinion.
Nevertheless, in conclusion, I know Andrew, and this is a good work. Having seen the hereby commentary, AJAX goes 3D and the applauds alike, all shows how the eyes were pleased – just b/c they don’t pay for anything as a client or demander.
best regards;
k.ilalan
Nice work! Thank you. I’ve just implemented 3dcarousel on my site: http://www.jtbullitt.com/objects/ — it’s just what I’ve been looking for.
FWIW, I notice that there are quite a few multiplications within the for() loop in startCarousel(). You can move many of these to the outside of the loop, which (theoretically) improves performance — especially when animating a large number of elements. (You can peek at my edited version of 3dcarousel.js on my site.) To be honest, I can’t tell the difference, though.
By the way, 3dcarousel works great on my iPhone, too.
Türkiyenin Yeni Emlak portalı
ALF:
as you wrote: ‘…window.addEvent(’domready’, function(){ to Event.observe(window, ‘load’, function() {…’
I did it… doesn’t work. somebody know why?
how bout reflection to this?
any script or reference?
Andy,
This looks flippin awesome and I’m going to see if I can make it work. VERY COOL
Kevin
Hi Andrew! Thank you very much for your work, this code makes for a nice eyecandy presentation of elements.
That being said, I do have some questions.
I have put the code to work and being successfully able to tweak it to my needs. However, I see some undesired behavior. For instance, it seems to be an acceleration in the relation of mouse movement and carousel rotation. At first, mouse movement causes a “slow” carousel rotation (depending on your initial settings) and then it gradually becomes faster with time (pretty much the definition of acceleration)
I’ve been analyzing the code, and even though I understand what it does, I haven’t been able to find a solution for this behavior.
Talking about code… what’s with the speedTest variable and the trying to fetch a speedTest element from the html? Was it an idea you didn’t continue?
Also, jtb tweaking of the code is correct (in my opinion)
I would really like to find a solution to this behavior as I see this 3Dcarousel as a really useful presentational element. I will be also trying to find a solution on my own, so if I find it I’ll let you know.
Good luck.
Ok, I found a “solution”
I changed the rules. I realized that the self rotating carousel could distract users from reading important text, so I made it static, but preserving the interactivity of the mousemove. In this way I get a nice layout of elements that also can interact and “show off” to the user.
I did this by setting the speed variable to 0 (so the carousel won’t start moving at all) and relying on the basespeed variable for setting the desired correlation between mouse displacement and carousel rotating speed.
Then I took away any relation to the “count” variable, that means taking it out of the posX and posY equation and taking out the count++ at the bottom.
And voila, you get a carousel that the kid has to push with his foot in order to work. A Flintstones carousel
DrummerHead,
Can you post your changes to the 3dcarousel.js? or would you mind emailing the whole script to me frankkany at cinram dot com?
Thanks,
Frank
If anyone needs a jQuery version of this script see the post at http://www.xeweb.net/2010/02/02/3d-carousel-using-jquery/
Pingback & Trackback
Leave A Reply