使用 jQuery 以及 CSS 原生实现元素滚动到可视区域加载动画
一、基本概述
在现在的网站前端网页设计中为了让访问者对网站留下印象同时也为了整个网站更加生动、鲜明、活泼，经常在网页中使用动画技术尤其是元素加载到可视区域时便为元素立即应用动画。
在设计中一般可以使用 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>
四、效果展示
