人靠衣装,机靠壳装

滚动进入视口动画特效插件EasyMotion

2018-06-06 17:16 发布

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

  • 关注1

  • 动态2

滚动进入视口动画特效插件EasyMotion.jpg


EasyMotion是一款jquery滚动进入视口动画特效插件。可以在页面向下滚动,指定元素进入浏览器视口时,对元素执行指定的CSS3动画效果。内置了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


授权方式:共享版

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

官方网站: 相关链接

在线演示

0
猜你喜欢
更多发现
子导航JS代码