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
JavaScript:
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/3dcarousel.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)
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;
}
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
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><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
JavaScript:
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
Loading ...