基于Jquery的页面滚动到相应位置运行css3过场动画,独立式插件,无冗余

摘要
阿里云产品通用代金券,最高可达2000元
基于Jquery的页面滚动到相应位置运行css3过场动画,独立式插件,无冗余,放心使用。
基于animate.min.css的CSS3过场动画,使用灵活,分体式升级。

CSS3过场动画运用的特别广泛,当然,效果也很好。每次做一个网页或网站运用到CSS3特效的时候都要写一遍,或者翻翻之前写的,挺麻烦的。
特意整理了一下,分享一个基于JQ的过场动画,独立插件,没有冗余。你也可以整合到自己系统上面,减少一点加载。

图片展示:
111.png
插件使用:
$(dom).scrollAnim(object)
//object为json对象

配置参数:
object.dom:需要执行动画的DOM,默认“.fl_animated”
object.className:执行动画的类名,当元素的data-anim-class缺省时用到,默认“fadeIn”
object.loop:是否循环,为false,动画只执行一次,默认false
object.direction:vertical表示竖屏,其他表示横屏;默认“vertical”。功能预留参数,后续配合滚屏使用

元素属性:
data-anim-class:过场动画类名。animate.min.css中的动画名称或自定义的动画名称
data-anim-delay:延迟播放时间,延迟动画的执行;单位秒;默认0
data-anim-duration:动画执行的时长,非循环执行,是一次执行的时长;单位秒;默认1

执行动画的DOM需配置一段CSS,如下:
.fl_animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;opacity: 0;}

上面说的动画执行时长默认值就是在这个CSS中体现的


文件名称:基于Jquery的页面滚动到相应位置运行css3过场动画

文件大小:23.89 KB

更新日期:2019-11-15 11:05:28

作者信息:网络游客

授权类型:免费

目前评论:0 条

发表评论

游客 表情 看不清楚?点图切换