移动端特效问题

Question

https://www.apple.com/cn/ios/...

苹果官网在手机端观看的滑动特效问题。

在f12的时候，发现各个<session>标签的z-index属性为从大到小排列，但是没有什么思路，希望各位大佬给一点思路或者一些网站资料。自己没有搜到这一部分，麻烦各位了，谢谢

Answer 1

你可以找找视差滚动方面的例子，也可以用一些插件来辅助完成

Answer 2

之前有弄过一个网站

.box {
    width: 800px;
    height: 1200px;
    background-image: url(./a.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

关键是这个background-attachment: fixed 属性，这是设置固定的背景图像，你试一试就能看出效果了

Answer 3

看了下，好像是粘性定位。

可以研究下粘性定位的Polyfill，有Demo可以看，按照文档的用法自己试试吧。