WebCssDesign

Découvrons aujourd’hui un carrousel 3d gratuit. Une fois n’est pas coutume, celui-ci est développé sous mootools.

Installation:

1-HTML

Vous pouvez bien sur changer le nombre d’image et les images.

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

2-CSS

le css est très simple:

<style>

#carousel{

background-color:#000000;

width:700px;

height:400px;

position:relative;

border:1px solid #FFFFFF;

}img{

width:100%;

height:100%;

border:0px solid #FFFFFF;

}

</style>

de plus il vous est possible de changer quelques variables dans le Javascript.

C’est là que la compréhension est nécessaire pour mettre en place le carrousel.
baseSpeed est la vitesse initiale du carrousel.

centerX et centery repérer le centre de l’accordéon dans le conteneur principal.
Celles-ci devront être modifiées si les principaux conteneurs de largeur et de hauteur attributs sont modifiées.
Enfin la vitesse speed utilisé en conjonction avec baseSpeed permet de fixer la vitesse initiale du carrousel.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;

Démo ICI et Téléchargement ICI.

Catégories: Flash
Tags: Ajax, carrousel, Css, design, Flash, gratuit, javascript, mootools