Efecto de desplazamiento de imagen HTML5/JavaScript Parallax-Parallax. js

Vista prévia

Descripción

Paralaje. js es una biblioteca de JavaScript compatible con ECMAScript 6 para implementar efectos de desplazamiento de imagen paralaje en su página web. Todas las opciones de configuración se pueden pasar a través de HTML5 datos atributos en IMG etiqueta.

Instalación

# NPM
$ npm install scroll-parallax --save

¿Cómo funciona?

Incluya el Parallax. js en su página web cuando sea necesario.

<script src="dist/Parallax.js"></script>

Envuelve tus imágenes de paralaje en una posición : un contenedor relativo con una altura fija.

<section class="parallax-container" style="height: 80vh;">

<img class="parallax" data-center="0.62" data-intensity="20" src="1.jpg" >
</section>

.parallax-container {

position: relative;

overflow: hidden;
}

Haga la imagen de paralaje posición: absoluta.

img {

position: absolute;
}

Active el efecto de desplazamiento de paralaje en la imagen mientras desplaza la Página Web.

var parallax = new Parallax('.parallax', {//OPTIONS})

También puede pasar las opciones en el JavaScript.

var parallax = new Parallax('.parallax', {



// the offset top and bottom boundaries in pixels used by the parallax to consider an image in the viewport


offsetYBounds: 50,



// the intensity of the parallax effect


intensity: 30,



// the vertical center of the parallax.


 // If you increase this value the image will be centered more on the top of the screen reducing it will look centered at bottom


center: 0.5,



// the safe image height gap value in percentage that ensures it can always properly parallax


safeHeight: 0.15

})

Registro de cambios

v2.1.0 (08/02/2018)

• Añadida: la posibilidad de crear una instancia de la clase Parallax sin selectores DOM
• actualizado: se ha mejorado el método destroy restaurando el estado inicial de los elementos DOM
• Bugfix