關於視差滾動 (Parallax Scrolling) 網頁技巧

觀察上面的圖片，裡面有三張圖片，分別放置於不同階層，如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫，但背景圖片動得比較慢，前景圖片動得比較快，我們就可以感受到較符合生活經驗的景深效果。

這種效果稱為視差滾動(Parallax scrolling)，它是電腦圖學中一種特別的滑動特效技巧，首次出現於1982年一款叫Moon Patrol的遊戲，主要是用來摸擬3D效果。滾動視差的原理是把背景圖片的移動速度放慢，讓前景圖片移動較快，因而在2D畫面上產生多層次的佈景深度。

把滾動視差應用在網頁設計上，也具有非常棒的視覺效果，而且只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有滾動視差效果的網頁了，非常方便。

source:http://www.mrmu.com.tw/2011/10/19/parallax-scrolling/

---

大約簡單的說明一下，jQuery是什麼，我個人的見解就是"跨瀏覽器"，能在手機、平板、電腦 都可以使用，另外很多網站常用的flash動畫，也就慢慢的要被淘汰了，因為不少手機和平板也都不支援flash了，而且一些電腦也是不支援flash的，所以jQuery就出現來解救大家了><…不太好笑的感覺…

目前很多的網站也都使用HTML+CSS+jQuery 來製作美美的網站了~

HTML就好像買了一個家，空殼的一個家，沒有任何的裝潢，只有簡單的牆壁粉刷。

CSS就像是裝潢了，裝潢的材質越好，設計配色越讚，相對的就會花比較多費用了。

jQuery就好像家裡的電燈、電冰箱、電視，是可以讓整個家"亮起來"、"動態的視覺" 就像是把整個家注入了活力。

source:http://i.cynet.tw/what-is-jquery-css-html/

-----

視差滾動 jQuery Parallax Effect：

外掛名稱：Parallax Effect
外掛版本：1.1.3
外掛下載：本站下載(梅干簡化過) | 官方下載

---

Step1
將用到的js外掛放到head標籤之間。

---

Step2
將要滾動的DIV區塊，加到body標籤之間。

---

Step3
設定css樣式外，再分別設定div滾動區塊的水平位置、速度。

---

Step4
這樣就完成囉! 當預覽時就會發現到，一種很特別的視覺效果，就像是在滾動圖層一樣。



source: http://www.minwt.com/js/9082.html