Hot!Ajax

  • Increase font size
  • Default font size
  • Decrease font size
  • default color
  • black color

Latest News

Gsearch

Google
Home arrow mootools arrow Simple 3D Carousel
Simple 3D Carousel
User Rating: / 12
PoorBest 
Friday, 07 December 2007

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 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.

<p><div id="carousel">

<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></p>
  

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.

<p><style></p>

<p>#carousel{

background-color:#000000;

width:700px;

height:400px;

position:relative;

border:1px solid #FFFFFF;

}img{

width:100%;

height:100%;

border:0px solid #FFFFFF;

}

</style></p>
  

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.

<p>var baseSpeed = 0.05; 

var radiusX = 190; 

 

var radiusY = 40; 

var centerX = 300; 

var centerY = 190;

 

var speed = 0.3;</p>
  
Comments (1)add comment

Write comment

busy
 
< Prev   Next >
[ Back ]