欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > css3库 > CSS3 animation > jquery滚动进入视口动画特效插件EasyMotion

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

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

关键词:css3动画,动画,进入视口动画,jquery滚动进入视口,jquery动画,滚动,进入页面动画,EasyMotion,css3库,css3animation

描述:EasyMotion是一款jquery滚动进入视口动画特效插件。EasyMotion插件可以在页面向下滚动,指定元素进入浏览器视口时,对元素执行指定的CSS3动画效果。EasyMotion内置了9种CSS3动画特效。

简要教程

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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/css3_css3animation/8985.html

 在线演示  免费下载
编号:201805300000008985
大小:0.04MB
上传时间:2018-06-02 06:56
素材由用户"a93510159"上传分享。

标签

最新推荐素材

与jquery滚动进入视口动画特效插件EasyMotion相关的素材

.