Animate Elements en Reveal-t-scroll

Vista prévia

Descripción

La biblioteca de JavaScript t-scroll le permite aplicar más de 45 animaciones bastante Cool a cualquier elemento cuando aparecen en la ventanilla.

Funcionamiento

Instalarlo a través de NPM e importar el t-scroll en su proyecto Web.

$ npm install t-scroll

O incluir los archivos JavaScript y CSS del t-scroll en la página HTML como esto:

<link rel="stylesheet" href="/path/to/t-scroll.min.css">
<script src="/path/to/t-scroll.min.js"></script>

Agregue una animación de su elección al elemento mediante la clase CSS. Todas las animaciones disponibles:

1. bounceIn
2. bounceOut
3. bounceUp
4. bounceDown
5. bounceLeft
6. bounceRight
7. fadeIn
8. fadeUp
9. fadeDown
10. fadeLeft
11. fadeRight
12. fadeUpBig
13. fadeDownBig
14. fadeLeftBig
15. fadeRightBig
16. flip
17. flipX
18. flipY
19. lightSpeedUp
20. lightSpeedRight
21. lightSpeedDown
22. lightSpeedLeft
23. rollUp
24. rollRight
25. rollDown
26. rollLeft
27. rotate
28. rotateUpLeft
29. rotateUpRight
30. rotateDownLeft
31. rotateDownRight
32. slideUp
33. slideDown
34. slideLeft
35. slideRight
36. zoomIn
37. zoomInUp
38. zoomInLeft
39. zoomInDown
40. zoomInRight
41. zoomOut
42. zoomOutUp
43. zoomOutLeft
44. zoomOutDown
45. zoomOutRight

<div class="zoomIn">Element 1</div>
<div class="bounceIn">Element 2</div>

Inicialice el desplazamiento t para animar los elementos cuando entran en la vista.

Tu.t_scroll({

't_element': '.bounceIn'
})

A veces es posible que necesite establecer un tiempo de espera para la animación:

<div class="bounceIn" t_show="1">Element</div>

Todas las opciones posibles que se pueden pasar durante init.

• t_elemet: elemento de destino
• t_animate: tipo de animación
• t_show: tiempo de espera en segundos
• t_position: Valor predeterminado: 0
• t_delay: tiempo de retardo
• t_infinite: animaciones de bucle?
• t_function: aceleración lineal facilidad-en la facilidad de salida de fácil-a-fin paso-final de paso inicial heredan

Registro de cambios

• v1.1.10 (07/13/2018)

  corrección de actualización incompatible con IE