原生JS實現隨著滑鼠滾動到元素位置觸發對應css3動畫，簡單易用滾動監測

来源:https://www.cnblogs.com/vanwee/archive/2019/01/21/10298954.html
-Advertisement-
Play Games

預覽鏈接：https://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ 使用方法： 在想要添加動畫的元素上添加class類名：vanwee 由於我只需要從下漸現向上移動的效果，所以從原博主轉載過來做了調整，大家有不明白的地方建議查看轉載來源博 ...


預覽鏈接：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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS-蜂窩狀展示區域（多個六邊形）的一種實現方式
    網上已經有很多關於正六邊形的CSS畫法，主要是利用一個矩形和前後的兩個三角形組合而成。 之前在看四維圖新的官網的時候，發現了一種六邊形的畫法，比較適合多排六邊形組合成蜂窩狀的展示區域（註：四維圖新現在改成了上面說的那種畫法了）。 示意圖： 1、HTML結構 每個li里包著.hex和.hexIn。.h ...
  • 前端加密傳輸 crypto-js AES 加密和解密
    配置： 配置： ...
  • Iframe 高度自適應
    實現 iframe 的自適應高度，能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象。 （需要只有iframe出現滾動條） 剛開始以為是很小的問題一直沒註意，但是經常頁面比較高的只能顯示一半，後來也在網上搜了很多解解辦法，一直沒真正解決，下麵是我在網上搜到的方法： 下麵是我 ...
  • ajax技術詳解
    今天來講一下ajax的有關知識點。 ajax概念 ajax全稱叫 Asynchronous JavaScript and XML ,意思是非同步的 JavaScript 和 XML。 ajax是現有標準的一種新方法，不是編程語言，可以在不刷新網頁的情況下，和伺服器交換數據並且更新部分頁面內容，不需要任 ...
  • vue關閉代碼檢查eslint
    confing/index.js 文件裡面的 useEslint 改成false就可以關閉代碼檢查了 不過為了代碼的規範性，不建議關閉！ ...
  • 批量引用iconfont字體圖標到項目
    打開https://www.iconfont.cn/網址登錄後選擇你需要的圖標添加到購物車中 點擊下載代碼或者添加到項目後再下載代碼，再找到之前下載的的文件，拷貝到項目中 ...
  • html前端優化建議
    1. css 儘可能的放到head裡面,且避免css表達式 【@media 類似】 2. js 儘可能的放到</body>之前 <script>do something</script></body></html> 3. 儘可能的減少圖片的使用，併在實際需要使用圖片的地方在css定義好img的尺寸。 ...
  • JavaScript基礎視頻教程總結（131-140章）
    所有基礎課程鏈接： 1.JavaScript基礎視頻教程總結（001-010章） 2.JavaScript基礎視頻教程總結（011-020章） 3. JavaScript基礎視頻教程總結（021-030章） 4. JavaScript基礎視頻教程總結（031-040章） 5. JavaScript基 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類