滚动视差专题研究

1、研究人： 黄勤烨 吴乐 田佳林1.你是怎样理解滚动视差？2.滚动视差为什么会流行？先看案例滚动视差： （Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。视差，原本是一个天文学术语当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。简单说就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。如何实现？一般为大幅背景，滚动

2、速度(最慢)装饰，烘托场景。滚动速度(次慢)文字，或者主要表现的内容(可以和页面滚动速度一致)视差滚动的原理：内容层贴图层背景层举个例子我是背景 是背景 背景 景 .我是内容层视差的分类故事型故事型场景型场景型故事型故事型视觉索引故事场景位置导航分层滚动位置计算合适的视觉索引贯穿整站合理的对网页进行分层拆分内容层、贴图层、前景、背景的分层实时计算各部分分层内容的位置有导航的存在让用户不至于“迷路”。导航应该融入场景将内容场景化内容融入场景故事型故事型场景型场景型场景型场景型横向封割多场景一中心多屏净色大图片限制范围以合理的方式将站点合理的分为多个场景用一张图说明你懂产品，懂设计限制元素显示范围

3、颜色的改变让场景变换更明显一屏一个不一样的场景我们为什么要把网页做成这样？动 态打破沉闷趣味性作为设计师，滚动视差能带给你什么？更高端大气上档次与国际潮流接轨设计过程充满趣味更清晰的内容更吸引眼球怎么做？一个让你尽情发挥的BOSS一个与你合作亲密无间的前端滚动视差网站设计流程1.1.了解需了解需求求分分析交互析交互前期先要了解需求，分析项目是否适合做滚动视差，是否满足做视差的条件。我的网站想展示的内容是什么？怎么展示？滚动视差网站设计流程2.2.整理内整理内容容构构思场景思场景这时候脑海里已经要有个大概的成品的构思了滚动视差网站设计流程3.3.设计页设计页面面图形化场景图形化场景视觉设计师先设

4、计出静态页面，输出关键状态的设计稿滚动视差网站设计流程3.3.重构开重构开发发实现视差实现视差开发出视差网页，输出HTML页面滚动视差网站由于内容分层会用到很多大尺寸图片或者png图片，所以体积往往比较大，所以这个时候千万别忘了设计loading动画。1. 别忘了loading2. 斜线的巧妙运用。当以斜线的方式从底部向上划入的时候，通常视觉上会给人一种是从右下角以一定角度划入的错觉。所以斜线的布局也经常被采用在滚动视差网站的设计3.纯色的运用没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式纯色比渐变和图片更容易延展，并且纯色很容易区分视差区间。在使用时我们可以调整颜色的透明度，来达到各

5、种视觉效果。所以纯色的运用也是滚动视差设计者的大爱。滚动视差制作小技巧4.景深效果通过模糊，营造类似于摄影的景深效果，前景大而虚，主体清晰，后景小而更虚。简单的模糊和大小的变化，让你的网页充满空间感。生动而真实。更长的加载时间很难跟踪与分析视差滚动在移动设备上无效果视差的不足 编者语： 虽然限制多多，但是在天朝，能遇到一个在天朝，能遇到一个 视差的项目是不容易滴，视差的项目是不容易滴， 所以，如果有机会，一定要把握住，尽情发挥吧！所以，如果有机会，一定要把握住，尽情发挥吧！拓展：滚动视差在移动端上的应用-滚动壁纸点我看视频最后，让我们在来探讨开始的问题1 1. .你是怎样理解你是怎样理解滚滚动视动视差差？2.2.滚动视差为什么会流行滚动视差为什么会流行？个人观点：我的理解滚动视差是还原视觉的真实，通过符合眼球习惯的滚动，让原本平面化了的网页具备了一定的空间感，现实感。而为什么会流行我觉得是因为： 从表面上来看，是扁平化已经发展到成熟阶段，当人们对简单、直观的扁平化设计习惯后，又反过来追求更多的内容和变化。我们可以看到新的流行趋势：响应式设计、大图、滚动视差、动态背景等等，都是在尝试着更多的变化。 而从根