基于ES6的DOM元素动画库插件

当前位置:主页 > CSS3库 > CSS3动画 > 基于ES6的DOM元素动画库插件
基于ES6的DOM元素动画库插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-30
    阅读:
简要教程

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

网友评论