網頁的多重捲動(Parallax Scrolling)效果

今天在號稱 Front-End Engineer 的 James Padolsey 大大 Blog 中挖寶時，被捲動的網頁效果吸引住了

起初以為是老花，但是以我20多年前打電玩的經驗，和一天使用超過18小時卻被醫生嫌沒有近視的火眼金睛，鑑定為多重捲軸確診案例

James 的網頁確實以兩個層次捲動著 搞什麼阿

因為只共有兩層，當下就想背景一定是在 body 的 CSS 中以 background-image 和動態 background-position 指定(控制 y 軸)兜出來的效果

在啟始 js中確實找到這一段

(function(){
  var a = document.body, e = document.documentElement;
  $(window)
    .unbind("scroll")
    .scroll(function(){
      var b = Math.max(e.scrollTop, a.scrollTop) / 8;
      a.style.backgroundPosition = "0px " + -b + "px";
    });
})();

CSS 則為

body {
  background: #222 url(images/bg.png) fixed;
  font-size: 0.8em; 
  font-family: Verdana, Helvetica, Arial, Sans-Serif;
}

這就是了！

瞭解了原理後，就想自己寫個 jQuery 來用，但是不甘心的想到，偌大的網路世界不會只有我這庸才傢伙在乎這個效果吧，再搜尋看看！

果然又陸續找到 Parallax Backgrounds, a multi–layered javascript experiment

和 Create a Funky Paralla Background Effect using jQuery

不列舉了，搜尋看看更多

我真的蠻喜歡這網頁效果

好了！收工了！反正都有人搞定了 XD


參考資料：
Wikipedia - Parallax Scrolling

效果名稱：
Parallax Scrolling, Parallax Backgrounds 或 Multiplane