jueves, 24 de diciembre de 2015

Crear sencillo efecto Parallax scrolling

Muchos de nosotros, seguramente habrá deseado realizar un efecto parallax simple sin la necesidad de utilizar plugin de javascript, pues en este post les enseñaré a realizar el efecto y además podrán descargar el código.




Los archivos que utilizaremos serán los siguientes:
  • index.html: Es donde se encontrará el código HTML que utilizaremos para realizar el efecto parallax que deseamos.
  • imagen.jpg: Es la imagen que utilizaremos, para el ejemplo.
  • style.css: Es donde encontraremos los estilos de efecto parallax.
  • app.js: Es donde encontraremos el código javascript, que logrará el efecto parallax.
Este es el código que se encuentra en el archivo index.html, donde podremos observar que incluimos los archivos de app.js y style.css, así como también el jquery 

Este es el código que se encuentra en el archivo style.css, además podrán encontrar en el código que hemos usado el centrado vertical, explicado anteriormente.


Este es el código que se encuentra en el archivo app.js, lo que podremos ver que usamos el $(window).scroll() para poder realizar el efecto.


Con ello podremos visualizar el efecto parallax simple que nos habíamos propuestos, espero que les haya gustado el aporte, muy pronto habrá nuevos post.

1 comentario: