视差图得到视差_如何为任何WordPress主题添加视差效果

视差图得到视差

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a parallax effect to any WordPress theme.

最近，一位读者问我们如何为任何WordPress主题添加视差效果？ 视差效果是一种网页设计趋势，其中背景图像滚动速度比前景内容慢。 在本文中，我们将向您展示如何轻松地向任何WordPress主题添加视差效果。

什么是视差效果？ (What is a Parallax Effect?)

Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the background images and makes them feel interactive.

视差效果是一种现代的Web设计技术，其中背景元素的滚动速度比前景内容慢。 这种效果增加了背景图像的深度，并使其具有交互性。

Parallax effect can be used on landing pages, longform content, sales pages, or homepage of a business website. It is a great way to highlight different sections on a lengthy page.

视差效果可用于企业网站的 登录页面 ，长篇内容， 销售页面或主页上 。 这是在冗长的页面上突出显示不同部分的一种好方法。

Many premium WordPress themes come with built-in parallax effect on their homepage. You can also use parallax effect in most WordPress page builder plugins as well.

许多高级WordPress主题在其首页上都带有内置视差效果。 您还可以在大多数WordPress页面构建器插件中使用视差效果。

However, not all themes have a built-in parallax effect, and you may not want to use a page builder to create custom page layouts just for a parallax effect.

但是，并非所有主题都具有内置的视差效果，并且您可能不希望使用页面构建器仅为视差效果创建自定义页面布局 。

Let’s take a look at how to easily add parallax background effect to any WordPress theme.

让我们看一下如何轻松地向任何WordPress主题添加视差背景效果。

方法1：使用插件向任何WordPress主题添加视差效果 (Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin)

This method doesn’t require you to add any code to your WordPress theme. It is easier and recommended for most users.

此方法不需要您向WordPress主题添加任何代码。 它更容易，建议大多数用户使用。

First thing you need to do is install and activate the Advanced WordPress Backgrounds plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活高级WordPress背景插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor.

激活后，您需要编辑页面或发布要添加视差效果的位置。 您会在视觉编辑器中注意到新的“高级WordPress背景”按钮。

Clicking on it will bring up a popup where you can change different settings for the background you want to add.

单击它会弹出一个弹出窗口，您可以在其中更改要添加的背景的不同设置。

First, you need to select an image as your background type and then check the ‘stretch’ option.

首先，您需要选择一张图片作为背景类型，然后选中“拉伸”选项。

Next, you need to click on the ‘Select Image’ button to upload or select an image you want to use. Make sure that you are using a large image otherwise it will appear pixelated.

接下来，您需要单击“选择图像”按钮以上传或选择要使用的图像。 确保您使用的是大图像，否则它将显得像素化。

After that you need to enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. The most commonly used parallax effect is scroll.

之后，您需要通过选择视差类型来启用视差。 您可以尝试使用多种样式。 最常用的视差效果是滚动。

Click on the Insert button to continue.

单击插入按钮以继续。

The plugin will now add a shortcode inside your WordPress post editor. It will look something like this:

现在，该插件将在您的WordPress帖子编辑器中添加一个简码。 它看起来像这样：

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

[nk_awb awb_type =” image” awb_stretch =” true” awb_image =” 22” awb_image_size =” full” awb_parallax =” scroll” awb_parallax_speed =” 0.5” awb_mouse_parallax =“” true” awb_mouse_parallax_b =] mouse_parallax_size = 10000

Your Content Here

您的内容在这里

[/nk_awb]

[/ nk_awb]

Replace ‘Your content here’ with your own content and then save your page.

用您自己的内容替换“此处的内容”，然后保存页面。

You can now visit your website to see it in action.

现在，您可以访问您的网站以查看其运行情况。

方法2：使用CSS将视差效果添加到任何WordPress主题 (Method 2: Add Parallax Effect to Any WordPress Theme with CSS)

This method requires you to have a fair understanding of HTML / CSS as well as how WordPress themes work.

此方法要求您对HTML / CSS以及WordPress主题的工作原理有一定的了解。

First, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting Media » Add New page.

首先，您需要访问媒体»添加新页面，将要用于视差效果的图像上传到WordPress媒体库。

After uploading the image, you need to copy the image URL by editing the image in WordPress media library.

上传图像后，您需要通过在WordPress媒体库中编辑图像来复制图像URL。

Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or child theme.

接下来，您需要将以下HTML添加到要显示视差效果的页面或页面中。 您也可以将此HTML添加到WordPress主题或子主题中 。

<div class="parallax">
<div class="parallax-content">

Your content goes here...

</div>
</div>

Next you need to add the following custom CSS to your WordPress theme.

接下来，您需要将以下自定义CSS添加到WordPress主题中。

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Don’t forget to replace the background image URL with your own background image.

不要忘记用自己的背景图片替换背景图片网址。

You can now save your changes and visit your website to see it in action.

现在，您可以保存所做的更改并访问您的网站以查看实际操作。

Note: You may need to adjust CSS to work with your site’s layout.

注意：您可能需要调整CSS才能与您的网站布局配合使用。

We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the most wanted WordPress tips, tricks, and hacks.

我们希望本文能帮助您学习如何轻松地将视差效果添加到任何WordPress主题。 您可能还希望查看我们的大型列表，其中包括最需要的WordPress技巧，窍门和hack 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-a-parallax-effect-to-any-wordpress-theme/

视差图得到视差