animate.css
- animate.css是一個(gè)來自國外的CSS3動(dòng)畫庫，它預(yù)設(shè)了抖動(dòng)（shake）课梳、閃爍（flash）距辆、彈跳(bounce)、翻轉(zhuǎn)(flip)暮刃、旋轉(zhuǎn)(rotateIn/rotateOut)跨算、淡入淡出(fadeIn/fadeOut)等多達(dá)70多種動(dòng)畫特效，幾乎包含了所有常見的動(dòng)畫特效
- 網(wǎng)站: https://github.com/daneden/animate.css
- 步驟
- 引入animate.css的文件
- 給需要執(zhí)行動(dòng)畫的元素添加類名
- animated infinite bounce delay-2s
- 第一個(gè)animated是一個(gè)基類, 只要元素需要執(zhí)行動(dòng)畫就必須添加這個(gè)類型
- 第二個(gè)infinite是動(dòng)畫執(zhí)行的次數(shù), 默認(rèn)只執(zhí)行一次, infinite可以無限執(zhí)行, 此類名是可選的
- 第三個(gè)bounce是動(dòng)畫名稱
- 第四個(gè)delay-xx, 延遲時(shí)間, 此類名是可選的
- 框架的定制:
- 所有的CSS框架都可以隨意定義, 但是一定要注意不要直接修改框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-animate基本使用</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
}
.animated.delay-1s {
-webkit-animation-delay: 5s !important;
animation-delay: 5s !important;
}
</style>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="animated infinite flip delay-1s"></div>
Wow.js
- 對animate.css的擴(kuò)充, 可以在頁面逐漸向下滾動(dòng)的過程中逐漸釋放這些動(dòng)畫效果, 讓頁面滾動(dòng)更有趣
- 地址: https://github.com/matthieua/WOW
- 使用步驟:
- WOW.JS基本使用
- 引入animate.css
- 引入wow.js
- 給需要執(zhí)行動(dòng)畫的元素添加類名
- 在JavaScript中初始化wow.js
- wow slideInLeft
- 第一個(gè)參數(shù): 是一個(gè)基類, 需要需要執(zhí)行動(dòng)畫必須添加這個(gè)類
- 第二個(gè)參數(shù): 動(dòng)畫的名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-wow基本使用</title>
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.box>div{
width: 200px;
height: 200px;
background: red;
}
.box>div:nth-child(2){
background: blue;
}
.f-left{
float: left;
}
.r-right{
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="f-left wow slideInLeft" data-wow-delay="2s"></div>
<div class="r-right wow slideInRight" data-wow-iteration="3"></div>
</div>
<script>
new WOW().init();
</script>
</body>
</html>
window.addEventListener('load', function (ev) {
var wow = new WOW(
{
boxClass: 'test', // 需要執(zhí)行動(dòng)畫的元素的 class (default is wow)
animateClass: 'animated', // animation.css 動(dòng)畫的 class (default is animated)
offset: 600, // 距離可視區(qū)域多少開始執(zhí)行動(dòng)畫 (default is 0)
mobile: true, // 是否在移動(dòng)設(shè)備上執(zhí)行動(dòng)畫 (default is true)
live: true, // 異步加載的內(nèi)容是否有效 (default is true)
callback: function(box) {
// 每次動(dòng)畫啟動(dòng)時(shí)都會(huì)觸發(fā)回調(diào)
// 傳入的參數(shù)是正在動(dòng)畫的DOM節(jié)點(diǎn)
},
scrollContainer: null // 滾動(dòng)容器選擇器，默認(rèn)使用窗口
}
);
wow.init();
});
scrollReveal
- scrollReveal是一個(gè)兼容PC端和移動(dòng)設(shè)備的滾動(dòng)動(dòng)畫庫。不同的是 WOW.js 的動(dòng)畫只播放一次伦腐，而 scrollReveal.js 的動(dòng)畫可以播放一次或無限次
- 使用步驟:
- 引入框架
- 搭建結(jié)構(gòu)體
- 創(chuàng)建ScrollReveal對象
- 調(diào)用ScrollReveal對象的reveal方法, 將需要執(zhí)行動(dòng)畫的元素給它
var sReveal = ScrollReveal();
sReveal.reveal('做動(dòng)畫的選擇器', {
reset: true, // 重置動(dòng)畫, 開啟滾動(dòng)時(shí)往返都有動(dòng)畫, 默認(rèn)只有向下滾動(dòng)有動(dòng)畫
duration: 3000, // 動(dòng)畫持續(xù)的時(shí)間
delay: 0, // 動(dòng)畫延遲時(shí)間
rotate: {x: 0, y: 0, z: 45}, // 指定過渡的角度
opacity: 0.2, // 初始化透明度
scale: 0.8, // 初始化縮放比例
distance: "500px", // 初始化默認(rèn)的偏移位
origin: "bottom", // 初始化默認(rèn)偏移位的方向
easing: "ease-in-out", // 指定動(dòng)畫的運(yùn)動(dòng)方式(勻速/緩動(dòng))
beforeReveal: function () {
// 動(dòng)畫開始之前的回調(diào)
// console.log("動(dòng)畫開始");
},
afterReveal: function () {
// 動(dòng)畫結(jié)束時(shí)放的回調(diào)
// console.log("動(dòng)畫結(jié)束");
},
beforeReset: function () {
// 動(dòng)畫開始被重置
// 什么是動(dòng)畫重置?
// 執(zhí)行動(dòng)畫的元素離開屏幕之后就會(huì)被重置
// 重置就是重新設(shè)置為動(dòng)畫開始之前的默認(rèn)樣式
console.log("動(dòng)畫開始被重置");
},
afterReset: function () {
// 動(dòng)畫重置結(jié)束
console.log("動(dòng)畫重置結(jié)束");
}
});
