使用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动画
用法:
分别引入wow.js与Animate.css
在想添加动画的元素中添加'wow' (必须)
在想添加动画的元素中添加'animatecss' (为动画的Class,可以在该网站找到合适的动画http://daneden.github.io/animate.css/ 自己写也可以)
可以不依赖JQuery,并且在移动端也有不错的效果
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,并且在移动端也有不错的效果
相关文章推荐
- 推荐20个开源项目托管网站
- 推荐20个开源项目托管网站
- 40 个超棒的免费 Bootstrap HTML5 网站模板
- [架构] ZeroMQ 深度探索(二)
- [架构] ZeroMQ 深度探索(一)
- 网站的消息通知系统设计漫谈
- 揭秘丝路网站创建者:他让买毒品就像买书一样简单
- 分布式发布订阅消息系统 Kafka 架构设计
- 架构设计师与SOA
- 网站优化:测试网站速度的8款免费工具推荐
- Github部署静态网站
- 大型网站架构体系的演变
- 大型网站架构体系的演变
- 大型网站架构体系的演变(下)
- 大型网站架构体系的演变(上)
- 不错的网站
- 网站开发命名详细规范
- 什么是CC攻击,如何防止网站被CC攻击的方法总汇
- 网站防止CC攻击的方法
- GuozhongCrawler所有核心操作类及层次图