如何用视差滚动来丰富你的网站设计

视差滚动可以给你的网站带来一种深度感，它非常强大，因为它非常吸引人。当你浏览使用这种设计效果的网站时，很难不受到启发，在你自己的网站上实现它。

通过使用层叠样式表(CSS)-用于增强网站外观的编码语言-你可以创建引人入胜的、滚动的功能，有助于讲述你的品牌故事。

虽然有几种不同的方法来实现视差滚动效果，但最流行的方法是让背景移动得比前景慢。

缓慢移动的背景与你坐在移动的车辆中向外看时的感觉是一样的:背景中的天空和云彩的移动速度似乎比前景中的树木和房屋要慢。

优秀的视差滚动示例

有视差滚动的网站非常吸引人，富有想象力，而且经常讲一个故事。下面是一些我们最喜欢的例子Awwwards:

1.击败B.O.C.O.

《Defeat B.O.C.O.》的创意团队通过水平视差滚动设计带你踏上了一段旅程，同时还包含了一个垂直滑动带你进入表面之下。

2.股票的荷兰设计

Stock Dutch Design是一家设计工作室，它利用巧妙的视差元素来吸引人们对网站排版的注意。每个字母都有一张照片，当你滚动时，它会微妙地移动。

3.Delassus集团

德拉萨斯集团(Delassus Group)是一家农产品生产商，它使用视差滚动效果来突出其产品之一:西红柿。

4.啤酒营

使用视差滚动还可以创建强大的缩放效果。

这正是Beer Camp决定做的事情，帮助用户专注于他们最重要的网站元素。

5.PORSCHEvolution

在汽车行业有着悠久而丰富的历史，PORSCHEvolution的网站设计团队使用视差滚动来展示制造商工厂推出的各种车型。

6.ToyFight

获奖创意机构ToyFight的网站由于视差滚动功能而具有微妙的互动性。由此产生的3D效果非常强大，当然也增加了玩家的参与度。

7.工作。工作室

工作。Studio使用一种非常微妙的视差效果将我们从主页的标题带到主页的主体部分。这是非常微妙的，很容易在动图中漏掉。这些字母不会随着页面滚动，而是在你向上滚动时保持它们的位置。

8.说话

《Spoke》对视差滚动的创造性运用之所以能上榜，原因有很多。

也许他们的创意团队做出的最有趣的选择就是转变观点。在滚动过程中，该设计从直线视角转变为鸟瞰视角。

9.花园工厂化

Garden eststudio的网站之所以引人注目，不是因为它的“惊艳”元素，而是因为它展示了一个简单、直接的视差滚动功能是如何增强网站设计的。

10.戴夫Gamache

Dave Gamache的混合动画与视差滚动的微妙使用创建了一个令人着迷的效果在灰度背景。

如何在CSS和HTML中创建视差滚动

你是否有灵感让你的网站通过视差滚动进入下一个层次?

尽管要实现正确的代码似乎有些困难，使用CSS创建这个动画使事情保持简单。

有几种方法可以将视差滚动与CSS整合到你的网站中。最直接的方法是使用容器元素为背景图像设置特定的高度。

方法1:创建一个容器元素并设置图像高度

你将使用这个属性来创建视差滚动效果:background-attachment:固定。

您可以使用其他背景属性来实现额外的样式目的，例如设置图像的中心和缩放。

以下是创建视差效果的基本CSS代码片段:

.example {background-image: url("image.png");
*设置高度*/高度:400px;
/*创建一个视差效果*/
background-attachment:固定;
背景位置:中心;
平铺方式:不再重演;
background-size:封面;}

设置最大高度

另外，你也可以将height设置为100%(即图像的高度)，而不是以像素为单位设置特定的高度。

在你的HTML代码中，使用的容器元素是:

< div class = "榜样" > < / div >

你可以测试代码并使用CSS视差滚动Codepen。

创建移动响应能力

一旦您开始使用这些代码，您很快就会意识到这一点background-attachment:固定经常会给你的手机版网站带来问题。

有一个简单的解决办法，就是添加一个媒体查询。

@media only screen and (max-device-width: 1366px) {
.example {
background-attachment:滚动;
}
}

方法2:创建一个页面包装器和静态部分

还有另一种创建视差滚动效果的方法:使用页面包装器和静态部分。

<主类=“包装器”>
<节课= " img1 " >
<标题>视差h1 > < /
< / >节
<类节=“静态”>
<标题> < / h1内容>
< / >节
<节课= " img2 " >
<标题>内容2 h1 > < /
< / >节
< /主要>

的包装器包含整个页面的透视图和滚动属性，而静态部分是用来演示视差的背景。

视差添加后::伪元素的背景图像，以及变换制作视差效果所需的元素。

在这段代码中,部分是指大小、显示和文本属性，这些属性通常与视差无关。此外，值得注意的是img标识每个部分的背景图像。

实现这种效果所需的CSS代码有点长。

以下是你需要补充的信息以及原因:

.wrapper {
身高:100 vh;

缩放图像会增加一个水平滚动条，你必须禁用它overflow-x来摆脱它。

overflow-x:隐藏;
/*启用页面滚动功能。* /
overflow-y:汽车;

以下2 px指转换后的物体与视点之间的模拟距离。

观点:2 px;
}
.section {

设置位置:相对;创建子元素和父元素之间的绝对位置。

位置:相对;

您必须为容器设置一个特定的高度，但是这个值是不相关的。

身高:100 vh;
/*用于文本格式。* /
显示:flex;
对齐项目:中心;
justify-content:中心;
颜色:蓝色;
文字阴影:0 0 5px #666;
}
{后.parallax::

在这里设置伪元素的位置和显示细节。

内容:“”;
位置:绝对的;
上图:0;
右:0;
底部:0;
左:0;

接下来，您必须将伪元素从视口移开，然后再次将其放大以填回视口。

变换:translateZ (1 px)规模(1.5);

Background-size强制图像填充整个元素。

background-size: 100%;

z - index这样兄弟元素就不会重叠。

z - index: 1;
}
.static {
背景:lightblue;
}

最后，设置背景图像。

{后.img1::
背景图片:url(“image1.jpg”);
}
{后.img2::
背景图片:url(“image2.jpg”);
}

现在你知道了如何在HTML和CSS中创建一个视差滚动效果，让我们来看看你如何在WordPress网站上做它。

如何在WordPress中做视差滚动

你可以通过多种方式在WP中创建视差滚动效果。你可以将新的视差部分编码到你的网站代码中，安装一个免费视差滚动主题，或安装专用插件。

WordPress最大的优点之一就是它的高度可定制性和灵活性。这些选项中的每一个都将给您一个相似(如果不完全相同的话)的结果。

但是，如果你想拥有最大的灵活性，我们建议使用HTML和CSS编码路径。您可以调整您的代码，而不需要切换到另一个主题或安装可能会降低站点速度的插件。

1.使用CSS和HTML添加视差滚动

如果你想给所有的页面添加一个视差滚动效果，有一种简单、轻松的方法可以通过CSS和HTML实现。

这看起来可能很复杂，但幸运的是，您已经有了完成此操作的代码。在使用这个方法之前，请确保你能熟练地编辑WordPress中的主题文件。

首先，通过单击导航到主题编辑器外观>主题编辑器在你的管理栏。你会看到这样一页:

图片来源

下主题文件，找到你想添加视差背景图像的部分的文件。你想把它添加到标题的正下方吗?在一页的中间?或者是在这一页的底部?

所有的主题都有页眉和页脚部分的文件，以及每个页面模板。幸运的是，大多数主题制作者都以一种可访问的方式命名这些文件。

如果您正在寻找头文件部分，该文件可能被称为“header.php”或“header.php”。如果您正在寻找某个页面模板，它可能被称为“单页”或“页面模板”。

一旦你找到了正确的文件，复制并粘贴以下代码:

< div class = "视差" > < / div >

接下来，将你的视差背景图像上传到你的WP媒体库。为下一步保存图像的URL。

最后，将视差CSS复制到你的网站代码中。去外观>定制>额外的CSS。粘贴以下代码:

.parallax {
背景图片:url(“image.png”);
身高:400 px;
background-attachment:固定;
背景位置:中心;
平铺方式:不再重演;
background-size:封面;
}

请确保将“image.png”文件替换为背景图片的URL。

2.安装一个视差滚动主题

不编码?安装一个视差滚动主题是给你的WP网站添加视差滚动效果的最简单的方法之一。

这些主题带有内置的视差功能，可以很容易地从你的网站上添加和删除效果。

3.安装一个背景视差插件

如果你不想完全安装一个新的主题，你可以安装一个插件，例如先进的WordPress的背景和视差图像。

这两个插件在你的网站内容中添加一个简单的短代码后，就会给你的网站添加一个视差效果。它们与WPBakery和Elementor等主要的WP页面构建器兼容。

如何添加视差滚动到一个单一的WordPress页面

你可能想要添加视差滚动到单个页面。如果是这样，我们会照顾你的。对于插件，您可以在单个页面的内容中添加短代码。

对于a视差的主题，您将能够逐页切换视差选项。

如果你想使用HTML和CSS，步骤几乎与上面的第1项相同，只是你不会编辑你的主题文件。

首先，通过单击导航到要编辑的页面页面>所有页面在你的管理侧边栏。

接下来，从可视化编辑器切换到代码编辑器。在古腾堡，你可以通过点击右上角的三个点找到这个选项，向下导航到编辑器,点击代码编辑器。

图片来源

其他页面构建器看起来有点不同，但它们总是提供切换到代码编辑器的选项。

当你切换到代码编辑器后，你的页面看起来会像这样:

图片来源

选择要添加视差部分的位置，并添加以下代码。

< div class = "视差" > < / div >

然后，将背景图像上传到媒体库，并使用上面列出的相同步骤将CSS添加到网站。

如何得到最好的视差滚动

现在你已经知道了如何用CSS编写一个视差滚动脚本，你可以开始在你的网站上试验所有的设计可能性。理想情况下，在将这些代码推送到您的实时网站之前，您将在一个staging站点上进行试验。

当考虑如何设计你的网站时，充分利用视差滚动，不要忘记讲一个故事，让它吸引人，并包含一个行动号召。

还有，不要只是为了使用它而使用它!视差滚动是提高用户粘性的绝佳工具，但必须巧妙地使用它以获得最佳效果。

编者按:这篇文章最初发表于2020年2月，现已更新为全面性。