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
13 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?
Pingback & Trackback
Leave A Reply