SummArg | Cursos y recursos para webmasters

09/02/2011

Animá tus imagenes y texto con efecto parallax usando Smart3D

Una opción sumamente interesante para jQuery. El truco consiste en unir varias imagenes transparentes que el plugin posiciona una sobre la otra y otorga movimiento independiente a cada layer logrando un efecto 3d. Vean el demo para entender mejor

La técnica admite imagenes y texto, que deberán ubicarse como elementos dentro de una lista desordenada de la siguiente manera:

<ul id="Mindscape">
    <li><img src=".../ mindscape1.png"/></li>
    <li><img src=".../ mindscape2.png"/></li>
</ul>

En el head del documento deben incluirse jQuery y jquery.smart3d.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.smart3d.js"></script>

Inicializarlo y vincularlo al id Mindscape:

$ ( function () {
    $ ( '# Mindscape' ). Smart3D (850);
});

Finalmente incluiremos las medidas en el CSS.

#Mindscape {
    width : 750px ;
    height : 174px ;
}


Demo | Descarga


Dejar un comentario