Universal AJAX Live Search

Creando un efecto Parallax con jQuery, HTML5 y CSS3

Hace poco publicamos un tutorial de un efecto "Parallax" con CSS3 (realizado por el buen Edgar Parada). Como ya sabemos, en desarrollo y diseño web, un mismo resultado (independientemente de lo que estemos haciendo) lo podemos obtener de muchas formas diferentes, por lo que en esta ocasión haremos un pequeño tutorial de Parallax pero ahora hecho con jQuery, HTML y CSS.


Haz scroll con la barra para ver el efecto

Básicamente y para los que no lo tienen tan claro, Parallax (hablando de videojuegos, sitios web y gráficos en computadora) es el efecto visual que se crea al desplazar varios planos de una composición a velocidades o intervalos distintos creando la sensación de profundidad. Es un recurso muy utilizado sobre todo en juegos de video, ya sea de plataformas tipo Playstation o Xbox hasta en juegos sencillos hechos en Flash para computadora o dispositivos móviles. Si nos ponemos a investigar un poco este concepto nos podemos remitir a épocas lejanas donde los astrónomos utilizaban este principio para medir las distancias a nivel astronómico como estrellas, galaxias y otros cuerpos celestes.

Últimamente Parallax se ha vuelto muy popular en el diseño de sitios, principalmente por el efecto 3D y la ilusión de profundidad que imprime al diseño, esto mediante varias opciones que pueden ser Flash, CSS3, HTML5, Javascript y/o jQuery. En unas cuantas líneas de código y con 4 imágenes vamos a hacer un ejemplo de como lograrlo, ya dependerá de ti y de tu creatividad, la manera en que puedas aplicar (o mejorar) esto a tu sitio web. Incluso te dejaremos algunas ligas muy interesantes de varios sitios que lo implementan muy bien dentro de su desarrollo.

En nuestro documento HTML importaremos la librería de jQuery:

<script src="/jquery-1.4.3.min.js" type="text/javascript"></script>

En el <head> pondremos el plug-in donde declaramos: el coeficiente, el lugar donde iniciará el plug-in y el lugar donde terminará. Basicamente la función actualizará la posición de las imágenes multiplicando el valor del "scroll" por el coeficiente que declaremos.

 

 

<script>

$(function() {

        $.fn.parallax = function(options){

            var $$ = $(this);

            offset = $$.offset();

            var defaults = {

                "start": 0,

                "stop": offset.top + $$.height(),

                "coeff": 0.95

            };

            var opts = $.extend(defaults, options);

            return this.each(function(){

                $(window).bind('scroll', function() {

                    windowTop = $(window).scrollTop();  

                    if((windowTop >= opts.start) && (windowTop <= opts.stop)) {

                        newCoord = windowTop * opts.coeff;

                         

                        $$.css({

                            "background-position": "0 "+ newCoord + "px"

                        });

                    } 

                });

            });

        };

 

     $('.back').parallax({ "coeff":-1 });

$('.back .middleback').parallax({ "coeff":-1.50 });

$('.back .middleback .middlefront').parallax({ "coeff":-2.15 });

     $('.back.middleback .middlefront .logo').parallax({ "coeff":-3.15 });

})

</script>

 

Hacemos el llamado al plug-in por medio de cada una de las clases. Podemos utilizar cuantas capas u objetos necesitemos con solo duplicar el llamado y poner el valor correspondiente a cada uno. Si ponemos atención veremos que en Parallax los objetos que se encuentran más cerca se mueven de manera más rápida, mientras los que están hasta el fondo tardan más en recorrer toda el área. Es así que estableceremos los valores de cada imagen, mientras mayor sea el valor más rápido será el movimiento, o por decirlo de otra manera, los objetos que supone están más adelante en la escena serán los que un valor más alto tengan.

Definimos un <div> por cada una de las imágenes que vayamos a utilizar. En este caso serán 4 imágenes las que usemos, una para el fondo dos mas intermedias a las que hemos aplicado un blur desde Photoshop para dar un mejor aspecto de profundidad de campo y una imagen frontal o principal. De cada una definiremos sus propiedades mediante CSS.

<div class="back">

<div class="middleback">

<div class="middlefront">

<div class="logo">

    </div>

</div>

    </div>

</div>

 

Definimos las propiedades de cada uno de nuestros <div>, asignándole cada una de nuestras imágenes a cada uno así como un tamaño estándar de 468x500 pixeles para todos. A la imagen que utilicemos como background o fondo le asignaremos un color, en este caso un gris muy parecido al que tiene nuestra imagen, todas las demás las dejamos sin color de fondo y con el valor de no repetir la imagen.

.back {

width:468px

height:500px

margin:0 0 0 0; 

background:url(Back.jpg) no-repeat #DCDCDC; 

}

.back.middleback .middlefront .logo {   

width:468px

height:500px; 

background:url(Front.png) no-repeat

}

.back .middleback .middlefront {

width:468px;

height:500px;

background:url(Middle-Front.png) no-repeat;

}

.back .middleback{

width:468px;

height:500px;

background:url(Middle-Back.png) no-repeat;

 

}


Et voilà! Probamos nuestros archivos en nuestro o nuestros navegadores y vemos como funciona.  Hemos definido el tamaño y las especificaciones en el ejercicio para que se vea dentro de un recuadro de 468 x 500 pixeles, sin embargo ya dependerá de ti el aplicárselo a todo el sitio, a una parte de él, de manera horizontal o como tu diseño lo requiera.

Descarga los archivos del ejercicio aquí.

Aquí algunos ejemplos de sitios que utilizan este principio de forma creativa:

Nike Better World
Nike Better World

Activate Drinks: 

ActivateDrinks

Campaign Monitor is Hiring:

Campaign Monitor is Hiring

Atlantis World's Fair:

http://lostworldsfairs.com/atlantis/

Jan Ploch:

http://janploch.de/