【Javascript】スクロールアニメーションライブラリKissui.scrollanim

Scrollanimは見事なスクロールアニメーションを作成するためのCSS3やJavaScriptライブラリ。

HTML

<div data-kui-anim="fadeIn">
Show this with a fadeIn animation.
</div>

Advanced mode

JavaScriptのAPIを使用して、アニメーションを追加

  1. in
  2. out
  3. middle
  4. center
  5. top
  6. bottom
  7. left
  8. right
kissuiScrollAnim.add(element, {
'in': 'fadeIn',
'out': 'fadeOut'
});

Animations

  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

MITライセンス

 
Scrollanim

【Javascript】スクロールアニメーションライブラリKissui.scrollanim

  • LATEST
  • RELATED
  • POPULAR