Parallax multiples efectos con jquery y css3

AUTOR: Hugo Miguez CREADO: 2018-04-11 15:38:22

Parallax con multiples efectos y configuraciones. Puedes crear multiples parallax en distintas zonas de tu página web y aplicar distintos efectos a cada uno y velocidades de scroll.

Código básico en html

<div class="parallax">
    <img class="img" alt="" src="fondo.jpg"/>
</div>

Código javascript

$(document).ready(function(){
    var parallax = new Parallax();
    parallax.init({style:"basic", speed:0.35, position:"bottom", filter:''});
});

Ejemplos y descargas

Ejemplos parallax Descargar parallax

Características

  • Multiples efectos
  • Multiples parallax en una misma página
  • Configuración individual para cada parallax con data dentro de cada div
  • Dependencia de jquery
  • Muy ligero: javascript 4kb (comprimido) y 10kb (sin comprimir)

Opciones

Clase baseDataValor
parallaxdata-stylebasic | zoom
parallaxdata-positiontop | bottom
parallaxdata-filtergrayscale | sepia | saturate | brightness | invert | black

Ejemplos

Parallax scroll hacia abajo, style zoom y velocidad 0.25px


Código html

<div class="parallax" data-speed="0.25" data-style="zoom" data-position="top">
    <img class="img" alt="" src="fondo.jpg"/>
</div>

Parallax scroll hacia arriba, style zoom, filter black y velocidad 0.5px


Código html

<div class="parallax" data-speed="0.5" data-style="zoom" data-position="bottom" data-filter="black">
    <img class="img" alt="" src="fondo.jpg"/>
</div>

Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.