javascript - 当元素位于视口(viewport)中时开始视差

Question

我正在开发一个对多个元素(文本、图像等)具有视差效果的网站。当元素位于视口(viewport)底部时，我需要启动视差效果。

在这种情况下，元素距页面顶部 3000px，当元素位于视口(viewport)中时，我想将 window.pageYOffset 重置为零(或类似的值)，这样效果才有意义。

这段代码可以工作，但效果不好，当我更改分隔符高度时，视差效果的开始位置不同。您可以尝试将css中的分隔符高度更改为500px和5000px。

有什么更好的解决方案吗？

谢谢

这是 fiddle :https://jsfiddle.net/you8c6d7/

function parallax(element, delay) {
  var start = document.querySelector(element).getBoundingClientRect().top;
  var px = window.pageYOffset - (start * 2 + window.innerHeight);
  var elClass = document.querySelector(element);

  elClass.style.transform = 'translateY(' + '-' + px / delay + 'px' + ')';
};

window.addEventListener('scroll', function() {
  parallax('.box', 5);
});

body {
  height: 6000px;
  margin 0;
}

.box {
  background: blue;
  width: 300px;
  height: 300px;
}

.separator {
  height: 500px;
  background: grey;
}

<div class="separator"></div>
<div class="box"></div>

Answer 1

这是使用Intersection Observer API的片段.

我用了the experimental feature "IntersectionObserver.thresholds" ，因此是 not supported by IE .

取决于您的target audience ，您可能需要使用 polyfill .

该脚本观察目标框是否与视口(viewport)相交，并根据框/视口(viewport)的比例进行变换。有关更多详细信息，请参阅代码内的注释和 JSDoc。

/**
 * Creates an IntersectionObserver and starts observing all elements found using the selector.
 *
 * @param {String} selector: Selector used to find all target elements
 * @param {Number[]} threshold: Array of intersection ratios, at which the callback is executed
 * @param {Function} callback: Callback executed for each threshold
 */
function observe(selector, threshold, callback) {
  const elements = document.querySelectorAll(selector);
  const options = {
    rootMargin: '0px',
    threshold: threshold,
  };

  const observer = new IntersectionObserver(callback, options);

  for (const element of elements) {
    observer.observe(element);
  }
}

/**
 * Creates a CSS translateY value.
 *
 * @param {Number} ratio: A number between 0 and 1
 * @param {String} total: A valid CSS number and unit (10px, 100%, 30vh, …)
 * @return {String} The CSS translateY value.
 */
function translateY(ratio, total) {
  return `translateY(calc(-${ratio} * ${total})`;
}

/**
 * Callback executed for the box elements
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 *
 * @param {IntersectionObserverEntry[]} entries: Intersection Observer Entries
 * @param {IntersectionObserver} observer: Intersection Observer
 */
function boxParallax(entries, observer) {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.style.transform = translateY(entry.intersectionRatio, '20%');
    }
  }
}

/**
 * Create one threshold for each intersection ratio.
 *
 * @return {Number[]}
 */
function createThreshold() {
  const threshold = [];
  for (let i = 0; i <= 1.0; i += 0.01) {
    threshold.push(i);
  }

  return threshold;
}

const threshold = createThreshold();
observe('.box', threshold, boxParallax);

body {
  height: 6000px;
  margin 0;
}

.box {
  background: blue;
  width: 300px;
  height: 300px;
}

.separator {
  height: 500px;
  background: grey;
}

<div class="separator"></div>
<div class="box"></div>