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:
<script src="js/mootools.js" type="text/javascript"></script>
<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:
#carousel{
        background-color:#fff;
        width:700px;
        height:300px;
        position:relative;
        margin-left:100px;
        border:1px solid #FFFFFF;
       
    }
   
    img{
        width:100%;
        height:auto;
        border:0px solid #FFFFFF;
        display:block;
    }

Nuestra estructura

PLAIN TEXT
HTML:
<div id="carousel">
    <div><a href="#"><img src="images/foto1.png" /></a></div>
   
    <div><a href="#"><img src="images/foto2.png" /></a></div>
   
    <div><a href="#"><img src="images/foto3.png" /></a></div>
   
    <div><a href="#"><img src="images/foto4.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>

JavaScript Variables

PLAIN TEXT
JavaScript:
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;