2014年12月7日 星期日

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

觀察上面的圖片,裡面有三張圖片,分別放置於不同階層,如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫,但背景圖片動得比較慢,前景圖片動得比較快,我們就可以感受到較符合生活經驗的景深效果。
這種效果稱為視差滾動(Parallax scrolling),它是電腦圖學中一種特別的滑動特效技巧,首次出現於1982年一款叫Moon Patrol的遊戲,主要是用來摸擬3D效果。滾動視差的原理是把背景圖片的移動速度放慢,讓前景圖片移動較快,因而在2D畫面上產生多層次的佈景深度。
把滾動視差應用在網頁設計上,也具有非常棒的視覺效果,而且只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有滾動視差效果的網頁了,非常方便。


---
大約簡單的說明一下,jQuery是什麼,我個人的見解就是"跨瀏覽器",能在手機、平板、電腦 都可以使用,另外很多網站常用的flash動畫,也就慢慢的要被淘汰了,因為不少手機和平板也都不支援flash了,而且一些電腦也是不支援flash的,所以jQuery就出現來解救大家了><…不太好笑的感覺…
目前很多的網站也都使用HTML+CSS+jQuery 來製作美美的網站了~
HTML就好像買了一個家,空殼的一個家,沒有任何的裝潢,只有簡單的牆壁粉刷。
CSS就像是裝潢了,裝潢的材質越好,設計配色越讚,相對的就會花比較多費用了。
jQuery就好像家裡的電燈、電冰箱、電視,是可以讓整個家"亮起來"、"動態的視覺" 就像是把整個家注入了活力。


-----

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

Step1
將用到的js外掛放到head標籤之間。
梅問題-jQuery簡單好用的視差滾動特效

Step2
將要滾動的DIV區塊,加到body標籤之間。
梅問題-jQuery簡單好用的視差滾動特效

Step3
設定css樣式外,再分別設定div滾動區塊的水平位置、速度。
梅問題-jQuery簡單好用的視差滾動特效

Step4
這樣就完成囉! 當預覽時就會發現到,一種很特別的視覺效果,就像是在滾動圖層一樣。
梅問題-jQuery簡單好用的視差滾動特效


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

沒有留言:

張貼留言