javascript - 如何处理全屏滚动和视差滚动结合的效果？请提供思路，多谢！

Question

最近的项目主页想要实现这样的效果

http://mo004_376.mo4.line2.js...（请在chrome中打开）

观察后，发现是全屏滚动和视差滚动相结合。

1. 单独的全屏滚动，可以用固定浏览器视窗，调整容器的 transfrom translate 属性，加上 transition 来实现。

2. 单独的该网站的视差滚动可以通过 background-attachment: fixed; 来固定背景图的位置在视窗中央。

---

但是两个效果相结合就会出现一个问题，背景图的定位是相对于父容器了，不是浏览器视窗。滚动后背景图就会跟着容器跑了。
最后我观察到该网站的效果是通过不断赋值translate，和背景图的background-position 强行让背景图定位在浏览器视窗中央 来实现的。
虽然知道原理了但是还是不知道该怎么去实现。
尝试过用JQuery的animate，但是不可以用在translate上。
用在scrollTop上效果不好，会很卡
各位有没有什么好的实现思路嘛？

Answer 1

background-position: center 1842px;

后面的1842px是前面两个p的总高度，他是让背景图一直center，后面的像素跟着高度变吧。

Answer 2

谢邀，这种demo太多了，比如我随手就找了一个

http://www.jq22.com/demo/jque...

整了个demo
https://jsfiddle.net/m7eegdj2/