Javascript

【Javascript】スクロールアニメーションt-scroll

May 28, 2017
t-scroll

t-scrollはHTML、CSS、およびJavaScriptを使用したスクロールアニメーション。

How to use

CSSとt-scroll.min.js を追加

<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">
<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>

HTML

<div class="zoomIn">"..."</div>
<div class="zoomIn">"..."</div>

setTimeoutが必要な場合はt_show="..."を追加

<div class="zoomIn" t_show="1">"..."</div>
<div class="zoomIn" t_show="2">"..."</div>

.t_animatedを追加

<div class="box-center">
    <div class="zoomIn t_animated" t_show="1"> ... </div>
    <div class="zoomIn t_animated" t_show="2"> ... </div>
</div>

Call the function

<script type="text/javascript">
    Tu.t_scroll({
      't_element': '.zoomIn'
    })
</script>

Options

  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

MIT