我正在尝试使用 HTML、CSS 和 javascript(如果需要，也可以使用 jQuery)重现这种动画。 https://www.youtube.com/watch?v=qTMjNVTK_DY
基本上，有多个带有内容和透明区域的 svg 或 png 层。向下滚动时，通过为 transform:translateZ rotate; 属性设置动画，层看起来更近。
层与层之间，有名字。
这是我想象中的 HTML 的样子
<body>
<div class="layer"></div>
<div class="name"></div>
<div class="name"></div>
<div class="layer"></div>
<div class="name"></div>
<div class="name"></div>
<div class="layer"></div>
</body>
如何在窗口不实际滚动的情况下为滚动的元素设置动画？我绝对需要 javascript 吗？是否有相关的图书馆？
谢谢。
最佳答案
我已尽量简化示例，希望对您有所帮助!
<style>
#wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 500px;
}
#content {
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#layer1,
#layer2,
#layer3,
#layer4 {
width: 500px;
height: 500px;
border: 30px solid red;
position: absolute;
left: 50%;
top: 50%;
}
#layer1 {
transform: translate3d(-50%, -50%, 0);
}
#layer2 {
border-color: green;
transform: translate3d(-50%, -50%, -300px);
}
#layer3 {
border-color: blue;
transform: translate3d(-50%, -50%, -600px);
}
#layer4 {
border-color: black;
transform: translate3d(-50%, -50%, -900px);
}
</style>
<div id="wrapper">
<div id="content">
<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>
<div id="layer4"></div>
</div>
</div>
<script>
let z = 0;
window.addEventListener("wheel", function (event) {
z += event.deltaY;
content.style.transform = "translate3d(0, 0, " + z + "px)";
event.preventDefault();
});
</script>
关于javascript - 滚动锁定时滚动的 CSS/JS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46872592/