f ¿Qué es el efecto Parallax? - Tutorial Scrolling Parallax jQuery Plugin - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

1.6.16

¿Qué es el efecto Parallax? - Tutorial Scrolling Parallax jQuery Plugin

Un efecto Parallax en Web se produce cuando tenemos un fondo que se mueve a una velocidad diferente, al hacer scroll.

Con un efecto Parallax bien aplicado podemos conseguir web sorprendentes, Lo mejor es visitar algunas webs que tenga este efecto, como en esta recopilación de las mejores webs con ejemplos parallax de lal portal AWWWARDS, número uno en webs de inspiración.

La verdad es que existen numerosos tutoriales de efecto Parrallax para hacerlos a mano, pero lo mejor es utilizar Parallax.js, un plugin de jQuery que hemos probado y funciona realmente bien.

Para implementarlo en nuestra web, solo hay que bajarse e insertar en el <head> de nuestro HTML el archivo parallax.js junto a librería de jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

Para usarlo creamos una capa con la clase parallax-window (la cual podemos usar para aplicar estilos a través de CSS.

.parallax-window {
    min-height: 400px;
    background: transparent;
}

Y por último añadimos los parámetros data-parallax="scroll" y la url de la imágen data-image-src="/path/to/image.jpg" a una capa.

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>



No hay comentarios:

Publicar un comentario