EasyMotion是一款jquery滚动进入视口动画特效插件。EasyMotion插件可以在页面向下滚动,指定元素进入浏览器视口时,对元素执行指定的CSS3动画效果。EasyMotion内置了9种CSS3动画特效。
使用方法
在页面中引入jquery和easymotion.js文件。
<script src="js/jquery.min.js"></script> <script src="js/easymotion.js"></script>
HTML结构
然后,为你需要制作进入浏览器视口时,产生动画效果的元素添加animation=""
属性。
<h2 animation="scale">...</h2> <div animation="fade">...</div> <img src="image.jpg" animation="rotate"> <p animation="left-to-right">...</p>
你可以通过animation-time
属性来控制动画的持续时间。
<img src="image.jpg" animation="scale" animation-time="2500">
你还可以通过animation-offset
属性来控制动画的偏移。
<div animation="fade" animation-offset="300">...</div>
插件内置的动画类型
EasyMotion插件内置了9种CSS3动画类型。
animation="fade"
:淡入淡出效果。animation="scale"
:缩放效果。animation="rotate"
:旋转效果。animation="rotate-c"
:逆时针旋转效果。animation="scale-rotate"
:缩放和旋转同时进行。animation="left-to-right"
:自左向右动画。animation="right-to-left"
:自右向左动画。animation="bottom-to-top"
:从下到上动画。animation="top-to-bottom"
:从上到下动画。
该jquery滚动进入视口动画特效插件的github地址为:https://github.com/tvinzz/EasyMotion