zoukankan      html  css  js  c++  java
  • 网页特效:滚动视差设计指南

    什么是滚动视差(Parallax Scrolling)? 让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

    1:本是天文术语。看星星时,离得远的星星移动慢,离得近的星星移动快。

    2:坐车上看窗外也有这感觉。

    3:游戏中也是。(比如小霸王的超级马里奥)

    网页中,滚动视差会有以下几层:背景层,贴图层,内容层。

    1:背景层移动最慢

    2:贴图层(在背景和内容层之间)次慢

    3:内容层最快(和滚动页面速度一致)。

    使用案例:

    1:加载完成后会跳到页面的最底部,火箭为载体,以遨游太空为故事背景,随着火箭升空页面逐渐向上滚动,随之以场景化手段描述2001-2012这10年经历。

    2:巧妙的将网页的向下滚动转化为深海遨游,导航化为深度标尺,随着网页滚动逐渐向深海下沉,也逐渐在深海中看到众多不同的景观。

     

    这类网站将内容进行重新整理,将其故事化场景化。需要有清晰地故事逻辑

    1:需要一个视觉元素贯穿整站,比如马里奥赛道,宇宙飞船,潜水的管道和小人。会让读者产生代入感,随着这个引导元素体验整个故事。

    2:设计分层时要定位好背景层,贴图层和内容层之间的关系。

    3:贴图层的存在是为了更有效的传达视觉效果,如果成为了干扰,则会违背了我们的初衷。

    4:内容层的展现是最主要的!无论背景层和贴图层多花哨,设计过程中内容层对用户的展示是最优先的。

    5:这类设计难点在于故事化,“网站很难故事化怎么办?”那我们可以“多场景化”。

  • 相关阅读:
    HTTP协议
    Python学习--装饰器、列表生成式、生成器、map filter、json处理
    Python学习--多线程&多进程
    Python学习--发送邮件
    Python学习--异常处理
    【第五节】【Python学习】【configparser模块】
    【第一节】【shell脚本】【文件里的内容与变量中的内容大小写替换】
    【Python】【多线程多进程】
    【Selenium学习】【拖动滚动条】
    【Python】【异常的获取与处理】
  • 原文地址:https://www.cnblogs.com/ming-os9/p/8949957.html
Copyright © 2011-2022 走看看