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>
Entradas
No hay comentarios:
Publicar un comentario