Elemento Mostrar animaciones con JavaScript y CSS3-Doorman

Vista prévia

Descripción

Doorman es una librería JavaScript para aplicar sutiles animaciones de revelar a objetos DOM utilizando atributos de datos HTML5 y transiciones/transformaciones CSS3.

Instalación

# Yarn
yarn add doorman-effect

# NPM
$ npm install doorman-effect

¿Cómo funciona?

Incluya el JavaScript principal en la página web cuando sea necesario.

<script src="doorman.min.js"></script>

Agregue el atributo HTML5 ' Data-Doorman ' al elemento de destino.

<span data-doorman>Element To Reveal</span>

Oculte el elemento en la carga.

[data-doorman] {

visibility: hidden;
}

Active la animación de la revelación en el elemento.

const elements = document.querySelectorAll('[data-doorman]');
const doorman = new Doorman(elements, { /* options here */ });
doorman.start();

Config la animación de la revelación en el JavaScript:

const doorman = new Doorman(elements, {




 // lr (left to right) || rl (right to left) || tb (top to bottom) || bt (bottom to top).



direction: "lr",




// background color



bgColor: "rgb(000, 000, 000)",




// duration in milliseconds



duration: "300",




// delay time



delay: "0",




// easing effect



easing: "cubic-bezier(0.860, 0.000, 0.070, 1.000)",




// reverse animation



reverse: false,




// callbacks



begin: function begin(element) {},



complete: function complete(element) {}




});

O a través de atributos de datos HTML5:

<span data-doorman



data-doorman-direction="lr"



data-doorman-bgColor="rgb(000, 000, 000)"



data-doorman-duration="300"



data-doorman-delay="150"



data-doorman-easing="cubic-bezier(0.860, 0.000, 0.070, 1.000)"



data-doorman-reverse="flase">
</span>