Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第55天 什么是视差滚动?如何实现视差滚动的效果?

Activity

xiangshuo1992

xiangshuo1992 commented on Jun 10, 2019

@xiangshuo1992
Contributor

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

Vi-jay

Vi-jay commented on Jul 31, 2019

@Vi-jay

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

smile-2008

smile-2008 commented on Nov 30, 2020

@smile-2008

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@xiangshuo1992@Vi-jay

        Issue actions

          [css] 第55天 什么是视差滚动?如何实现视差滚动的效果? · Issue #216 · haizlin/fe-interview