• 网页特效:滚动视差设计指南


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

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

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

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

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

    1:背景层移动最慢

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

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

    使用案例:

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

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

     

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

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

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

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

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

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

  • 相关阅读:
    自己的理想,成长过程逐渐明确
    泯灭众人咱不怕。本身就是一个凡人。重要的是,做一个认真的平凡人。
    Access开端
    JsonHelper使用方式
    安装Office Visio 2007 中文版提示找不到安装源
    今天记
    BINGMAPS GPS经纬度格式转换。
    access 基础知识
    (井底之蛙)惭愧丢人的两段代码希望以后多多长进,警醒自己
    脱离SVN版本控制。DAT文件语句。
  • 原文地址:https://www.cnblogs.com/ming-os9/p/8949957.html
Copyright © 2020-2023  润新知