Contenido

Parallax, imagenes 3D con jQuery

27 ago

+ 5

Hoy he descubierto Parallax, y he quedado impresionado de lo que visto

parallax

Si has seguido el enlace de la imagen, habrás visto que es parallax. Si no lo has visto, te lo explico rápidamente.

Parallax es un plugin para jQuery que te permite crear imágenes en perspectiva usando varias imágenes ubicadas en elementos <li />.

<ul id="parallax">
   <li></li>
   <li></li>
</ul>

Mediante el uso del ratón, movemos las imágenes provocando una sensación 3D muy impresionante…. creo que así y todo es mejor que veas un par de ejemplos.

  1. Mapa
  2. Pétalos
  3. Montañera

Instalación

Para instalar parallax, deberemos tener informar, mediante tags <script /> en nuestro <head /> el fichero de jquery-x.y.z.min.js y el de jquery.jparallax.js

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>

Funcionamiento

jQuery('#parallax').jparallax(options);

Como casi todos los plugins de jQuery, podemos indicar que elemento será sobrecargado con la nueva funcionalidad, para ello lo indicaremos mediante el selecto jQuery() y encadenamos el método jparallax() al que le podemos pasar una serie de parámetros.

Descargar

Actualmente es una versión BETA, la 0.3, por lo que puede dar algún problema en algún navegador. Lo podemos descargar directamente de la página del proyecto.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.