IPhone11站点的滚动效果是如何构建的？

Question

站点- https://www.apple.com/iphone-11-pro/

我觉得这是一个如此简单的效果，但我似乎无法理解如何实现它。(我说的是元素相互层叠的方式)

我认为这是一些position:fixed/sticky的混合，但我看不出没有一堆height: ~100vh等是怎么可能的，我希望这不是他们网站上实现效果的方式……

我甚至不知道这个效果在google上的正确名称是什么。

如果任何人有任何我可以阅读的资源或视频可以观看，我将非常感谢。

谢谢。

Answer 1

我会对这两个对象使用position: absolute，并声明它们的z-index顺序，以根据预先显示的层显示。

每当你想把一个元素的额外像素放在其他元素后面或远离其他元素时，我也经常看到一种overflow:hidden样式。

​

#b1 {
  background-color:red;
  height:100px;
  width:100px;
  display:table;
  position: absolute;
  z-index:1;
}

#b2 {
  background-color:blue;
  height:100px;
  width:100px;
  display:table;
  position: absolute;
  left:50px;
  top:50px;
  z-index:2;
}

<div id="b1"></div>
<div id="b2"></div>

​

Answer 2

AOS是一个用于滚动动画的jquery库

一个用法示例

<div data-aos="fade-up"
     data-aos-duration="2000">
</div>

网站解释为你的卷轴。

一些不错的教程keithclark、codepen 、w3schools