鄂尔多斯公司网站设计:在WordPress中创建和使用视差效应的方便指南

鄂尔多斯公司网站设计在今天的文章中,我们将详细介绍过去几年的网页设计(也就是WordPress主题设计)的最大趋势之一:视差.

我们将定义什么是理论上的视差,什么是网页设计中的视差,以及为什么有人想要使用它;伴随着一些天才设计师/开发人员实现的伟大例子。

然后,我们将介绍几种不同的方法,任何人都可以通过使用代码、插件或优雅的主题自己的Divi页面生成器在WordPress网站上实现视差滚动效果。

什么是视差?

“视差”这个词用来描述从两个不同的角度观察物体表面位置的差异。一个很好的例子,摘自维基百科,是车速表针在汽车中的明显位置。

从正前方观看时,速度可能正好是60;但从乘客座位上看,由于观察角度的不同,针头可能会显示出稍微不同的速度。

什么是视差滚动效应?

在网页设计中,视差(如上所述)实际上只是一种“特效”。通过以不同的速度动画多层背景和前景图像以给人以深度的印象而获得的一种光学错觉。当用户滚动通过这些图像时,产生的变化就是我们所称的“视差滚动效果”。

为什么在网页设计中使用视差?

到目前为止,视差被广泛认为仅仅是网页设计的一种趋势。令人愉快但最终没有必要的东西。许多人,特别是在设计界,对视差的流行和寿命表示失望。他们急切地等待着公众(即客户和客户)不再迷恋它的那一天,它悄悄地消失在互联网上。

就我个人而言,我仍然对视差感兴趣。和大多数事情一样,我认为应该找到一个中间立场。我不是极端和/或毫无意义的视差的粉丝,但同时,我不得不对“使用视差很好”的内容留下深刻的印象,并在某种程度上更深地沉浸在这些内容中。一些我仍然不知道如何清楚地定义的东西,但是“当我看到它的时候就知道它”。另一个容易打乱创意类型的短语。包括我自己。

尽管如此,我已经观察到了一条适用于创造性技术和趋势的一般规律,这可能部分解释了为什么视差具有它的持久力。这是我探索过的东西在较早的一篇文章中这里是关于优雅主题的博客。

这一般规则是:

任何一种新颖的交流形式最初都是为了自己的利益而使用的,因为它是不同的和有趣的。但随着时间的推移,新鲜感逐渐消失,如果长期的广泛采用是目标,它必须找到一个实用的利基来填补;一些有用的东西,它比其他选择做得更好。

在这种情况下,视差滚动效果在网页设计和/或内容创建中是否比其他所有选项都能更好地发挥效用作用?我也这么想。事实上,可能有几个。我脑海中出现的第一个也是最明显的例子,就是视差滚动效应本身有助于说明所共享的信息的任何例子。

我认为,下面一节中的前两个例子很好地证明了这一点。在每一种情况下,视差在不同程度上被使用(与其他设计技术),以获得一种更沉浸式的体验,以一种愉快的方式传达事实/数据。有点像一个科学博物馆的互动展览,它利用有趣的活动在游客的脑海中巩固课程。

下面这一节中的前两个网站是这个用例的主要例子。

行动中视差效应的几个很好的例子

有无数的例子视差在网页设计,可能会显示在本节。我之所以选择这样的例子,是因为,对我来说,它们代表的是使用视差效应实际上增强了全面的经验,有助于以更有影响力的方式讲述一个故事或解释事实。

特斯拉电机

鄂尔多斯公司网站设计

鄂尔多斯公司网站设计在这个例子中,视差滚动效果是很少使用的,但效果很大。这是许多巧妙的设计元素之一,用来将一个简单的FAQ页面提升为一个关于乘坐特斯拉汽车旅行的引人入胜的故事。

参观地点

太空针

鄂尔多斯公司网站设计在太空针的网站,你可以使用视差滚动旅行超过605英尺的针,并了解有趣的东西在西雅图做沿途。

参观地点

游戏男孩

在这个网站上,你可以使用视差滚动通过一些老式的俄罗斯方块游戏男孩的25岁生日。

参观地点

索尼

作为索尼的一部分被移动他们创建了这个网站,用视差滚动来讲述一个引人入胜的故事。

参观地点

1号公路

在公路一号网站上,你可以在讲故事和玩游戏的交汇处使用视差滚动。

参观地点

如何用代码在WordPress中创建视差效应

当使用代码在WordPress中创建视差效果时,您有几个选项。可以将视差自定义POST类型添加到现有主题中,如本教程由Wevo Studio的Andrei教授-或者您可以使用以下页面创建自己的主题自定义视差页面模板你自己设计的。

老实说,除非你正在开发自己的主题或者只是想要视差开发实践,否则你最好还是使用下面的插件或者已经带有视差页面的主题。我已经链接到上面的教程和下面的插件做了完全相同的事情。主要的区别在于,有了插件,辛苦的工作就已经为你做好了。

如果您实际上是在寻找一些具有视差的良好开发实践,那么您也应该查看以下教程:

用于WordPress的视差效应插件

如果使用上面的代码不是你能做的、习惯的,或者仅仅是不感兴趣的事情,那么WordPress用户有几个插件选项。我已经包括了以下四个不同的插件-溢价和免费-应该让你创建视差的文章和网页在任何时候。

视差,一页生成器,WordPress插件

在这个短列表中唯一的高级插件,视差一个页面生成器是为了帮助任何人建立任何主题的视差滚动页面。它提供了各种效果,画廊和组合能力,定制SEO工具,等等。

价格:22美元更多资讯及下载

视差涡旋

视差Scroll插件使用视差滚动自定义POST类型,允许任何人创建带有视差元素的帖子或页面。

价格:免费更多资讯及下载

视差重力-着陆页生成器

视差重力是为建立着陆页而设计的。因此,虽然这将不允许您添加视差元素到您现有的帖子/页面,您可以创建新的登陆页面中的视差元素。

价格:免费更多资讯及下载

伊索故事引擎

有了伊索故事引擎,视差只是几个可供使用的讲故事模块之一。与官方的伊索主题或任何运行伊索兼容脚本的主题(可以在下面链接的插件页面上找到)一起使用,任何人都可以在其长篇文章或页面中包含视差元素。

价格:免费更多资讯及下载

如何利用Divi在WordPress中创建视差效应

如果您是divi用户,我相信很多人都是,那么您可以使用divi的内置页面构建器在任意页面上包含视差元素。

以下是如何:

首先,确保您正在创建的任何页面或帖子都处于页面构建器模式。

接下来,单击任何背景部分的“设置”按钮。

你会被带到像这样的屏幕上。如果你向下滚动,你将可以选择启用视差。您可以在CSS或真正的JavaScript视差之间进行选择,只需单击一个按钮即可。

设置首选项后,只需单击“设置”模块上的“保存”,将草稿保存在页面上,然后预览即可。如果您不熟悉Divi的这种效果,请查看divi演示不同的例子。

总结性

不管你喜欢与否,视差似乎不会很快消失。然而,随着时间的推移,我认为看到它在一页纸上只是为了让它在那里一定会消失。相反,我们将看到有品位的视差实例,与其他设计技术结合使用,以获得更高的用户体验。

在今天的文章中,我们学习了如何通过代码、插件和Divi页面构建器将这种视差添加到WordPress网站。如果您有什么需要添加或评论的话,我们很乐意在下面的评论中阅读您的想法。





二维码