元素滚动进入视口时展示动画效果插件

t-scroll.js是一款基于ES6的DOM元素动画库插件，当网页元素滚动进入视窗时，执行指定的动画效果呈现，共内置有45种炫酷的动画效果，并且使用非常简单。

如何使用

• 首先，将css文件包含到html头：

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

• 包括文件t-scroll.min.js进入页脚

<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>

• 设置html

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

• 如果你需要

  setTimeout

  您需要插入容器属性

  data-t-show="..."

<div class="zoomIn" data-t-show="1">"..."</div>
<div class="zoomIn" data-t-show="2">"..."</div>

• 或者你想

  data-t-show

  运行见第一屏幕。你必须增加

  .t-animated

<div class="box-center">
    <div class="zoomIn t-animated" data-t-show="1"> ... </div>
    <div class="zoomIn t-animated" data-t-show="2"> ... </div>
</div>

调用函数

<script type="text/javascript">
    Tu.tScroll({      
      't-element': '.zoomIn'
    })
</script>

t-scroll插件的可用动画类型有：

• bounceIn

• bounceOut

• bounceUp

• bounceDown

• bounceLeft

• bounceRight

• fadeIn

• fadeUp

• fadeDown

• fadeLeft

• fadeRight

• fadeUpBig

• fadeDownBig

• fadeLeftBig

• fadeRightBig

• flip

• flipX

• flipY

• lightSpeedUp

• lightSpeedRight

• lightSpeedDown

• lightSpeedLeft

• rollUp

• rollRight

• rollDown

• rollLeft

• rotate

• rotateUpLeft

• rotateUpRight

• rotateDownLeft

• rotateDownRight

• slideUp

• slideDown

• slideLeft

• slideRight

• zoomIn

• zoomInUp

• zoomInLeft

• zoomInDown

• zoomInRight

• zoomOut

• zoomOutUp

• zoomOutLeft

• zoomOutDown

• zoomOutRight

t-scroll.js DOM元素动画库插件的github地址为：https://github.com/crazychicken/t-scroll