最近的项目主页想要实现这样的效果http://mo004_376.mo4.line2.js...(请在chrome中打开)观察后,发现是全屏滚动和视差滚动相结合。单独的全屏滚动,可以用固定浏览器视窗,调整容器的 transfrom translate 属性,加上 transition 来实现。单独的该网站的视差滚动可以通过 background-attachment: fixed; 来固定背景图的位置在视窗中央。但是两个效果相结合就会出现一个问题,背景图的定位是相对于父容器了,不是浏览器视窗。滚动后背景图就会跟着容器跑了。最后我观察到该网站的效果是通过不断赋值translate,和背景图的background-position 强行让背景图定位在浏览器视窗中央 来实现的。虽然知道原理了但是还是不知道该怎么去实现。尝试过用JQuery的animate,但是不可以用在translate上。用在scrollTop上效果不好,会很卡各位有没有什么好的实现思路嘛?
1 回答
万千封印
TA贡献1891条经验 获得超3个赞
background-position: center 1842px;
后面的1842px是前面两个DIV的总高度,他是让背景图一直center,后面的像素跟着高度变吧。
添加回答
举报
0/150
提交
取消