Efecto Parallax con Stellar.js

Uno de los trendings en el desarrollo de páginas tiene que ser el Efecto Parallax, si no lo conoces por su nombre aquí tienes un ejemplos de páginas utilizándolo: Bagigia,TokioLab. En este videotutorial veremos cómo aplicar el efecto Parallax con Stellar.js.

Construir un sitio así requiere de más de un tutorial, pero sobre todo de trabajar alrededor de un concepto en el que se desenvuelva el efecto. Como podrás notar, todo gira alrededor del scroll que va haciendo el usuario sobre la página.

La palabra Parallax, como tal, nos da ya una descripción de lo que es el efecto, puede traducirse al español como alteración, y es que queda claro que la velocidad, el movimiento o la posición de los elementos se ve alterada para realizar el efecto.

Uno de los principios es que los elementos del fondo se mueven más lentamente que los de adelante, aplicar este sencillo principio ya le dará un efecto visual enorme a tu página. Por otra parte, es interesante que también busques agregar sprites cuyo comportamiento dependa del scroll del usuario.

Sin duda, cuando uno ve estas páginas, es común pensar que hay cientos de líneas de javascript detrás de esos proyectos, probablemente así sea, sin embargo si tú quieres iniciarte no necesitas de todo eso; es por eso que en el desarrollo de este tutorial utilizaremos un plug-in que hace por nosotros el trabajo difícil, su nombre: stellar.js.

Sin más te dejo para que te diviertas con el efecto siguiendo este sencillo tutorial:




Si quieres ir directo al código, puedes visitar el repositorio en github y aquí también está el demo que se trabaja en el tutorial.