預覽連結：http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/
1 <style> 2 body{overflow-x: hidden;width:80%;margin:auto;} 3 body:after { 4 content: "."; 5 clear: both; 6 display: block; 7 } 8 div{width:32%;height: 20vw;background: #e3e4e5;margin-right:2%;box-sizing: content-box;margin-top:1.6vw;float:left;} 9 div:nth-of-type(3n+3) { 10 margin-right: 0; 11 } 12 @keyframes f-up { 13 0% { 14 will-change: transform;/*優化動畫卡頓1*/ 15 /*position:relative;優化動畫卡頓2*/ 16 /*z-index: 1;優化動畫卡頓2*/ 17 opacity: 0; /*初始狀態 透明度為0*/ 18 transform:translateY(100px);/*初始狀態 文件流下100px*/ 19 } 20 100% { 21 opacity: 1; /*結尾狀態 透明度為1*/ 22 transform:translateY(0px);/*初始狀態 恢復正常位置*/ 23 } 24 } 25 .f-up{ 26 animation-name: f-up; /*動畫名稱*/ 27 animation-duration: 0.8s; /*動畫持續時間*/ 28 animation-iteration-count: 1; /*動畫次數*/ 29 animation-delay: 0s; /*延遲時間*/ 30 } 31 </style>
1 <body> 2 <div class="vanwee"></div> 3 <div class="vanwee"></div> 4 <div class="vanwee"></div> 5 <div class="vanwee"></div> 6 <div class="vanwee"></div> 7 <div class="vanwee"></div> 8 <div class="vanwee"></div> 9 <div class="vanwee"></div> 10 <div class="vanwee"></div> 11 <div class="vanwee"></div> 12 <div class="vanwee"></div> 13 <div class="vanwee"></div> 14 <div class="vanwee"></div> 15 <div class="vanwee"></div> 16 <div class="vanwee"></div> 17 <div class="vanwee"></div> 18 <div class="vanwee"></div> 19 <div class="vanwee"></div> 20 <div class="vanwee"></div> 21 <div class="vanwee"></div> 22 <div class="vanwee"></div> 23 <div class="vanwee"></div> 24 <div class="vanwee"></div> 25 <div class="vanwee"></div> 26 <div class="vanwee"></div> 27 <div class="vanwee"></div> 28 <div class="vanwee"></div> 29 <div class="vanwee"></div> 30 <div class="vanwee"></div> 31 <div class="vanwee"></div> 32 <div class="vanwee"></div> 33 <div class="vanwee"></div> 34 <div class="vanwee"></div> 35 <div class="vanwee"></div> 36 <div class="vanwee"></div> 37 <div class="vanwee"></div> 38 <div class="vanwee"></div> 39 <div class="vanwee"></div> 40 <div class="vanwee"></div> 41 <div class="vanwee"></div> 42 <script charset="utf-8" src="//blog-static.cnblogs.com/files/vanwee/fade.js"></script> 43 </body>
1 <script> 2 // 獲取瀏覽器可見區域高度 3 var window_height= document.documentElement.clientHeight; 4 // 使用者手動修改瀏覽器可見區域高度時修改變數 5 window.onresize=function () {window_height=document.documentElement.clientHeight;}; 6 // 獲取所需效果元素 7 var My_vanwee=document.getElementsByClassName(`vanwee`); 8 // 滑鼠滾輪滾動執行方法 9 window.onscroll = function(){ 10 // 獲取滑鼠滾輪滾動距離 11 var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 12 // 迴圈類vanwee 13 for (var k=0;k<My_vanwee.length;k++){ 14 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop >= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){ 15 My_vanwee[k].classList.add("f-up"); 16 } 17 } 18 }; 19 // 判斷元素父集是否有已定位元素 20 function getOffsetTop(ele) { 21 var rtn = ele.offsetTop; 22 var o = ele.offsetParent; 23 while(o!=null) { 24 rtn += o.offsetTop; 25 o = o.offsetParent; 26 } 27 return rtn; 28 } 29 // 滾動條等於0時執行第一屏效果 30 function my_animation() { 31 var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 32 // 效果方法 33 for (var k=0;k<My_vanwee.length;k++) { 34 if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop>= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){ 35 My_vanwee[k].classList.add("f-up"); 36 } 37 } 38 } 39 my_animation(); 40 </script>
使用方法：
在想要新增動畫的元素上新增class類名：vanwee
由於我只需要從下漸現向上移動的效果，所以從原博主轉載過來做了調整，大家有不明白的地方建議檢視轉載來源博主的詳細解說，或者檢視本博文最下方的原文複製內容。測試只相容IE10及以上版本，應該是JS第14行.contains的原因。我魅族手機瀏覽器豎著看的時候有點閃爍，其他手機和電腦裝置均正常。歡迎大佬看到支援。。
JS檔案：https://blog-static.cnblogs.com/files/vanwee/fade.js
轉載來源：https://blog.csdn.net/likeyou1207/article/details/80782935
原博文內容：
廢話不多說，直接上程式碼，附用法，純博主手寫，看完後，覺得好左上角請點個贊,覺得不好的請留下您的建議，謝謝（此程式碼改版很方便，大家可以任意發揮）
（注意：如果不想自己寫動畫的，可以引入Animate.css 相信這個動畫庫大家都不陌生）
1 body{overflow-x: hidden;} 2 div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}
1 <body> 2 <div class="dream" data-animate="bounceInUp,1s,linear"></div> 3 <div class="dream" data-animate="flash,2s,linear"></div> 4 <div class="dream" data-animate="pulse,1s,linear"></div> 5 <div class="dream" data-animate="rubberBand,1s,linear"></div> 6 <div class="dream" data-animate="shake,1s,linear"></div> 7 <div class="dream" data-animate="swing,1s,linear"></div> 8 <div class="dream" data-animate="tade,1s,linear"></div> 9 <div class="dream" data-animate="wobble,1s,linear"></div> 10 <div class="dream" data-animate="jello,1s,linear"></div> 11 <div class="dream" data-animate="bounceIn,1s,linear"></div> 12 <div class="dream" data-animate="bounceInDown,1s,linear"></div> 13 <div class="dream" data-animate="bounceInLeft,1s,linear"></div> 14 <div class="dream" data-animate="bounceInRight,1s,linear"></div> 15 <div class="dream" data-animate="bounceInUp,1s,linear"></div> 16 <div class="dream" data-animate="bounceOut,1s,linear"></div> 17 <div class="dream" data-animate="bounceOutDown,1s,linear"></div> 18 <div class="dream" data-animate="bounceOutLeft,1s,linear"></div> 19 <div class="dream" data-animate="bounceOutRight,1s,linear"></div> 20 <div class="dream" data-animate="bounceOutUp,1s,linear"></div> 21 <div class="dream" data-animate="fadeIn,1s,linear"></div> 22 <div class="dream" data-animate="fadeInDown,1s,linear"></div> 23 <div class="dream" data-animate="fadeInLeft,1s,linear"></div> 24 <div class="dream" data-animate="fadeInRight,1s,linear"></div> 25 <div class="dream" data-animate="fadeInUp,1s,linear"></div> 26 <div class="dream" data-animate="fadeInDownBig,1s,linear"></div> 27 <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div> 28 <div class="dream" data-animate="fadeInRightBig,1s,linear"></div> 29 <div class="dream" data-animate="fadeInUpBig,1s,linear"></div> 30 <div class="dream" data-animate="flip,1s,linear"></div> 31 <div class="dream" data-animate="hinge,1s,linear"></div> 32 </body>
1 <script> 2 // 獲取瀏覽器可見區域高度 3 var window_height= document.documentElement.clientHeight; 4 // 使用者手動修改瀏覽器可見區域高度時修改變數 5 window.onresize=function () { 6 window_height=document.documentElement.clientHeight; 7 }; 8 // 獲取所需效果元素 9 var My_dream=document.getElementsByClassName(`dream`); 10 // 滑鼠滾輪滾動執行方法 11 window.onscroll = function(){ 12 // 獲取滑鼠滾輪滾動距離 13 var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 14 15 // 迴圈類dream 16 for (var k=0;k<My_dream.length;k++){ 17 if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){ 18 My_dream[k].style.animationName=My_dream[k].dataset.animate.split(`,`)[0]; 19 My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(`,`)[1]; 20 My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(`,`)[2]; 21 } 22 } 23 }; 24 25 // 判斷元素父集是否有已定位元素 26 function getOffsetTop(ele) { 27 var rtn = ele.offsetTop; 28 var o = ele.offsetParent; 29 while(o!=null) 30 { 31 rtn += o.offsetTop; 32 o = o.offsetParent; 33 } 34 return rtn; 35 } 36 37 // 滾動條等於0時執行第一屏效果 38 function my_animation() { 39 var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 40 // 效果方法 41 for (var k=0;k<My_dream.length;k++){ 42 if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){ 43 My_dream[k].style.animationName=My_dream[k].dataset.animate.split(`,`)[0]; 44 My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(`,`)[1]; 45 My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(`,`)[2]; 46 } 47 } 48 } 49 my_animation(); 50 </script>
用法很簡單：
1)注意：沒有自己寫動畫效果時，記得引入animate.css動畫庫
2)在想要新增動畫的元素上新增class類名 dream
3)然後新增自定義屬性 （ data-animate=”動畫名稱,動畫時間,動畫速率” ），注意中間有 “,”號隔開
4)加上後檢視效果即可，使用前可以先複製博主程式碼檢視下效果
（您的評價是對博主最大的鼓勵，歡迎評價，覺得好左上角請點個贊，覺得不好的請留下您的建議，謝謝 (*￣︶￣) ）
如果您還是覺得很模糊的，請留下您的聯絡方式，博主會在一天內給您回覆
———————
作者：likeYou1207
來源：CSDN
原文：https://blog.csdn.net/likeyou1207/article/details/80782935
版權宣告：本文為博主原創文章，轉載請附上博文連結！