—————————————————————————–

? 原理

– 多個div隨著鼠標滾動，以不同速度移動

– HTML5/jQuery

? 優(yōu)點

– 鼠標滾輪操作——除鼠標移動外最自然的操作方式

– 相對小的成本創(chuàng)造動態(tài)立體效果

– 依靠用戶操作完成動畫，互動性強

? 注意

– 避免過多元素同時在畫面中，造成凌亂的感覺

動畫過渡要自然、有意義，避免拼湊

—————————————————————————–

　　一、視差滾動效果的主要特點：

1、直觀的設計，快速的響應速度，更合適運用于單頁面

2、差異滾動 分層視圖

　　二、差異滾動的實現規(guī)則：

1、背景層的滾動(最慢)

2、貼圖層(內容層和背景層之間的元素)的滾動(次慢)

3、內容層的滾動(可以和頁面的滾動速度一致)

4、三個圖層的滾動速度不一致，就做出了漂亮的差異滾動效果

1、運用大背景

這些背景圖像一般是高分辨率，大圖，覆蓋整個網站。

高清照片是一個迅速抓住觀眾的好方式，可以產生極具沖擊力的視覺效果,用戶的視線會不自覺地落在寬大的背景上，背景圖的色彩、內容在選擇時要十分講究，前提是不要破壞用戶的體驗，不然再漂亮的照片也是枉然，圖片類型最好選取趨向于一些比較柔和、略帶透明的一類，不要影響到網站主體內容的閱讀，識別，講究協(xié)調。以大量圖片為特色的頁面應該考慮圖像的預加載問題，以便為用戶提供更好更流暢的視覺體驗.

　　http://www.zensorium.com/tinke/

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式

一個視差區(qū)間內顏色最好保持使用2到3種，我們可以調整顏色的透明度，來達到各種視覺效果

　　http://www.soleilnoir.net/believein/#/youtube

根據頁面自身的功能來定義是否需要貼圖層

貼圖層的存在是為了更有效的傳達視覺效果，但如果它成為了干擾，就會違背了我們使用的初衷，內容層的展現是最主要的，無論背景層和貼圖層有多少花哨，在設計師設計過程中，內容層對用戶的展示是最優(yōu)先的

　　http://www.tokiolab.it/

有力的表現、簡約的風格和設計的美感共同構成了一個出色地交互式敘事體驗。我們經常聽到這樣的話：內容是王道，技術只是實現內容的一種工具。當你能夠成功地把有力的信息和漂亮的執(zhí)行力結合起來，你就能創(chuàng)造出人們喜歡并且享受其中的體驗。

　　http://everylastdrop.co.uk/

數據的圖形化來自于數據的可視化，這是一種將數據以有別于閱讀的另外一種可以用眼睛去觀看的方式進行的信息表達。

這種可視化的表達不應該只是提供一種解釋，而是提供給所有讀者以了解的普適性的結論方式。

在今天，可視化表達已經遠遠比簡單的餅狀圖或者條形圖更加的亮眼，讓信息的傳播更加的充滿著趣味,它們包含著設計的趨勢，有創(chuàng)意的再創(chuàng)新。只有不斷的去學習，去創(chuàng)新，才能設計出越來越好的網站。

————————————技術流的分割線————————————

視差滾動效果的?jQuery?插件：

①http://joelb.me/scrollpath/

這款插件用于實現自定義路徑的滾動效果?？梢燥@示使用 Canvas 繪制路徑線條和弧形，看到非常形象的運動效果。

這款 jQuery 插件實現了類似 Nikebetterworld.com 產品展示頁面的視差滾動效果，代碼托管在 Github上面。

這款基于 jQuery 的視差滾動插件使用簡單，官方提供了五種不同的效果演示。

　　http://activatedrinks.com/#/products

來源：pmtoo