Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Front-End
Code

一种简单的视差滚动技术

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

视差滚动是一种有趣的技术,当你滚动鼠标时,背景图像的转换速度比前景中的内容慢,从而产生 3D 深度的错觉。 当我计划重新设计我的个人网站时,我的第一个目标是编写最简单,最简单的代码,以实现最大的惊人效果! 我会告诉你我是怎么做到的。

如果你正在寻找一种快速开始使用主题基本模板的方法,那么找一个简单的视差主题可能是一个不错的选择。 或者浏览我们的单页模板。 你还可以在 Envato Studio 上找到服务提供商,他们将为你创建视差滚动网站。

在本教程中,我将教你最简单的视差滚动技术,让我们深入研究!


第 1 步:标记

该技术围绕控制背景图像的速度。 因此,让我们从 HTML 标记开始,创建两个部分以及所需的属性:“数据类型” 和 “数据速度”。 别担心; 我稍后会解释这些。

我正在使用 标记,其中包含 HTML5 中引入的属性 data-type&data-speed。 这使得 HTML 标记更清晰,更易于阅读。

根据自定义数据属性的规范,任何以数据开头的属性都将被视为私有数据的存储区域。此外,这不会影响布局或演示。

由于我们需要做的就是控制背景图像的速度,我们将使用 data-type =“background” 和 data-speed =“10” 作为关键属性来指定必要的参数。

我知道你在想什么:你担心 IE。 不要怕; 我有一个解决方法! 我们将来说说它。

接下来,让我们在每个 中的 标记内添加内容。

我们在这里尝试做的是使 背景滚动比其内容慢,即 < article>。 这将有助于我们创造视差错觉。 这将有助于我们创造视差错觉。 在继续讨论 jQuery 魔术之前,让我们在 CSS 中为每个添加背景图像。

为两个部分添加背景后,它应如下所示:

image
image

让我们为样式添加更多 CSS 并为页面增添趣味!

现在应该看起来像这样......

image

第 2 步:魔术代码

是的,没错; 这就是神奇的开始! 使用 jQuery,我们将从标准的 document.ready()方法开始,以确保页面已加载并准备好进行操作。

此技术围绕控制两个部分中存在的背景图像的速度。

现在我需要你注意了。 下面发生的第一件事是我们遍历页面中的每个 ,它具有 atrribute data-type =“background”。

添加另一个功能,.scroll() ,内部。每个() ,当用户开始滚动被调用。

我们需要确定用户向上滚动多少,然后将值除以标记中提到的数据速度值。

$ window.scrollTop():我们从顶部获取当前滚动值。 这基本上决定了用户向上滚动的程度。 $ bgobj.data('speed')是指标记中分配的数据速度,yPos 是我们需要应用于滚动的最终值。 但是,它将是一个负值,因为我们必须在用户滚动的相反方向上移动背景。

让我们通过一个例子进行更多研究:

image

在上图中,数据速度为 10,假设浏览器窗口滚动了 57px。 这意味着 57px 除以 10 = 5.7px。

我们需要做的最后一件事是将我们的最终背景位置放在一个变量中。 为了将背景的水平位置保持为静态,我们将 50%作为其 xPosition。 然后,我们将 yPos 添加为 yPosition,最后将背景坐标分配给我们的背景:$ bgobj.css({backgroundPosition:coords}); 。

你的最终代码可能如下所示:

是的,我们已经做到了! 亲自尝试一下。


IE 修复

最后一个修复:较旧的 IE 无法呈现 和 标记。 但这很容易解决; 我们将使用创建元素的标准解决方案,这使浏览器神奇地识别 HTML5 标签。

此外,我们需要使用基本的 CSS 重置文件,以便所有浏览器都能很好地播放。 幸运的是,在跨浏览器规范化方面,像 HTML5 Boilerplate 这样的工具可以解决我们工作的主要问题。

这是为了这一课! 你还有什么不明白的地方吗? 在下面评论出来!

如果你正在寻找具有专业效果的快速解决方案,请浏览我们的 Parallax 主题和单页模板选项,可在 ThemeForest 上购买。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.