少囉嗦直接上效果！！
再少囉嗦，直接上代碼：
注意：代碼中引用的animate.css，可以去官網下載
https://daneden.github.io/animate.css/
或者再懶一點，直接中這個代替那一行
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 替換如下這一行 -->
<link rel="stylesheet" type="text/css" href="./animate.css" />
<title>Document</title>
<style>
body {
overflow-x: hidden;
}
div {
width: 100px;
height: 100px;
margin: 100px auto 0;
background: red;
}
</style>
<script>
// 獲取瀏覽器可見區域高度
var window_height = document.documentElement.clientHeight;
console.log(window_height)
// 用戶手動修改瀏覽器可見區域高度時修改變量
window.onresize = function () {
window_height = document.documentElement.clientHeight;
console.log(window_height)
};
// 獲取所需效果元素
var My_dream = document.getElementsByClassName('dream');
// 鼠標滾輪滾動執行方法
window.onscroll = function () {
// 獲取鼠標滾輪滾動距離
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// console.log('screenTop',window.screenTop)
// console.log('offsetHeight:',document.body.offsetHeight)
// console.log('scrollHeight:',document.body.scrollHeight)
// 循環類dream
for (var k = 0; k < My_dream.length; k++) {
console.log(k,':','_scrollTop大於：', getOffsetTop(My_dream[k]) - window_height)
console.log(k,':','scrollTop', _scrollTop)
console.log(k,':','_scrollTop小於：', getOffsetTop(My_dream[k]))
if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
}
}
};
// 判斷元素父集是否有已定位元素
function getOffsetTop(ele) {
var rtn = ele.offsetTop;
var o = ele.offsetParent;
while (o != null) {
rtn += o.offsetTop;
o = o.offsetParent;
}
return rtn;
}
// 滾動條等於0時執行第一屏效果
function my_animation() {
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 效果方法
for (var k = 0; k < My_dream.length; k++) {
if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
}
}
}
my_animation();
</script>
</head>
<body>
<div class="dream" data-animate="bounceInUp,1s,linear" data-hello="hello">1</div>
<div class="dream" data-animate="flash,2s,linear">2</div>
<div class="dream" data-animate="pulse,1s,linear">3</div>
<div class="dream" data-animate="rubberBand,1s,linear">4</div>
<div class="dream" data-animate="shake,1s,linear">5</div>
<div class="dream" data-animate="swing,1s,linear">6</div>
<div class="dream" data-animate="tade,1s,linear">7</div>
<div class="dream" data-animate="wobble,1s,linear">8</div>
<div class="dream" data-animate="jello,1s,linear">9</div>
<div class="dream" data-animate="bounceIn,1s,linear">10</div>
<div class="dream" data-animate="bounceInDown,1s,linear">11</div>
<div class="dream" data-animate="bounceInLeft,1s,linear">12</div>
<div class="dream" data-animate="bounceInRight,1s,linear">13</div>
<div class="dream" data-animate="bounceInUp,1s,linear">14</div>
<div class="dream" data-animate="bounceOut,1s,linear">15</div>
<div class="dream" data-animate="bounceOutDown,1s,linear">16</div>
<div class="dream" data-animate="bounceOutLeft,1s,linear">17</div>
<div class="dream" data-animate="bounceOutRight,1s,linear">18</div>
<div class="dream" data-animate="bounceOutUp,1s,linear">19</div>
<div class="dream" data-animate="fadeIn,1s,linear">20</div>
<div class="dream" data-animate="fadeInDown,1s,linear">21</div>
<div class="dream" data-animate="fadeInLeft,1s,linear">22</div>
<div class="dream" data-animate="fadeInRight,1s,linear">23</div>
<div class="dream" data-animate="fadeInUp,10s,linear">24</div>
<div class="dream" data-animate="fadeInDownBig,1s,linear">25</div>
<div class="dream" data-animate="fadeInLeftBig,1s,linear">26</div>
<div class="dream" data-animate="fadeInRightBig,1s,linear">27</div>
<div class="dream" data-animate="fadeInUpBig,1s,linear">28</div>
<div class="dream" data-animate="flip,1s,linear">29</div>
<div class="dream" data-animate="hinge,1s,linear">30</div>
</body>
</html>