跳到主要内容

建立一个视差滚动网站:10个专业提示

术语“视差”是指从不同位置观察时物体的明显移动。该技术最初用于2D视频游戏,其中背景图像比前景图像移动得慢,从而产生深度幻觉。谁会想到1982年街机游戏中普及的东西月球巡逻队30年后将成为网页设计的主流趋势!

自简单的双层网站以来,Parallax网站已经走过了漫长的道路。使用HTML5,CSS3和现代浏览器,有许多视差网站使用多平面动画,引入新元素并使用滚动创建超出y轴的运动。如果您不熟悉,请查看这些令人eye目结舌的例子视差滚动网站

创建这些视觉上互动的杰作之一可能是压倒性的,所以这里有10个技巧,将帮助您以正确的方式建立您的视差滚动网站。

01.让它适合移动设备

parallax scrolling tips: Peugeot site on mobile devices

大多数视差滚动网站不适用于移动设备

随着移动设备的互联网使用量的增加,设计概念就不足为奇了首先是移动响应式网页设计变得非常受欢迎。

目前,大多数视差滚动网站都不是移动设备友好的 - 包括像标致图形小说如上图。但鉴于移动网络使用的趋势,这种方法越来越难以维持。

02.不要为此使用它

parallax scrolling tips: Greensplash homepage

视差滚动可以为用户提供的不仅仅是花哨的装饰

视差滚动是非常酷的技术,但尽量不要使用它。绿色飞溅设计上面显示的网站设计得很好,完美地满足了它的用途,但是它使用视差滚动并没有给用户带来太多的体验。

03.好玩

parallax scrolling tips: Krystalrae homepage

在这里,给定模型上的装备随着用户向下滚动而改变

观众喜欢娱乐和视差滚动通常用于给用户带来一些乐趣。该Kystalrae秋季系列 - 当用户向下滚动时,给定模型上的装备会发生变化 - 这是一种有趣使用该技术的一个很好的例子。

04.让它讲述一个故事

parallax scrolling tips: inTacto homepage

InTacto使用视差滚动来叙述他们公司的故事

视差滚动可用于吸引访问者通过时间轴或故事。数字代理InTacto该网站是视差滚动的一个很好的例子,用于以有趣和参与的方式叙述公司的历史。

05.让它吸引人

parallax scrolling tips: Activate Drinks homepage

巧妙地使用滚动功能可以让您的观众在网站上停留更长时间

激活饮料网站通过巧妙地使用动画和视差滚动来吸引观众。让用户访问您的网站一直是设计师面临的挑战。但是,如果视觉效果是有趣的,诱人的和/或催眠的,那么视差滚动可以增强自然好奇心的吸引力。

06. Harness呼吁采取行动

parallax scrolling tips: Tinke homepage

Tinke使用视差滚动来引导访客进行“立即购物”号召性用语

我们滚动并发生了一些事情在与视差滚动网站交互时利用即时反馈是吸引人们进入您的网站并吸引他们采取行动的好方法。

例如,Tinke健身小工具网站吸引访客进入其“下一个按钮”调用,其中小工具的图像与视差滚动相互作用。该网站还完美地引导访问者在页面底部的“立即购买”号召性用语。

07.添加分层和深度

parallax scrolling tips: Madwell homepage

Madwell使用滚动创造了一种绚丽的深度幻觉

Madwell自己的网站赢了Awwwards有充分理由的当天网站,因为它的网站展示了视差滚动网站的层次和深度的完美使用。注意与慢速移动的清晰背景图像相比,快速移动的模糊前景图像。

如前所述,视差艺术是关于创造一种深度幻觉。记得试验而不是放弃!

08.不要过分

parallax scrolling tips: Muffi homepage

Muffi的滚动效果令人惊叹 - 但它走得太远了吗?

Muffi它以各种各样的幻想轰炸了它的网站,它绝对是一个令人印象深刻的技术实力和美丽的图像显示。但是,我个人认为他们使用视差滚动已经走得太远了。当难以找到公司徽标并了解网站的具体内容时,您应该质疑技术的过度使用。

09.记住IE

parallax scrolling tips: IE fix markup

使用HTML5和CSS3创建视差滚动效果时,请不要忘记旧浏览器

对于Web开发人员来说,进行跨浏览器测试是非常正常的做法。对于视差滚动网站而言,它尤其重要,因为它们可能会使用HTML5和CSS3。HTML5 BoilerplateCam帮助处理大多数跨浏览器规范化包含Internet Explorer的修复程序。

10.预装资产

parallax scrolling tips: Soulreaper comic

Soulreaper漫画是有效预装图像的一个很好的例子

大量的视差滚动网站涉及大量使用图像。通常,使用其他多媒体资产也可能是视差滚动网站上大量下载的原因。该灵魂收割者漫画就是这方面的一个典型例子,也是预装图像和资产的一个很好的例子。

乔希陈

Josh Chan是一名数字专家Chromatix公司,澳大利亚墨尔本的网页设计和在线营销机构。网页设计和网络创新是他的激情,以及业余时间的一些霹雳舞。

喜欢这个?阅读这些!

你见过一个视差滚动的好例子吗?请在评论中告诉我们!

话题



翻译字数超限