Carrusel 3D usando Mootools

Scripts, Diseño Web

carrucel3d.jpg

Simple 3D Carousel bajo Mootools, es otra agradable alternativa que nos permitirá crear galerías de imágenes Carrusel en 3d. Su utilización es realmente muy sencilla y fácil de personalizar y configurar mediante parámetros alternativos. La idea de este proyecto fue basado en flash 3D y jQuery 3D Carousel.

Ver Demo - Mas info y descarga andrewsellick
Uso:
Realizamos la llamada a mootools dentro de nuestra etiqueta < head >... y de la librería Carousel

PLAIN TEXT
JavaScript:
  1. <script src="js/mootools.js" type="text/javascript"></script>
  2. <script src="js/3dcarousel.js" type="text/javascript"></script>

un poco de CSS (tamaño de nuestro div, color de fondo, etc)

PLAIN TEXT
CSS:
  1. #carousel{
  2.         background-color:#fff;
  3.         width:700px;
  4.         height:300px;
  5.         position:relative;
  6.         margin-left:100px;
  7.         border:1px solid #FFFFFF;
  8.        
  9.     }
  10.    
  11.     img{
  12.         width:100%;
  13.         height:auto;
  14.         border:0px solid #FFFFFF;
  15.         display:block;
  16.     }

Nuestra estructura

PLAIN TEXT
HTML:
  1. <div id="carousel">
  2.     <div><a href="#"><img src="images/foto1.png" /></a></div>
  3.    
  4.     <div><a href="#"><img src="images/foto2.png" /></a></div>
  5.    
  6.     <div><a href="#"><img src="images/foto3.png" /></a></div>
  7.    
  8.     <div><a href="#"><img src="images/foto4.png" /></a></div>
  9.    
  10.     <div><a href="#"><img src="images/swf-player.png" /></a></div>
  11.    
  12.     <div><a href="#"><img src="images/coldfusion.png" /></a></div>
  13.  
  14. </div>

JavaScript Variables

PLAIN TEXT
JavaScript:
  1. var baseSpeed = 0.05;
  2. var radiusX = 190;
  3. var radiusY = 40;
  4. var centerX = 300;
  5. var centerY = 190;
  6. var speed = 0.3;

Compartelo

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: