Question

我一直在使用HTML，CSS和jQuery，但我不知道如何在此网站上实现视差功能：http://quinntonharris.strikingly.com/

每个幻灯片设法无缝地“覆盖”上一张幻灯片，同时又可以被下一张幻灯片所遮盖，而所有幻灯片都以相对相同的速度相对移动。

我尝试仅通过创建不同的图层来单独在CSS中执行此操作，但是幻灯片不会以相同的速度移动。我也看过类似的示例：https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/，但它们不能模拟相同的效果。

使用香草CSS或jQuery /其他JS库模拟这种效果的基本概念是什么？

Answer 1

我们将滚动一系列overflow: hidden div（称为“ parallaxParents”）。滚动会导致这些“ parallaxParents”的子代（“ parallaxChildren”）以与滚动相反的方向进行动画处理。

当parallaxParents占据其滚动视口的全部大小时，此技术特别有用。

let initialChildMarginTop = -125; // parallaxChild's margin-top

let scroller = document.getElementsByClassName('scroller')[0];
let doParallax = () => {
  
  // An Array of all parallaxParents
  let pars = Array.from(scroller.getElementsByClassName('parallaxParent'));
  
  // The height of a parallaxParent
  let parHeight = pars[0].getBoundingClientRect().height;
  pars.forEach((par, ind) => {
    
    // Get the parallaxChild...
    let child = par.getElementsByClassName('parallaxChild')[0];
    
    // Represents how close `par` is to the center of the scroller viewport
    // 0 means centered; < 0 is above, > 0 is below
    let focusedAmt = (ind * parHeight) - scroller.scrollTop;
    
    // Shift each child by a fraction of `focusedAmt`
    // Children exactly in the middle of the viewport will be unchanged
    child.style.marginTop = `${initialChildMarginTop - Math.round(focusedAmt * 0.5)}px`;
    
  });
  
};

// May need to add the event listener in more places
scroller.addEventListener('scroll', doParallax);
window.addEventListener('resize', doParallax);

// Make sure everything is initially translated correctly
doParallax();

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  padding: 0;
}

.scroller {
  width: 100%; height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 0;
}
.parallaxParent {
  position: relative;
  overflow: hidden;
  width: 100%; height: 100%;
}
.parallaxParent:nth-child(2n) { background-color: rgba(100, 100, 0, 0.2); }
.parallaxParent:nth-child(2n + 1) { background-color: rgba(0, 0, 100, 0.2); }
.parallaxChild {
  position: absolute;
  width: 250px; height: 250px;
  left: 50%; top: 50%; margin-left: -125px; margin-top: -125px;
  transform: rotate(45deg);
  background-color: rgba(0, 150, 100, 0.4);
}

<div class="scroller">
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>https://stackoverflow.com/questions/54775562/how-to-implement-continuous-parallax-like-this#
  <div class="parallaxParent">
    <div class="parallaxChild"></div>
  </div>
</div>

如何实现这样的连续视差？

1 个答案: