Web开发者在页面滚动时提供简单而优雅的动画效果的插件库

1、动画插件库scrollrevealjs

官网连接: https://scrollrevealjs.org/api/view-offset.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ScrollReveal Demo</title><!-- 引入 ScrollReveal 库 --><script src="https://unpkg.com/scrollreveal"></script><style>/* CSS 样式用于隐藏初始状态下的内容 */.reveal {opacity: 0;transform: translateY(20px); /* 或者其他隐藏方式，例如 translateY(-20px) */transition: opacity 0.6s ease, transform 0.6s ease;}.box {height: 1000px;}html.sr .widget {/* visibility: hidden; */}li {height: 500px;background-color: pink;margin: 50px;}.widget-list1 > li {display: inline-block;width: 200px;height: 30px;margin: 10px;background-color: black;}</style></head><body><div class="container"><h1>Welcome to ScrollReveal Demo</h1><p class="reveal">This content will be revealed when you scroll down.</p></div><ul class="widget-list"><li><ul class="widget-list1"><li class="widget">1</li><li class="widget">2</li><li class="widget">3</li><li class="widget">4</li><li class="widget">5</li></ul></li><li><ul class="widget-list1"><li class="widget">1</li><li class="widget">2</li><li class="widget">3</li><li class="widget">4</li><li class="widget">5</li></ul></li><li><ul class="widget-list1"><li class="widget">1</li><li class="widget">2</li><li class="widget">3</li><li class="widget">4</li><li class="widget">5</li></ul></li><li><ul class="widget-list1"><li class="widget">1</li><li class="widget">2</li><li class="widget">3</li><li class="widget">4</li><li class="widget">5</li></ul></li><li><ul class="widget-list1"><li class="widget">1</li><li class="widget">2</li><li class="widget">3</li><li class="widget">4</li><li class="widget">5</li></ul></li></ul><div class="box">aa</div><!-- 初始化 ScrollReveal --><script>// 创建一个新的 ScrollReveal 实例const sr = ScrollReveal({distance: "100px", // 元素移动的距离duration: 800, // 动画持续时间delay: 200, // 延迟时间origin: "bottom", // 动画起始位置easing: "ease", // 缓动函数distance: "100px",//reset: true, // 每次元素显示时都重置动画});// 应用 ScrollReveal 动画效果到 .move 元素sr.reveal(".widget");</script></body>
</html>