您的位置:首页 > 运维架构 > 网站架构

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

2015-06-07 21:29 711 查看
经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画。

2015-6-24添加测试地址,可自行审查元素

http://2.lanjianwc.sinaapp.com/

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

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

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

1.wow.js

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

2.Animate.css

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

用法:

<link href="animate.css" rel="stylesheet">
<script src="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,并且在移动端也有不错的效果
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: