2010年4月2日 星期五

網頁的多重捲動(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

沒有留言: