Efecto de desplazamiento multicapa Interacitve-displaceable. js

Vista prévia

Descripción

La biblioteca JavaScript displaceable. js aplica un efecto de desplazamiento (paralaje) fluido, interactivo y activado por el ratón (Parallax) en varias capas que especifique.

See also:

• suave efecto de desplazamiento de múltiples capas Parallax en Vanilla JavaScript

Funcionamiento

Instale el displaceable. js con NPM.

# NPM
$ npm install displaceable --save

Importe el displaceable. js en el proyecto.

import Displaceable from 'displaceable';

Adjunte el Descolocable a uno o varios elementos.

const displaceable = new Displaceable(document.getElementById('layer'));

const displaceable = new Displaceable([

document.getElementById('layer-1'),

document.getElementById('layer-2'),

document.getElementById('layer-3')
]);

Opciones posibles para personalizar el efecto de desplazamiento.

const displaceable = new DisplacDisplacementeable(document.getElementById('layer'),{




// how much the nodes translate on mouse move



displaceFactor: 3,




 // lock movement on the X axis



lockX: true,







 // lock movement on the Y axis



lockY: false,







// how much it takes the nodes to reset when the mouse leaves the trigger area



resetTime: 1000,





 // how much the nodes skew on mouse move



skewFactor: 5,






 // the element that responds to the on mouse move event (window or Node)



trigger: window






});

También puede pasar las opciones a través de HTML datos atributos:

<img src="1.jpg"


 data-displace-factor="3"


 data-lock-x="true"


 data-lock-y="false"


 data-skew-factor="5"


 id="layer"
/>