这个网站是如何创建这样一个流畅的滚动来查看动画？

Question

这个Website如何实现如此美丽的滚动视图效果？我的意思是正确的滑动＆＃34;面具＆＃34;背景图片。

Answer 1

当可见时，似乎为clip或wrapper的宽度设置动画。 可能与Waypoints.js。

类似

https://github.com/imakewebthings/waypoints

顺利定制宽松和正确的时机。它们还在滚动条上使用parallax，使其更加平滑。

Verry（verry）verry quikcly：

<div class="wrapper">
  <img ...>
</div>

// CSS

.wrapper {
  width: 300px;
  height: 500px;
  overflow: hidden;
}

.wrapper.visible {
  width: 500px;
  transition: width 1s ease-out;
}

img {
  width: 500px;
  height: 500px;
}