我们这一代人见证了网站设计的重大演变。如果你是20世纪90年代的孩子，你会体验到大部分基于文本的网站。基于基于表的站点和在线页面构建器的路径、FLASH设计、PHP和CSS、Java脚本和语义、Web2.0和移动网站，网站设计者总是站在展示万维网的中心位置。苏州企业网站制作:2010年代才刚刚开始，网站设计师的角色还远远没有结束。
近年来，视差滚动现象已成为一种相当大的咆哮。你们中那些不熟悉视差设计的人可以通过以下几行得到一些启示。
视差设计是一种滚动技术，它有助于使用户产生视场深度的错觉。该技术使用了通过图形和文本呈现的多层信息的组合。这些信息集群被加速以创造运动、深度和三维幻象的效果。只要滚动轮的一次翻转，用户就可以获得这种错觉。苏州企业网站制作:这种错觉可以用来使网站访问者沉浸在网站的绝对交互性中。但是，视差可以在多大程度上被用来创造商业，以及是什么使特定的网站视差？这些都是很少的问题，可以通过博客文章来处理。
视差史
不要把这个名字和DC超级英雄绿灯侠的死敌混淆起来，视差滚动概念的历史可以追溯到20世纪80年代的8位电子游戏时代。
希腊人使用视差一词作为改变的同义词。这是改变，你得到的屏幕上点击按钮或滚动。滚动方法改变了用户的视角。这种方法在网上很普遍，但从来没有为了网站的设计而使用过。该过程可以通过滚动显示对象的多个维度和透视图。
在我们童年的日子里，有一段时间，我们肯定会与8位游戏机游戏擦肩而过，比如月亮巡警、超级马里奥兄弟(SuperMarioBros)或80年代的Contra。苏州企业网站制作:所有这些电子游戏都遵循视差滚动的思想。游戏开发人员当时使用二维图像的方式，玩家过去认为游戏是三维的。
技术是一个不断变化的学科。随着CSS 3和HTML 5等最新技术的引入和应用，网站设计者正在适应这一古老的技术，为网站设计学科开辟一个新的视野。因此，第一个大问题来了：
视差网站做在线商务的最佳用途是什么？
展示产品
最大的难题之一是，企业主在进行网络营销时，会把自己的产品展示给合适的目标受众。每当你涉及到标准的网页设计技术时，留给你的唯一选择就是嵌入闪光灯视频。但是在视差滚动的帮助下，你可以让你的目标受众以他们想要的方式在你的网站上与产品互动。这就是视差网站设计的魔力。
(A)3D方式
当著名的眼镜制造商奥克利(Oakley)发明了空气制动器MX护目镜时，他们通过视差网站推出了这款眼镜。这是首次通过视差设计以3D格式显示产品的实例之一。滚动操作绝对操纵图像的行为，提供用户想要的单一视图的可变透视图。简单的设计和大量的空白使产品的形象更加突出的用户。滚动还有助于以主要方式定义产品。
(B)展示效益和做法
每当涉及到展示某些东西的好处和实践时，视差网站设计就可以成为一位伟大的教师。不错，严肃的，一个动画工作室已经提出了一个网站‘每滴’，这显示了水转换的力量，通过视差网站设计的问题。“每一滴最后一滴”描绘了我们日常平庸生活中的一个角色，他在完成日常任务时，没有意识到他在这个过程中浪费了多少时间。
向你的客户介绍你的产品
激活饮料；一家软饮料公司通过向访客介绍饮料，将视差设计提升到更高的水平。从加载部分开始，激活饮料已经在吸引观众的动作中被看到。饮料的品牌价值是通过网站上的流体动画来展示的。一旦你向下滚动网站，你会被各种各样的颜色和动画迷住。整个网站以各种可能的方式讲述如何激活饮料，这也是你想象中的最佳方式。
让设计讲述故事
当叙事方面发挥作用时，就没有像视差网站设计这样的工具了。视差滚动创造了理想的环境，以最生动但微妙的方式讲述一个故事。它有助于以一种互动的方式让用户参与进来。参观者可以根据自己的方式掌握这个故事，并按自己的方式驱动它。不仅视差帮助在多个故事线中合并成一个，每个故事都与访问者的滚动行为同步。
a)视差滚动：你的虚拟时间机器
智能发电是视差网站的最好例子之一，它可以讲述一个伟大的故事。该网站通过滚动图像和动画讨论智能电力将如何成为未来电力系统的重要组成部分。该网站是一个各种原因和影响的期刊，阐明电力可以为明天生产，减少其对大气和天气的影响。因此，整个网站是对这一原因和效果的叙述，以及电力行业的未来。视差滚动可以作为一种基本的工具，通过它你可以有你的叙述汁液流。
(B)行动中的图画叙事
如果你是一个热心的漫画书收藏家，你应该非常熟悉什么是图形小说。在引进一种名为Hybridge 4的新技术的同时，世界知名的标致(Peugeot)推出了一部以最生动的方式描绘汽车引擎的图形小说。苏州企业网站制作:四种模式的引擎已经被描绘通过一个女性角色谁开始一个秘密任务，以获取某些机密数据，并摆脱捕获她的安全。参观者会被美丽的插图所吸引，这些插图给人一种间谍电影场景的感觉，仅仅是因为滚动按钮的移动。故事最引人入胜的方面是，它是伴随着音效和音乐，使它更像电影。作为故事的副业，Hybridge 4技术正在被引入。
有些情况下，甚至连环画行业也把视差滚动作为他们业务的一种创新工具。“灵魂收割者”是一本数字漫画书，在HTML 5的帮助下，它把漫画书的阅读带到了一个完全不同的层面。作为一个查看器，您将不必翻转页面或转到下一个页面。你可以向下滚动的整个故事，是伴随着音乐和声音。
一种完美的工具
在吸引游客方面，视差做得很好。作为网站设计师，你让访问者负责。正是这些访问者在与网站的互动中发挥了积极的作用。
(A)让你的网站变得有趣
KrystalRae的在线设计师服装有一个视差网站，在那里同样的衣服被应用在一个单一的模型上。与网站设计绝对最小，整个重点是在模型放置在网站的中心。当访问者向下滚动页面时，除了可以由用户自己操作的服装之外，一切都保持不变。
触发动作
视差滚动可以被认为是推动在线业务的最佳工具之一。到目前为止，当访问者首先被介绍到这个部分时，上面折叠的概念已经被认为是互联网最重要的元素之一。但是视差绝对违反了这个规则。游客有义务浏览整个网站。网站的每个部分都承诺，当你向下滚动的时候，页面上会有更多的东西。通过讲述一个令人印象深刻的故事，你可以更容易地把你的访客带到你实际行动的召唤中去。更多的行动呼吁相当于更多的客户。
除了业务方面，没有一个视差站点是相似的。只有通过滚动操作，您才能给您的网站绝对独特的外观和感觉。因此，关于视差站点将影响您的业务的不同方式的讨论已经足够多了。现在，这篇博文将帮助你设计视差网站。
视差网站设计的基础
视差滚动，如前面在这篇博客文章中解释，已经广泛地看到在80年代的8位视频游戏。它主要借鉴了20世纪40年代以来在细胞动画中传统使用的多平面摄像机技术。
但在现代视差设计中，网站设计者采用了4种方法，即分层法、雪碧法、重复模式或动画法、Raster法等4种方法，分别用于8位和16位控制台游戏中。
- 通过分层方法，可以将水平和垂直滚动的各种背景层组合或组合起来，从而实现对多个摄像机的模拟。通过这种合成技术，任何物体只要改变每一层的位置就可以产生视差。接近虚拟区域的层似乎移动得更快。
- 在sprite方法的上下文中，程序员可以构造伪层。雪碧帮助创建可控制的移动对象，这是存在于层的顶部或背面。
- 重复模式方法或动画方法涉及滚动显示要构建在各个瓷砖上。这些滚动显示可以浮动在一个重复的背景层，帮助动画个别的瓷砖，这导致描绘视差效果。色彩循环有助于整个屏幕的动画。
- Raster方法涉及要从屏幕顶部到底部组合和刷新的像素线。图纸之间有一个从一行到另一行的间隔。这有助于创造幻觉。
现代开发人员已经从这些方法进化而来，但是他们所应用的理论仍然是一样的。这里有一个小菜谱来创建你自己的视差网站。
步骤1：标记它
该技术的主要目的是控制图像的背景速度。所以，拿出你的HTML编辑器，从HTML标记的过程开始。要创建的两个主要属性是“数据类型”和“数据速度”。
<section id="home" data-type="background" data-speed="10">
</section>
<section id="about" data-type="background" data-speed="10">
</section>
这个<section>标记应该与数据的属性一起插入。这个<section>HTML 5中引入了具有这种属性的标记。这个标签的主要优点是增加了读者阅读的清晰度。
就HTML 5的自定义数据属性的规范而言，从数据开始的任何属性都被视为私有数据的存储区域。无论如何，这不会影响布局和演示。
视差网站设计的重点是对背景图像的控制。因此，HTML 5中要使用的主要属性作为必要的参数，即data-type="background"和data-speed="10".
网站设计器遵循的下一步是将内容包含在<article>每个标签<section>.
<section id="home" data-type="background" data-speed="10" class="pages">
<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
本例中的主要目标是使<section>所表示的内容的背景滚动速度慢于<article>。这是开启视差幻象的重要一步。下一步是为每个<section>:
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
}
#about {
background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;
}添加一些CSS样式，可以使页面更具吸引力：
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}第二步：将奇迹代码
在这方面，JQuery工具是必要的。使用JQuery开始标准document.ready()方法。通过这种方法，您可以确保页面被加载，并且完全可以被操作。
$(document).ready(function(){
});在这个阶段，每一次迭代<section>属性为data-type="background":
$(document).ready(function(){
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
});
});滚动功能是通过增加滚动的含义来增加的。.scroll()内.each()它在用户开始滚动时启动效果处理。：
$(window).scroll(function() {
});在这一点上，您必须确定用户滚动了多少，然后将其除以标记中提到的数据速度的值。
var yPos = -($window.scrollTop() / $bgobj.data('speed'));$window.scrollTop()：：现在你可以从上面得到价值了。在确定用户滚动了多少时，$window.scrollTop()/ $bgobj.data('speed')引用标记中指定的数据速度。您将得到yPOS值，您需要申请滚动。您得到的值将为负值，因为您必须向相反的方向移动用户滚动的背景。
以下是一些例子：
// Put together the final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });我们已经到了关于视差滚动的最后几个指令。在完成上述步骤之后，您必须将最后的背景位置放在一个变量中。为了将背景的水平位置保持为静态，您必须将其指定为50%。xPosition。那你就得加上yPos就像yPosition。背景坐标可以分配给<section>背景：$bgobj.css({backgroundPosition: coords}
还有沃拉！您附带的魔法代码如下所示：
$(document).ready(function(){
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together the final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});你带着自己的视差网站来了。
但在您启动您的网站之前，您必须调整和调整CSS重置文件，以使浏览器顺利运行。像HTML 5锅炉板这样的应用程序可以帮助您解决跨浏览器标准化的问题。
因此，在这里，您可以在您自己的网站，您可以促进呼吁行动为您的企业，包括一个历史时间表，讲述一个故事，并使它适应移动设备。因此，想出一个设计，可以突出的深度和层次性，以最好的方式，因为这两个要素定义了视差滚动艺术。
