Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第55天 什么是视差滚动？如何实现视差滚动的效果？ #216

Open
haizhilin2013 opened this issue Jun 9, 2019 · 3 comments
Open

[css] 第55天 什么是视差滚动？如何实现视差滚动的效果？ #216

haizhilin2013 opened this issue Jun 9, 2019 · 3 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第55天 什么是视差滚动？如何实现视差滚动的效果？
@haizhilin2013 haizhilin2013 added the css css label Jun 9, 2019
@xiangshuo1992
Copy link
Contributor

什么是视差滚动：
就是在同一视角下，鼠标或者页面滚动时，不同元素以不同的速率跟随滚动，产生生动的效果。
如何实现视差滚动：
根据页面滚动高度的变化，JS相应调整不同元素的不同位移，常见的插件有
parallax.js，以及更多的推荐《10个优秀视差滚动插件》

@Vi-jay
Copy link

Vi-jay commented Jul 31, 2019

使用background-attachment: fixed;使元素图片相对容器固定，当容器上下滚动是 内容发生滚动 背景图片不滚动 从而实现了视差滚动

@MrZ2019
Copy link

MrZ2019 commented Nov 30, 2020

什么是视差滚动：
就是在同一视角下，鼠标或者页面滚动时，不同元素以不同的速率跟随滚动，产生生动的效果。
如何实现视差滚动：
根据页面滚动高度的变化，JS相应调整不同元素的不同位移，常见的插件有
parallax.js，以及更多的推荐《10个优秀视差滚动插件》

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@MrZ2019 @haizhilin2013 @xiangshuo1992 @Vi-jay