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