人靠衣装,机靠壳装

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

2018-04-15 16:15 发布

00
admin
湖南省 长沙市
  • 粉丝3

  • 关注0

  • 动态2

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


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


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢
更多发现
子导航JS代码
招联好期贷