滚动锁定的 CSS/JS 动画答案

【问题标题】：CSS/JS animation on scroll with scroll locked滚动锁定的 CSS/JS 动画
【发布时间】：2017-10-22 18:12:03
【问题描述】：

我正在尝试使用 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 吗？有没有相关的图书馆？

谢谢。

【问题讨论】：

可能值得看看GreenSock
@Flying 确实看起来很有趣。谢谢！

标签： javascript jquery html css svg

【解决方案1】：

我已经尽量简化示例，希望对您有所帮助！

<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 轻松限制 z 值的最大值和最小值。请认为我给你的答案可能超出了stackoverflow的范围，但我这样做是希望你可以在视觉部分开始使用它，但它无论如何都没有完成。这将需要更多的工作，如果您需要 Javascript 部分的帮助，请考虑专业帮助。
是的，我知道，非常感谢！我会很好地管理 javascript 部分，这是我没有真正掌握的概念；）再次感谢您的帮助！
很高兴看到最终结果，请分享！
好主意，我会在完成后用最终结果编辑我的帖子！