为了账号安全,请及时绑定邮箱和手机立即绑定

如何处理全屏滚动和视差滚动结合的效果?请提供思路,多谢!

如何处理全屏滚动和视差滚动结合的效果?请提供思路,多谢!

慕容森 2018-10-16 15:17:02
最近的项目主页想要实现这样的效果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,后面的像素跟着高度变吧。


查看完整回答
反对 回复 2018-11-01
  • 1 回答
  • 0 关注
  • 478 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信