星空网 > 软件开发 > Java

使用Animate.css和wow.js,实现各大网站常用的页面加载动画

经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画。

主要区别于在普通页面是在页面加载完成后所有动画一起动,或者设置延迟时间。

而这两个插件混搭使用可以是页面现在到该元素时才加载动画。拥有非常不错的效果。

 

算个比较常见的交互效果,研究了一下午,主要使用以下两个插件完成。

1.wow.js

实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css。

2.Animate.css

非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画

 

用法:

<link href="animate.css" rel="stylesheet"><script src='/images/loading.gif' data-original="wow.min.js"></script> 

  分别引入wow.js与Animate.css

<div class="wow animatecss"></div>

在想添加动画的元素中添加'wow'     (必须)

在想添加动画的元素中添加'animatecss'     (为动画的Class,可以在该网站找到合适的动画http://daneden.github.io/animate.css/   自己写也可以)

<script>new WOW().init();</script>

可以不依赖JQuery,并且在移动端也有不错的效果

 




原标题:使用Animate.css和wow.js,实现各大网站常用的页面加载动画

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

斑头雁:https://www.ikjzd.com/w/1573152929335386113
安速货运:https://www.ikjzd.com/w/1573152929952292865
雅虎问答:https://www.ikjzd.com/w/1573152930660786178
Answer The Public:https://www.ikjzd.com/w/1573152931243794434
蚂蚁链:https://www.ikjzd.com/w/1573152933164785666
倒签提单:https://www.ikjzd.com/w/1573152934352117761
丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836576.html
一天拿下10万美金预售!深圳大卖出海第一年成为亚马逊供应商:https://www.kjdsnews.com/a/1836577.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流