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