javascript - 背景位置为 : center center without jump 的视差

Question

尝试了几十种方法后，我自己也想不出解决方案

#banner .slide {
    position: static;
    top: 0px;
    left: 0px;
    z-index: 99;
    opacity: 1;
    display: block;
    visibility: hidden;
    background-image: url(http://wp-content/uploads/2260-000-01.jpg);
}


#banner .slide {
    background-attachment: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

如您所见，背景图像位于 center center 并且 background-attachment 不是 fixed 是有意的(如它总是与封面相结合，导致图像的视野变窄。)

为了获得所需的视差，我使用了这个片段。

$(window).on('scroll', function(e) {
        $('#banner .slide').css('background-position', 'center ' + $(window).scrollTop()*0.4 + 'px')
    })

我遇到的问题当然是初始滚动(scrollTop 中的第一个更改)导致图像跳转，因为 JS 当然不知道 center 对我意味着什么。

所以我的目标是将图像位置保持在 center center 上，因为我希望始终看到图像的垂直和水平 cenver。

你知道我如何告诉 JS 图像当前的垂直中心的任何技巧或想法，因此视差计算将从该点开始而不是从 0 开始吗​​。

谢谢，马特

Answer 1

我建议采用稍微不同的方法，改为更改幻灯片的转换值。

const parallaxables = document.querySelectorAll('.parallax');

function runParallaxLoop() {
    requestAnimationFrame(runParallaxLoop);
    parallax();
}

function parallax() {
    parallaxables.forEach(parallaxable => {
        let distance = window.scrollY * 0.5;
        parallaxable.style.transform = `translate3d(0,-${distance}px, 0)`;
    });
}

runParallaxLoop();

.parallax {
    width: 100vw;
    height: 500px;
    margin-bottom: 400px;
    background: url(http://lorempixel.com/1200/800/sports/) no-repeat center center;
    background-attachment: fixed;
}

<div class="parallax"></div>

每一帧，您都会将需要视差的元素转换为浏览器滚动速度的特定百分比。

为此，您需要固定视差元素的背景附件。