视差效应已经在电影工业中使用了很长很长的时间，卡通也很好地利用了这一简单的技术，其基本思想是使2个重叠的物体以不同的速度比移动，从而产生深度的幻觉。

视差效果甚至对网站也很有用。我们可以看到很多用途，今天我们将把它带得更深一点，并利用这种技术创建一个横幅。

这里的主要挑战是做一些简单的事情，因为我们处理的是动态内容，所以每件事情都会经常发生变化。例如，我们的效果将需要自动检测高度，因为唯一的固定维度将是宽度。

另外，我们百色网页制作将学习如何在WordPress主题的顶部做这件事，在我们的例子中是2011主题（默认主题），但是你可以很容易地使用这里的概念和片段来应用于你自己的主题。

所以，让我们摇滚吧！

首先，请演示一下

你可以看到最后的效果演示页面屏幕截图看起来不太好（是的，它没有动画），但是你可以在这里得到整体的想法。

摄影学分joeymc86

当你在演示页面上向下滚动时，注意到树的图像以不同于页面的速度滚动。当演示页面打开时，“你所需要的是爱”文本在图像的中间，正好在树的顶部（见上面的图像）。当你向下滚动时，文本仍然在图像的中间，但是它会。在树上排成一行。

在你自己的工作中，有很多不同的方法可以使用。我们将对实现视差效果的过程进行分析，并且可以根据自己的需要进行调整。

那么，我们到底在做什么呢？

我们将创建一个横幅之前，你的帖子与一个特色的图像，将滚动起来比窗口滚动更快，所以它有一个深度效应，将使我们的旗帜突出。

设置WordPress

If you don’t have WordPress installed in a development environment, it’s a good time to do so.After installing it, Twenty Evelen will be enabled by default, but to give the exact same look as we have in our demo you’ll need to go to “Wp-admin > Appearance > Theme Options” and select the one-column layout, without sidebar.

Also, under “Wp-admin > Appearance > Header” you can disable the default banners, since we’ll use our own awesome banner.

添加脚本和Styles，添加新的图像大小

我们将直接在函数.PHP文件中进行更改。如果需要，您可以创建一个用于此效果的插件，但是为了保持简单，我们将直接在主题上进行。

让我们使用WpjEnQueLeEx Script（）和WpnEnQueLeEySype（）来添加我们的自定义文件。您需要在JS文件夹下创建vDeLayay.Valelay.js和Valelay.SimaX.CSS文件。然后将其添加到您的函数中。

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen functionCaldIsAxAxScript（）{

    脚本

    wp_enqueue_script(

        'vandelayParallax',

        GETApTimePayeTrimTryYyURI（）。'/js/vandelay.parallax.js',

        数组(“jQuery”)

    );

    风格

    wp_enqueue_style(

        'vandelayParallaxCSS',

        GETApTimePayeTrimTryYyURI（）。'/js/vandelay.parallax.css'

    );

}

add_action(“WpnEnQuealeScript脚本”, “Call视差脚本”);

我们使用GETAuthTabePieldTryYyURI（）函数来防止硬编码的路径。此外，如果使用插件，则需要使用PuxSuin URL（）函数。

注意，我们将它们添加为动作，因此WordPress自动将它们附加到HTML中的正确位置。这是因为我们对脚本依赖jQuery非常重要。

由于我们的横幅将有一个自定义的图像大小，让我们以这样的方式添加：

?

One

Two //let's add a new image size now

add_image_size( 'parallax', 690, 600 ); /视差横幅

如果你已经创建了帖子，你将需要使用缩略图再生器插件来在这个新的大小上创建新的特征图像。如果没有，只需创建一个大于690×400的图像的新的虚拟帖子。

添加视差容器

现在，我们将创建一个函数，将适当的标记添加到横幅上。这是一个简单的函数，它只需得到一个POST并创建包含帖子的缩略图和标题的div。

?

One

Two

Three

Four

Five

Six

Seven

Eight function附加视差$post{

    $parallax= "<div id='parallax-banner'>";

        $parallax.= get_the_post_thumbnail( 邮费, 'parallax');

        $parallax.= "<span class='title'>".get_the_title(邮费)."</span>";

    $parallax.= "</div>";

    回声$parallax;

}

这个片断只会创建函数，我们仍然需要调用它。问题是，在哪里？

在调用这个函数之前，让我们创建一个新的名为“特色”的类别，这样当我们创建我们的帖子时，我们只需要把它们分配给这个类别，它们就会显示在主页上。在创建这个新的类别之后，点击它的编辑链接。

Take a look at the URL bar right now.You’ll have something like this: localhost/wp-admin/….tag_ID=15. So, the main part here is the ID for our brand new category, which is 15 in my case, and probably another number in your case.

我们将使用这个数字来获取这个类别的最新帖子，并将AddioListAxess（）函数应用到它中。在我们的情况下（2011），您需要打开您的索引文件.php文件，并在行22之后添加：

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine <?php

    我们将只在主页上添加它。

    如果( is_front_page() ) {

        $ARGS= 数组( 'numberposts'=> 1, “范畴”=> 15 );

        $parallax= get_posts( $ARGS);

        附加视差$parallax〔0〕-&#62; ID；

    }

?>

这是一个定制的WordPress循环，它只会从第15类中获得第一个元素。该代码只适用于主页，因为我们使用了iSnFrutt*Page（）条件标签。如果您想显示每个页面或POST只删除该条件。

哦，那奇怪的$Valax（0）-&#62; ID var是因为WordPress返回GETYPASSH（）元素的方式。我们不需要使用StuuPuxPoDATA函数，实际上它可以根据您添加它的位置来弄乱正常的POST循环。

CSS造型

现在我们把我们的主盒子放在适当的位置，让我们来设计它。打开你的VANDELAY.SimaX.CSS并添加这些线条：

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine #parallax-banner {

    位置: 相对的;

    宽度: 690PX;

    左边余量: -52PX;

    溢流: 隐藏的;

}

    α视差横幅IMG

        位置: 绝对的;

    }

这里没有什么令人印象深刻的东西，但是看看现在的X视差横幅是如何依赖于高度声明的，因为我们只会添加绝对定位的元素。而且，IMG的顶部位置会像你想象的那样做视差技巧。

现在我们将讨论标题：

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Seventeen

Eighteen #parallax-banner .title {

    位置: 绝对的;

    衬垫: 5PX0;

    上衣: Zero;

    左边: Zero;

    宽度: 100%;

    水平对齐: 机构;

    文本转换: 大写字母;

    字体加粗: 大胆的;

    背景色: 透明的;

    背景色: rgba(Two hundred and fifty-five, Two hundred and fifty-five, Two hundred and fifty-five, Zero point eight);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffFF）；/* Math.floor(0.8 * 255).toString(16); */

    - MS滤波器："progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff)";

    -moz-box-shadow:0Zero4px#000;

    -webkit-box-shadow:0Zero4px#000;

    盒影：0Zero4px#000;

}

首先要指出的是IGRBA的替代方案。这将使我们更好地了解我们的效果，这是很好的，至少可以在IEI上做得相当好。

另一个重要的方面是，现在标题总是在容器的顶部，但是我们实际上希望它被定位在那个div的中心。这可以用行的高度来完成，但是因为我们处理动态内容，所以我们最好使用jQuery来定位它。因此，在具有两行标题的情况下，它会更可靠。

最后，jQuery巫师

现在让我们玩vDelayay.Labax .js文件。我们需要在WEDOW.Load动作中触发我们所有的函数，因为我们需要等到图像被加载来知道横幅的正确高度（实际上，可以绑定$BANNEMAIZ.Load（）来完成，但是我们需要稍后再保存这个主题。用这个代码：

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Seventeen

Eighteen

Nineteen jQuery(window).load(功能(){

    var$banner = jQuery(“视差旗”), $image = $banner.find(“IMG”), height = 0, max = 0;

    让我们找到最佳的高度。

    height = $banner.find("img"）（3）；

    旗帜：高度（高度）；

    //这是仍然可见的条幅的最大值，缓存以提高性能。

    max = ($banner.offset()).top + height;

    让我们把标题放在这个区域的中间。

    $横幅".title"）CSS（{

        “顶”: ((height - $banner.find(“标题”).height()) / 2) + “PX”

    };

    jQuery（窗口）function() {

       视差图像（max，$图像）；

    };

});

我们使用变量来缓存jQuery元素，这是提高性能的一个很好的实践。此外，我们将缓存的项目传递给那个视差图像（）函数，这样我们就可以得到最好的性能。

这个代码中的大东西，你可以有任何高度为您的图像，代码将自动找出你有什么高度，并应用适当的功能。

现在只有一个函数，缺失，视差图像（），当你滚动窗口时，它会改变我们的图像的顶部属性。

?

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten function视差图像（max，$图像）{

    varimgTop = 0, scrollPos = jQuery(这).scrollTop();

    2/3的规则寻找图像的新的顶部位置

    imgTop = (scrollPos / max) * (2/3) * $image.height();

    $Case.CSS（{

        “顶”: -(imgTop)+“PX”

    };

}

我们百色网页制作已经做了一些数学运算，使图像与滚动和图像高度成比例地上升，因此较大的图像将比小的图像“慢”起来，这对于保持效果的一致性是很好的。

演示 A kind of下载

现在轮到你了！

你觉得怎么样？你有什么想法来改善这种效果吗？让我们知道使用评论部分！