一、基本概述
在現在的網站前端網頁設計中為了讓訪問者對網站留下印象同時也為了整個網站更加生動、鮮明、活潑，經常在網頁中使用動畫技術尤其是元素加載到可視區域時便為元素立即應用動畫。
在設計中一般可以使用 animate.css 結合 wow.js 來實元素滾動到可視區域時加載動畫效果，但是在有些網站尤其是在外貿網站中加載這兩個文件會增加請求鏈接的次數以及請求的總大小今兒拖慢網頁的加載速度，該項在使用谷歌官方速度測試時尤為明顯。
不過我們也可以使用 CSS3 原生動畫結合 jQuery 來解決此問題。
二、基本原理
三、代碼實現
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滾動動畫</title> </head> <style type="text/css"> /* 設置網頁的整體高度以便滾動 */ body { height: 2000px; } /* 設置滾動元素容器的位置 */ #elements-container { margin: 800px auto 0px auto; width: auto; height: auto; } /* 設置要滾動的元素的基本樣式方便觀察 */ #elements-container ul li { display: inline-block; margin-bottom: 18px; width: 150px; height: 150px; line-height: 150px; text-align: center; color: red; border: 1px solid red; } /* 設置進入的動畫樣式 */ @keyframes animation-down { from { opacity: 0; transition: all 1s ease 0s, opacity 1.5s ease 0s; transform: translateY(-40px); } to { opacity: 1; transition: all 1s ease 0s, opacity 1.5s ease 0s; } } .my-an-down { animation: animation-down 2s 1; } </style> <body> <div class="container"> <div id="elements-container"> <ul> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> </ul> <ul> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> </ul> <ul> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> <li> 這是一個元素 </li> </ul> </div> </div> <script src="./libs/jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript"> // 設置基本變量 var windowScrollTop = $(window).scrollTop(); var windowViewHeight = $(window).height(); var elementArray = $('#elements-container ul li'); // 響應縮放事件 $(window).resize(function() { windowViewHeight = $(window).height(); }); // 響應滾動事件 $(window).scroll(function() { windowScrollTop = $(window).scrollTop(); if (windowScrollTop != undefined && windowScrollTop != null && windowViewHeight != undefined && windowViewHeight != null && elementArray != undefined && elementArray != null) { elementArray.each(function(index) { if (elementArray.eq(index).offset().top >= windowScrollTop && elementArray.eq(index).offset().top <= windowScrollTop + windowViewHeight) { elementArray.eq(index).addClass('my-an-down'); } else { elementArray.eq(index).removeClass('my-an-down'); } }); } }); </script> </body> </html>
四、效果展示
