h5画面滚动模板(h5动画库wow介绍原创)
h5画面滚动模板(h5动画库wow介绍原创)在需要动画特效的页面加载上面文件l wow.min.js javascript文件1.1.1 使用步骤下载文件:l animate.css 动画样式
通过H5和CSS3提供的原生动画,复杂度很高,需要深入对其知识的了解。
下面我们用个第三方的动画库,实现特效就特别简单,这也是实际开发的方式,不要重复发明轮子,好用就直接拿来用!
官网:
https://www.delac.io/wow/index.html
1.1.1 使用步骤
下载文件:
l animate.css 动画样式
l wow.min.js javascript文件
在需要动画特效的页面加载上面文件
在<head>标签中引样式表:
<link rel="stylesheet" href="css/animate.css">
在文件尾<html>标签前引入js交互支持
<!-- Wow -->
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
在div标签的class属性中增加wow,class支持多属性,相同修饰css,后面的属性覆盖前面的属性。
<div class="please wow" style="visibility: visible; animation-name: fadeInDown;">请您留意取餐账单号</div>
l visibility: visibale 当页面滚动到被修饰的标签时,才展示特效。
l animation-name是wow中已经定义好的特效,具体参见官网中How to user?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<title></title>
<style>
body{
margin: 10px;
font-size: 8px;
}
div{
line-height: 26px;
margin: 5px;
padding-left: 5px;
color: #FFFFFF;
width: 310px;
}
.subtitle{
font-weight:bold;
font-size: 16px;
color: #000000;
text-align: center;
}
.small-title1{
background-color: #008CF4;
}
.small-title2{
background-color: #FC3E42;
}
.number{
display: inline-table;
border-radius: 20px;
background-color: #000;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
vertical-align: middle;
color: #fff;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="subtitle wow" style="animation-name: fadeInDown;">第一部分:基础知识进阶(齐雷)</div>
<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="0.5s"><span class="number">1</span>新接口规范、Lambda表达式、Stream流、新日期</div>
<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1s"><span class="number">2</span>多线程、并发安全、锁优化、高级集合、JUC并发</div>
<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1.5s"><span class="number">3</span>NIO原理分析、RPC设计以及框架中NIO的应用实现</div>
<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="2s"><span class="number">4</span>手写类加载器、JVM调优、GC算法及优化</div>
<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-delay="1s">第二部分:数据结构和算法(齐雷)</div>
<div class="small-title1"><span class="number">5</span>时间复杂度、空间复杂度分析、存储结构分析</div>
<div class="small-title2"><span class="number">6</span>手写数组ArrayList和链表LinkedList</div>
<div class="small-title1"><span class="number">7</span>栈、队列、散列表结构分析及手写实现</div>
<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-dela