Biblioteca JavaScript para animaciones de desplazamiento CSS3-Kissui. scrollanim

Vista prévia

Descripción

Kissui. scrollanim es una biblioteca de JavaScript ligera y de dependencia cero que le permite agregar más de 75 animaciones con tecnología CSS3 a un determinado elemento dependiendo de su posición actual en relación con la ventana del navegador cuando se desplaza.

Funcionamiento

Agregue scrollanim. min. CSS y scrollanim. min. js a su página web.

<link rel="stylesheet" href="build/scrollanim.min.css">
<script src='build/scrollanim.js'></script>

Utilice el atributo ' Data-Kui-Anim ' para especificar el tipo de animación cuando el elemento se desplaza a la vista.

<div data-kui-anim="fadeIn">Show this with fade-in</div>

O usa JavaScript como sigue:

kissuiScrollAnim.add(element, {

'in': 'fadeIn'
});

Determine en qué posición debe activarse la animación.

/*
in - in the viewport
out - ot in the viewport
middle - center aligned element (vertically)
center - center aligned element (horizontally)
top - at the top of the page
bottom - at the bottom of the page
left - at the left side of the page
right - at the right side of the page
*/
kissuiScrollAnim.add(element, {

'center middle': 'fadeIn'
});

Animaciones admitidas:

1. bounce
2. flash
3. pulse
4. rubberBand
5. shake
6. headShake
7. swing
8. tada
9. wobble
10. jello
11. bounceIn
12. bounceInDown
13. bounceInLeft
14. bounceInRight
15. bounceInUp
16. bounceOut
17. bounceOutDown
18. bounceOutLeft
19. bounceOutRight
20. bounceOutUp
21. fadeIn
22. fadeInDown
23. fadeInDownBig
24. fadeInLeft
25. fadeInLeftBig
26. fadeInRight
27. fadeInRightBig
28. fadeInUp
29. fadeInUpBig
30. fadeOut
31. fadeOutDown
32. fadeOutDownBig
33. fadeOutLeft
34. fadeOutLeftBig
35. fadeOutRight
36. fadeOutRightBig
37. fadeOutUp
38. fadeOutUpBig
39. flipInX
40. flipInY
41. flipOutX
42. flipOutY
43. lightSpeedIn
44. lightSpeedOut
45. rotateIn
46. rotateInDownLeft
47. rotateInDownRight
48. rotateInUpLeft
49. rotateInUpRight
50. rotateOut
51. rotateOutDownLeft
52. rotateOutDownRight
53. rotateOutUpLeft
54. rotateOutUpRight
55. hinge
56. rollIn
57. rollOut
58. zoomIn
59. zoomInDown
60. zoomInLeft
61. zoomInRight
62. zoomInUp
63. zoomOut
64. zoomOutDown
65. zoomOutLeft
66. zoomOutRight
67. zoomOutUp
68. slideInDown
69. slideInLeft
70. slideInRight
71. slideInUp
72. slideOutDown
73. slideOutLeft
74. slideOutRight
75. slideOutUp