前言
这一次给大家带来一个动态数据滚动的效果。话不多说，大家直接看到下面的效果预览。
效果预览
以上就是最终的实现效果了，咱们接下来便一步一步来实现它。
HTML && JS
众所周知，因为有交互，因此JS是必不可少的，所以我们首先看到HTML和JS部分，这里是实现整个交互效果的基础。相关代码如下。
<section>
<h2>Scroll To Reveal</h2>
</section>
<div class="container"></div>
首先是HTML部分，创建了一个具有类名 container 的 <div> 元素，可以把它用作盛放动态生成的盒子的容器。
<script>
for (let i = 0; i <= 60; i++) {
const box = document.createElement("div");
box.classList.add("box");
document.querySelector(".container").appendChild(box);
}
const randomColorBlock = document.querySelectorAll(".box");
function addColor() {
randomColorBlock.forEach((e) => {
e.style.background = randomColor();
});
}
function randomColor() {
const chars = "1234567890abcdef",
colorLength = 6;
let color = "";
for (let i = 1; i <= colorLength; i++) {
const rondomColors = Math.floor(Math.random() * chars.length);
color += chars.substring(rondomColors, rondomColors + 1);
}
return "#" + color;
}
addColor();
const boxes = document.querySelectorAll(".box");
function scrollTrigger() {
boxes.forEach((boxxx) => {
if (boxxx.offsetTop < window.scrollY) {
boxxx.classList.add("active");
} else {
boxxx.classList.remove("active");
}
});
}
window.addEventListener("scroll", scrollTrigger);
</script>
接下来就是JS部分了，这里主要实现的效果是当用户滚动页面时，盒子元素逐个显示出来。
首先我们使用 for 循环生成60个具有类名 box 的 <div> 元素，并将它们添加到类名为 container 的容器中，并且获取了所有具有类名 box 的盒子元素，并将其存储在变量 randomColorBlock 中。
然后定义addColor() 函数通过循环遍历所有盒子元素，为每个盒子随机生成背景颜色。randomColor() 函数用于生成一个随机的颜色值，颜色格式为十六进制。在页面加载时，调用 addColor() 为每个盒子元素设置随机背景颜色。
接着使用document.querySelectorAll(".box") 选取所有具有类名 box 的盒子元素，并将它们存储在变量 boxes 中。通过scrollTrigger() 函数用于检测滚动事件，根据每个盒子在页面中的位置，判断是否滚动到盒子的位置，将相应盒子添加类名 active 以实现逐个显示的效果。
最后通过 window.addEventListener("scroll", scrollTrigger) 添加滚动事件监听器，当用户滚动页面时，会检测每个盒子元素的位置，根据滚动位置逐个显示或隐藏盒子元素，从而实现一个类似逐个出现的效果。
总体而言，以动态方式设置盒子的背景颜色，从而实现了页面滚动时逐个显示盒子元素的视觉效果。
CSS
有了交互的逻辑，然后就要给整个效果添砖加瓦了。相关代码如下。
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
section h2 {
......
}
.container {
position: relative;
top: -200px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 700px;
grid-gap: 30px;
}
.container .box {
......
}
.container .box:nth-child(3n + 1) {
transform: translate(-400px, 0) scale(0);
}
.container .box:nth-child(3n + 2) {
......
}
.container .box:nth-child(3n + 3) {
......
}
.container .box.active {
transform: translate(0, 0) scale(1);
}
首先我们看到页面整体结构的样式。<section> 元素被经典的三段代码设置为采用 Flex 布局，在垂直和水平方向上都居中显示，占据视口100% 的高度。<section> 内的 <h2> 标题设置相关样式，包括绝对定位、白色文字颜色、大字体、中等粗细。
接着看到盒子容器和元素样式。类名为 .container 的盒子容器设置了相对定位，向上移动了 200px，并且采用了Grid布局，划分成三列，每列之间有30px的间距。使用 nth-child 选择器来为每第3个盒子应用不同的移动效果并以初始状态（scale(0)）隐藏：
- 第一个盒子向左偏移并缩小。
- 第二个盒子向下偏移并缩小。
- 第三个盒子向右偏移并缩小。
最后在.box.active类上添加样式，当在某个盒子应用时，通过 transform 属性将其偏移复原并放大，以实现显示该盒子的动画效果。
总体来说，这些CSS实现了当用户滚动页面时，盒子元素会逐个以动画效果显示出来。
总结
以上就是整个效果的实现过程了，代码简单易懂，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
原文链接：https://juejin.cn/post/7350529104083337228 作者：一条会coding的Shark
