Question

我正在尝试创建一个包含2个div和2个图像的滚动动画。由于缺乏更好的解释（正如你可能从标题中猜到的那样），我已经a quick animation展示了我想要实现的目标。

here是我之前制作的托管版本。我尝试在视差滚动的帮助下创建效果，但这不是我想要的。这是Zeit Now部署，因此您可以将/_src附加到网址并查看源代码。

现在我不确定这是否是创建动画的正确方法，说实话我不会知道任何其他方法可以解决这个问题。所以我并没有要求一个没有任何缺陷的完全成熟的答案（虽然会非常感激），而是在正确的方向上轻推。

Answer 1

快速做到这一点可能存在一些问题，我试图让变量以某种方式变通用，这样你就可以玩弄东西（查看fiddle）

const body = document.body,
  html = document.documentElement;

const targetImg = document.querySelector('.second');
// our image's initial height
const imgHeight = targetImg.clientHeight;
// the final value for image height (at scroll end)
const imgTargetHeight = 0;
// total height of our document
const totalHeight = Math.max(body.scrollHeight, body.offsetHeight,
  html.clientHeight, html.scrollHeight, html.offsetHeight);
// visible window height
const windowHeight = window.innerHeight;
// starting scroll position we want to start calculations from (at this point and before, our image's height should equal its initial height 'imgHeight')
const fromScroll = 0;
// final scroll position (at this point and after, our image's height should equal 'imgTargetHeight')
const toScroll = totalHeight - windowHeight;

window.addEventListener('scroll', function() {
  // get current scroll position, these multiple ORs are just to account for browser inconsistencies.
  let scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;

  // force the scroll position value used in our calculation to be between 'fromScroll` and 'toScroll'
  // In this example this won't have any 
  // effect since fromScroll is 0 and toScroll is the final possible scroll position 'totalHeight - windowHeight',
  // but they don't have to be, try setting fromScroll = 100 and toScroll = totalHeight - windowHeight - 100  for example to see the difference.
  // the next line is just a shorthand for:
  // if (scrollPos <= fromScroll) {
  //   scrollPos = fromScroll;
  // } else if (scrollPos >= toScroll) {
  //   scrollPos = toScroll;
  // } else {
  //   scrollPos = scrollPos;
  // }
  scrollPos = scrollPos <= fromScroll ? fromScroll : (scrollPos >= toScroll ? toScroll : scrollPos);

  // our main calculation, how much should we add to the initial image height at our current scroll position.
  const value = (imgTargetHeight - imgHeight) * (scrollPos - fromScroll) / (toScroll - fromScroll);

  targetImg.style.height = imgHeight + value + "px";
});

.container {
  height: 200vh;
}

.img-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background: white;
  overflow: hidden;
}

.second {
  background: tomato;
}

img {
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="img-container first">
    <img src="https://fixedscrollingtest-takidbrplw.now.sh/luigi.png" alt="">
  </div>
  <div class="img-container second">
    <img src="https://fixedscrollingtest-takidbrplw.now.sh/mario.png" alt="">

  </div>
</div>

2个div与固定图像响应滚动

1 个答案: