jQuery教學-簡單好用的視差滾動特效 Parallax Effect

梅問題-jQuery簡單好用的視差滾動特效
  若各位有在注意Firefox OS的朋友,應該會發現到,在台灣的官網中,有一個相當特別的效果,當滾動畫面時,感覺畫面上疊了一層圖層,可在某一個區塊中,把背景固定住,然後內容不斷的更換,當這個單元介紹完後,再向下滾動捲軸時,下個單元的內容則會向上推,把上一個單元的內容給覆蓋上去,是一個相當特別的視覺新感受,而這個酷炫的特效也有專有名稱,就叫作「視差滾動」特效,只需透過CSS、jQuery套件,就可快速的實現出此效果,而這種效果相當適合拿來介紹產品時使用,且這種視差滾動特效的模組也相當多,梅干則挑選了一個較簡單的,來為各位介紹一下囉!讓你也可快速使用此特效。

視差滾動 jQuery Parallax Effect:
外掛名稱:Parallax Effect
外掛版本:1.1.3
外掛下載:本站下載(梅干簡化過) | 官方下載

Step1
將用到的js外掛放到head標籤之間。
梅問題-jQuery簡單好用的視差滾動特效
Step2
將要滾動的DIV區塊,加到body標籤之間。
梅問題-jQuery簡單好用的視差滾動特效
Step3
設定css樣式外,再分別設定div滾動區塊的水平位置、速度。
梅問題-jQuery簡單好用的視差滾動特效
Step4
這樣就完成囉! 當預覽時就會發現到,一種很特別的視覺效果,就像是在滾動圖層一樣。
梅問題-jQuery簡單好用的視差滾動特效
[範例預覽] | [Firefox OS視差滾動特效]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 12 梅留言

  • 第1梅
    yun 說道:

    老師您好,請問這種http://www.tartelin.com/illustration-kids網頁水平滾動該如何製作呢?
    謝謝!!

1 3 4 5