18868949445

百色網頁制作:如何為你的WordPress站點添加一個很棒的視差橫幅

日期:2020-03-28 閱讀:231   作者:百色網站設計開發公司

視差效應已經在電影工業中使用了很長很長的時間,卡通也很好地利用了這一簡單的技術,其基本思想是使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下載

現在輪到你了!

你覺得怎么樣?你有什么想法來改善這種效果嗎?讓我們知道使用評論部分!


网赚团队