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

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

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

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

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

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

    1:背景层移动最慢

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

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

    使用案例:

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

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

     

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

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

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

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

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

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

  • 相关阅读:
    Visual Studio.Net 已检测到指定的Web服务器运行的不是ASP.NET1.1版。您将无法运行ASP.NET Web应用程序或服务。
    ActiveX 部件不能创建对象
    XML Schema帮你建模
    XBRL CHINA - XBRL入门
    Xml文档验证—编程篇
    怎样用XML技术对数据库进行操作
    Vclskin 问答
    Altova XMLSpy Ent 2006 汉化特别版 破解版
    一个通过DataSet操作XML的类
    XML Schema教程
  • 原文地址:https://www.cnblogs.com/ming-os9/p/8949957.html
Copyright © 2011-2022 走看看