视差效应仍然是最热门的网页设计趋势之一。这种动画滚动技术发生在背景和前景以不同的速度移动的同时用户滚动，以便有两个独立的图层同时移动。
这种效果可以用于任何数量的网站类型，并且是创建和增加用户参与度的有趣方式。视差效果的好处在于，您不必在设计的每一页上都使用它们，视差滚动是一个伟大的主页技术，可以帮助用户调用操作或其他内容。
视差效果创造了深度和距离的元素，比其他技术更具有三维感，使用户感觉像是设计的一部分。
视差效应的缺点是，它们并不总是在移动设备上显示。（但在本文最后的教程中也有一些解决方法。）
这里尚略广告
上海网站设计带来五个视差效果的风格案例给大家做进一步的介绍。（请确保点击链接查看每个动画的工作原理。）
1.动画显示更改
http://porschevolution.com/
http://sonance-audition.fr/
使用视差效果来显示项目中的变化。运动层可以传达时间，空间或位置的距离。视差效果在与网站内容一起工作时最能展现变化。
上面的保时捷演变显示随着时间的推移，随着每个图像前景的背景和汽车的变化。（把声音转起来，音乐也改变十年。）该设计让用户滚动，因为你想看看接下来的车会是什么样子。这种技术可以按照时间顺序（如这里所看到的）或反向的时间顺序工作。而使其工作的一个关键是，这个网站在两个方向工作 - 即使音乐回来 - 如果你上下滚动。
Sonance使用视差来显示另一种变化 - 在整个设计中的位置变化。视差效果是网站整体导航模式的一部分，用户在设计（位置）的整个体验中都有一个提示。
2.鼓励滚动
http://www.cabletv.com/the-walking-dead
http://www.firewatchgame.com/
视差效应可以帮助创建互动的原因是因为他们鼓励滚动，以保持用户与设计更长时间的互动。
许多具有视差效果的设计包括在主页上的“滚动”指令或提示，以帮助从一开始就鼓励这种互动。（行尸走肉的主页在上面的精选图片之前的页面上包含了这个说明。）
“行尸走肉”网站与视差有些不同，鼓励互动 - 当角色通过不同的漫画式面板移动时，滚动将用户穿过屏幕，而不是上下移动。
3.运动和颜色
https://www.werkstatt.fr/home
http://www.loisjeans.com/es/ss2015/campaign
使用视差滚动的最有趣的方法之一是将颜色合并到不同的内容“面板”中以展示元素或项目组合项目。颜色变化和动画可以表示一些新的东西。颜色也是一个引人注目的设计工具，可以帮助吸引用户。
上面的Werkstatt使用元素和文本之间具有视差层的开始白色和灰色轮廓。但是另外的悬停行动使每个项目都带有颜色。效果的组合效果很好，因为设计的其余部分很简单，它鼓励用户与每个单独的元素交互。
Lois Jeans采用另一种使用颜色的视差方法。每种新的颜色突出了服装活动的不同部分 - 购物者可以在不同自然环境中的火，空气，水和地球模型上看到牛仔裤。
4.使信息更容易消化
http://melaniedaveid.com/
http://restaurantleduc.com/
视差效应可以帮助复杂的信息或较大的文本块更小，更易读，更容易消化。当您考虑移动类型时，这是一个有趣的概念，但实际操作涉及移动容器的类型。上面的例子显示了这个概念的两个不同的应用。
梅拉妮·戴维（Melanie David）在屏幕上对她进行了长篇介绍。显示导航元素 - 关于 - 的左侧不会移动，而用户可以滚动浏览右侧的文本。当文本块结束时，页面的两侧移动到下一节。对于比可视内容区域更长的文本块，这是一个很好的解决方案。
Le Duc餐厅根据您阅读和订购食物的方式，使用单独的区块浏览菜单的不同部分。动画很简单，有趣的鱼背景 - 告诉用户关于餐饮的一些东西 - 并使菜单易于消化。
5.形象化“数字”现实
http://www.madwell.com/team
https://www.spaceneedle.com/home/
视差效果的最大用途之一是帮助用户可视化一些他们无法看到的东西。更多的设计正在使用三维和视差动画的组合来创造更逼真的体验。这些3D设计倾向于落在更多的卡通风格体验领域，比如上面的Madwell，但是当设计与特定类型的设备一起工作时，也可以具有更多的VR感觉。
西雅图太空针网站是使用视差效应已经存在一段时间的网站的典型例子之一。它使用向上滚动技术来模仿如何骑到地标的顶部。
视差滚动移动天际线对建筑物的内部与一些号召性的消息和一个伟大的导航栏，显示了多高的位置。设计是教育性的，冒险的，并向用户展示一些在没有动画效果的情况下难以想象的东西。
3大视差资源
准备为您的下一个项目创建视差效果？这些教程和代码片段将帮助您为您的设计添加动画效果，以帮助吸引用户并延长其吸引力。
如何创建视差滚动效果：w3schools教程将引导您创建移动的容器效果，并提供使用媒体查询的方法，以在移动设备上获得类似的效果。
结论
虽然视差效果是时髦和有趣的，但并不适合每个项目。考虑到某些设备上的某些观众可能会在浏览包含大量动画的网站时遇到困难也很重要。在添加视差效果之前，请清点您的用户和他们的偏好。在一个位置（如主页）开始小视差，并跟踪分析，看看它是否为你工作（增加现场的时间，它是一个线索，它正在工作）。
在与内容和消息传递协同工作时使用视差。这个时髦的技术应该是有趣的设计和互动。
网站设计教程分享，尚略广告，上海网站设计公司，上海品牌设计公司。
本文网址：https://www.shinerayad.com/news_info.asp?id=3189，转载请注明出处。