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

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

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

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>

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

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

Answer 2

我知道这有点旧，但我只是想抛出一种我过去使用过的替代方法。这是 100% 香草 javascript。需要注意的一件事：您需要在函数内部单独调用 init，这样您就不会得到 ju

let parallax = (id, rate) => {
  const parallaxObject = document.querySelector(id);
  const init = () => {
    const x = parallaxObject.getBoundingClientRect().top / rate;
    const y = Math.round(x * 100 / 100);
    parallaxObject.style.backgroundPosition = 'center ' + y + 'px';
  }
  init();
  window.addEventListener('scroll', () => {
    init();
  })
}



parallax('.hero', 5)

.hero {
  background: #fff url('https://source.unsplash.com/random') no-repeat fixed center center / cover;
  margin-top: 1000px;
  margin-bottom: 1000px;
  min-height: 75vh;
  display: grid;
  place-items: center;
}

<div class="hero">
  <h1>Hero Text</h1>
  <div>
  
  
  // Scroll Down To See Effect

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

Parallax with background-position: center center without jump

javascript

css

jquery

parallax