前言
继上次实现过一些视差效果后，这次又有 一个全新的视差效果带给大家来看看，CSS加上JS来实现，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
HTML部分
首先看到HTML部分。相关代码如下。
<div class="parallax-container">
<div class="sticky-container">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3">
<h1 class="title">滚动屏幕</h1>
</div>
</div>
</div>
这里创建了一个视差滚动(Parallax Scrolling) 效果的基本HTML结构，分别有外层容器.parallax-container，作为整个视差效果的包裹容器，以及粘性容器 .sticky-container，和视差层 .layer。
这里介绍一下视差效果实现原理。通过滚动监听页面滚动事件，然后根据分层位移，根据滚动位置计算各层不同的translateY值，最后产生速度差异，上层移动比例大（如50%），下层移动比例小（如10%），产生深度错觉。
JS部分
接下来我们来看这个效果的核心部分-JS控制视差。相关代码如下。
<script>
function updateParallax() {
const container = document.querySelector('.parallax-container');
const height = container.offsetHeight - window.innerHeight;
const scrolled = window.scrollY;
const percent = scrolled / height;
document.documentElement.style.setProperty('--ty-1', `${percent * 50}%`);
document.documentElement.style.setProperty('--ty-2', `${percent * 30}%`);
document.documentElement.style.setProperty('--ty-3', `${percent * 10}%`);
}
window.addEventListener('scroll', updateParallax);
updateParallax();
</script>
这里实现了视差滚动效果的核心逻辑，通过控制不同图层的移动速度差异以及监听页面滚动事件并动态调整不同图层的位移，创造出具有深度感的滚动效果。
在 updateParallax() 函数里，首先计算可滚动范围，container.offsetHeight是整个视差容器的高度（如300vh），window.innerHeight是当前视口高度，height是实际可滚动的最大距离（容器总高 - 视口高度）。
接着计算滚动百分比，scrolled是当前已滚动的像素值（window.scrollY），percent：滚动进度比例（0到1之间）。
然后通过分层位移控制，修改CSS变量（--ty-1等）控制不同图层的垂直位移
底层（layer-1）：`50%`（移动最快，营造远景效果）
中层（layer-2）：`30%`
上层（layer-3）：`10%`（移动最慢，前景内容）
这其中的关键技术点就是CSS变量驱动。通过JS动态修改:root上的CSS变量值。
.layer-1 { transform: translateY(var(--ty-1)); }
CSS部分
紧接着看到CSS部分，这里是类名为parallax-container，sticky-container的CSS部分，相关代码如下。
.parallax-container {
height: 300vh;
background: #000;
position: relative;
}
.sticky-container {
height: 100vh;
position: sticky;
top: 0;
overflow: hidden;
}
.parallax-container是视差外层容器，用于创造滚动空间和视觉基础。.sticky-container是视差粘性层，position: sticky + top: 0使容器在滚动时始终"粘"在视口顶部，用户滚动时，该容器表现为"固定不动"的视觉状态。
所以整体的工作流程： 用户滚动.parallax-container（300vh高度产生滚动条），
.sticky-container因sticky定位始终显示在视口内，通过JS监听滚动，控制各图层的transform位移，最后不同移动速度的图层产生视觉深度差（视差效果）。
对于视差效果来说，位移百分比差异越大，景深效果越强烈，背景层建议使用半透明色（rgba）增强层次感。
总结
以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
