Pequeña biblioteca JS para transiciones FLIP-voltear. js

Vista prévia

Descripción

Voltear. js es una pequeña biblioteca de JavaScript para implementar el < a href = "https://aerotwist.com/blog/flip-your-animations/" target = "_ blank" rel = "noopener noreferrer" > FLIP (primera, última, inversa, reproducir) animaciones con facilidad.

Funcionamiento

Instálelo a través de NPM:

npm install flipping --save

O incluya la biblioteca directamente en el documento:

<!-- Core -->
<script src="https://unpkg.com/[email protected]/dist/flipping.js"></script>

<!-- For Web Animation API -->
<script src="https://unpkg.com/[email protected]/dist/flipping.web.js"></script>

<!-- For GSAP Library -->
<script src="https://unpkg.com/[email protected]/dist/flipping.gsap.js"></script>

Cree una nueva instancia de volteo.

<!-- first view -->
<section class="gallery">

<div class="photo-1" data-flip-key="photo-1">


<img src="/photo-1"/>

</div>

<div class="photo-2" data-flip-key="photo-2">


<img src="/photo-2"/>

</div>

<div class="photo-3" data-flip-key="photo-3">


<img src="/photo-3"/>

</div>
</section>

<!-- second view -->
<section class="details">

<div class="photo" data-flip-key="photo-1">


<img src="/photo-1"/>

</div>

<p class="description">


Lorem ipsum dolor sit amet...

</p>
</section>

const flipping = new Flipping({


selector: () => document.querySelectorAll('[data-flip-key]'),



duration: 300,

});

Realice la animación.

flipping.flip();

Registro de cambios

07/14/2018

• actualizar