Question

我试图用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吗？是否有相关的图书馆？

谢谢。

Answer 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>

滚动的CSS / JS动画，滚动锁定

1 个答案: