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-attachement不是fixed是故意的（因为它总是与封面相结合导致缩小查看图片。）

为了达到理想的视差，请使用此片段。

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

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

所以我的目标是保持图像位置center center，因为我希望始终能够看到图像的垂直和水平中心。

你知道如何告诉JS当前图像的垂直中心的任何技巧或想法，所以视差计算将从这一点开始，而不是从0开始。

谢谢，马特

Answer 1

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

背景位置的视差：中心没有跳跃

1 个答案: