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

安装

可以通过npm来安装t-scroll.js插件。

npm install --save-dev t-scroll                   
                

使用方法

在页面中引入t-scroll.min.css和t-scroll.min.js文件。

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

HTML结构

为你需要制作动画效果的DOM元素添加相应的class类，例如：

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

如果需要添加延迟效果，可以设置t_show属性：

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

初始化插件

可以通过下面的方法来初始化t-scroll插件。

<script type="text/javascript">
    Tu.t_scroll({
      '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

在线预览    源码下载