Contenido consciente de la dirección mostrar efectos-Mostrar dirección

Vista prévia

Descripción

Dirección Reveal es una biblioteca de JavaScript escrita en ES 6 para el contenido consciente de la dirección que revelan efectos que animan en el contenido desde la dirección que se está moviendo con el ratón y los eventos táctiles.

Available effects:

• Swing
• Deslice
• Gire

Funcionamiento

Instale la revelación de dirección a través de NPM.

# NPM
$ npm install direction-reveal --save

Importe el módulo.

import DirectionReveal from 'direction-reveal';

La estructura HTML.

<div class="direction-reveal">


<a href="#" class="direction-reveal__card">


<img src="1.jpg" alt="Image" class="img-fluid">



<div class="direction-reveal__overlay">



<h3 class="direction-reveal__title">Title 1</h3>



<p class="direction-reveal__text">Description 1</p>


</div>

</a>


<a href="#" class="direction-reveal__card">


<img src="2.jpg" alt="Image" class="img-fluid">



<div class="direction-reveal__overlay">



<h3 class="direction-reveal__title">Title 2</h3>



<p class="direction-reveal__text">Description 2</p>


</div>

</a>


<a href="#" class="direction-reveal__card">


<img src="3.jpg" alt="Image" class="img-fluid">



<div class="direction-reveal__overlay">



<h3 class="direction-reveal__title">Title 3</h3>



<p class="direction-reveal__text">Description 3</p>


</div>

</a>


...

</div>

Inicializar la biblioteca y listo.

const directionRevealDemo = DirectionReveal();

Las opciones posibles para personalizar el contenido revelan efectos.

const directionRevealDemo = DirectionReveal({




// container element



selector: '.direction-reveal',




// item element



itemSelector: '.direction-reveal__card',




 // 'swing', 'slide' or 'rotate'



animationName: 'swing',




// enable touch event



enableTouch: true,




// in milliseconds



touchThreshold: 250




 });