Uno de los trends de diseño más importante en los últimos meses o el último año es el efecto Parallax. Muchas grandes agencias de diseño han construido sitios dignos de un awwward basados en este patrón.

El efecto Parallax, en general, se refiere a elementos dentro de un objeto visible que se mueven a distinta velocidad, así pues, es posible que el ejemplo más claro de Parallax lo hayamos visto jugando, por lo general, en un juego el fondo se mueve más lento que los personajes y/o assets, eso es Parallax. En diseño esto se ha aplicado en efectos vistosos, para ejemplo ésta página de Nike que muestra una aplicación que usa javascript para construir un efecto muy vistoso con elementos moviéndose y mostrándose en el foco a distintas velocidades.

Por lo general, el efecto se construye utilizando javascript, si bien puedes logar esa clase de resultados utilizando “javascript crudo”, es decir, sin plugins, en la web ya hay gente que ha pasado por esto y ha decidido regalarnos algunos plugins, entre los más populares:

Stellar.js: Échale un vistazo porque es la librería que utilizamos en el tutorial.

Scrollorama: Esta librería me parece genial, y un ejemplo de lo que puedes hacer con ella, lo encuentras en éste enlace.

Pasemos al código.

El código del tutorial es bastante sencillo, deduciendo que ya tienes la estructura de tu HTML, de la página a la que le aplicarás el efecto, vamos a enlazar un par de scripts, el primero es jQuery y el segundo Stellar.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src='https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js'></script>

Ahora que tenemos listas las librerías, queda ejecutar la función de stellar para que ejecute los efectos correspondientes:

<script>
$(function(){
$(window).stellar();
});
</script>

Una vez hecho esto, stellar tomará una serie de atributos para definir el movimiento de los elementos al hacer el scroll, estos atributos son atributos data de HTML5, los valores de estos atributos van desde el 0 que significa sin movimiento, hasta cualquier valor entero, donde el 1 significa moverse a velocidad normal, y el 2 moverse al doble de velocidad que el resto de la página. Los atributos son:

• data-stellar-ratio: Que define el movimiento de un elemento
• data-stellar-background-ratio: Que define el movimiento del fondo de un elemento.

Existen más atributos para modificar el comportamiento de la página, y puedes checarlos en la documentación del plugin.

Sin más, quiero dejarte con un enlace para el vídeo tutorial en mi canal sobre este post.