Suave inercial & efectos de desplazamiento Parallax en JavaScript-Luxy. js

Vista prévia

Descripción

Luxy. js es un plugin de JavaScript ligero que aplica desplazamiento inercial suave y efectos de desplazamiento Parallax a su página web.

Funcionamiento

Instale & descargar el Luxy. js con NPM:

# NPM
$ npm install luxy.js --save

Inserte el archivo JavaScript ' Luxy. js ' en la página.

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

Añada la clase ' Luxy-el ' a los elementos de paralaje dentro del documento y config el efecto de desplazamiento paralaje con los siguientes atributos ' Data ':

• offset de datos: offset en píxeles
• Data-Speed-y: la velocidad del efecto de desplazamiento de paralaje vertical
• Data-horizontal: establece en ' 1 ' para habilitar el desplazamiento horizontal de paralaje
• Data-Speed-x: la velocidad del efecto de desplazamiento de paralaje horizontal

<div class="luxy-el"



data-offset="-50"


 data-speed-y="-5">

<img src="parallax.png" alt="image">
</div>

A continuación, envolver todo el contenido web en un contenedor con el identificador de ' Luxy '.

<div id="luxy">

your main content and parallax elements here
</div>

Inicializa el Luxy. js para habilitar el inercial & efectos de desplazamiento Parallax.

luxy.init();

Available plugin options.

{


// selector of main container

wrapper: '#luxy',


// selector of parallax elements

targets : '.luxy-el',


// speed

wrapperSpeed: 0.08,

targetSpeed: 0.02,


// in percentage

targetPercentage: 0.1

};