Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

壹種簡單的視差滾動技術

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Traditional) (中文(繁體)) 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.