滚动缩放

Question

我有一个水平滚动，而同时滚动，我想上下缩放图像以获得一些效果。

因此，使用此滚动条：

<div class="scroller" id="scroller">
    <div class="galleryPhoto">
        <div class="Photo" id="Photo1" style="background-image: url(https://picsum.photos/700/1200);"></div>
    </div>

    <div class="galleryPhoto">
        <div class="Photo" id="" style="background-image: url(https://picsum.photos/800/1200);"></div>
    </div>
</div>

我收到此回调，但是不管我放多少，它都不会扩展。

$("#scroller").on("scroll", function (e) {
    let horizontal = e.currentTarget.scrollLeft;
    let vertical = e.currentTarget.scrollTop;
    var box = document.getElementById('Photo1');

    var x = screen.width;

    console.log(1 - (horizontal / x));
    box.scale = (1.5, 1.5);
});

Answer 1

您可以使用parallax效果。有一些滚动选项可以使用。