Efecto de inclinación de paralaje interactivo en Vanilla JavaScript-Vanilla-Tilt. js

Vista prévia

Descripción

Vanilla-Tilt. js es una biblioteca de JavaScript ligera para crear el efecto de inclinación de paralaje interactivo en el elemento DOM mediante Requestanimationframe. Similar al efecto de paralaje de póster de tvOS de Apple. Sin dependencias y totalmente personalizable.

Funcionamiento

Descargue y coloque el archivo JavaScript principal Vanilla-Tilt. js en la parte inferior de la Página Web.

<script src="vanilla-tilt.js"></script>

Aplique el efecto de inclinación de paralaje a su elemento utilizando HTML datos atributo como sigue:

<div data-tilt></div>

O inicializar el efecto de inclinación de paralaje con las siguientes opciones de configuración.

VanillaTilt.init(document.querySelectorAll(".element"), {

reverse: false,

max: 35,

perspective: 1000,

easing: "cubic-bezier(.03,.98,.52,.99)",

scale: 1,

speed: 300,

transition: true,

axis: null,

glare: false,

"max-glare": 1,

"glare-prerender": false,

"mouse-event-element": null,

reset: true
});

API methods.

// Destroy
element.vanillaTilt.destroy();

// Get values
element.vanillaTilt.getValues();

// Reset
element.vanillaTilt.reset();

Realice una acción cuando cambie la inclinación.

element.addEventListener("tiltChange", callback);

Registro de cambios

v1.7.0 (04/13/2019)

• Corregido y refactorizado algún código

v1.6.2 (04/13/2019)

• Se agregó gyroscopeSamples
• Añadida la escucha de página completa

12/28/2018

• v1.6.1: Fix gyroscope false

12/23/2018

• v1.6.0: Fix first onDeviceOrientation call from desktop

09/20/2018

• Despejen todo en Destroy ().