1. 實作
1.1. 設計流程
1.1.1. 0
1.2. 工程師要注意的事
1.2.1. 好的控制器
1.2.1.1. 可能是scroll觸發
1.2.1.2. 也可能是點選nav上的item
1.2.2. 支援嚮應式的處理
1.2.2.1. 要支援的解析度
1.2.2.2. 是否支援手機
1.2.3. 圖片的加載
1.2.4. 動畫的靈活控制
1.2.4.1. 要分場景
1.2.4.2. 貼圖物件間的群組關係
1.2.5. 效能
2. 參考網站
2.1. 20個PLUGIN
2.1.1. http://wedesignpixel.com/best-jquery-parallax-scrolling-tutorials/
2.2. 集錦
2.2.1. http://jquer.in/category/jquery-plugins-for-awesome-scrolling-and-scrollbars-on-websites/
2.2.2. http://www.desiznworld.com/2013/07/free-jquery-parallax-scrolling-plugins.html
2.3. 教學
2.3.1. http://www.richardshepherd.com/smashing/parallax/background.html
2.3.2. http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
2.3.3. 中文
2.3.3.1. http://www.cnblogs.com/gbin1/archive/2011/11/03/2234358.html
2.3.4. 給設計師看的
2.3.4.1. http://www.webdesignshock.com/one-page-website/
3. 範例
3.1. http://www.itosieceni.pl/
3.2. http://lostworldsfairs.com/atlantis/
3.3. http://dangersoffracking.com/
3.4. http://www.sullivannyc.com/
3.5. http://first-launch.com/
3.6. http://campaign.mcdonalds.com.tw/foodquality/
3.7. http://thesearethings.com/
4. 插件
4.1. Sequence js
4.1.1. http://www.sequencejs.com/themes/sliding-horizontal-parallax/
4.1.2. 支援手機
4.1.3. 能垂直跟水平
4.1.4. 有專業的客制化團隊
4.1.5. 範例
4.1.5.1. http://www.sequencejs.com/blog/showcase-1/#more-1041
4.2. JS程式庫 – Jarallax
4.2.1. http://www.jarallax.com/?page=home
4.2.2. http://yesdesigning.com/thread-120-1-1.html
4.2.3. 動畫處理
4.2.4. 支援度處理
4.2.5. 控制器
4.2.5.1. Drag and drop controller:
4.2.5.1.1. drag the button below to the right to ajust the animation position
4.2.5.2. Keyboard controller:
4.2.5.2.1. press the down key on the keyboard to ajust the animation position
4.2.5.3. Mousewheel controller:
4.2.5.3.1. scroll down with the mousewheel to ajust the animation positio
4.3. jQuery Scroll Path
4.3.1. It uses canvas
4.3.2. http://joelb.me/scrollpath/
4.3.3. http://www.urbangap.com/urban12/marzo
4.4. skrollr
4.4.1. https://github.com/Prinzhorn/skrollr
4.4.2. 利用data來控制 每個場景的開始與結束動作
4.4.3. 動畫處理
4.4.4. 範例很讚
4.4.4.1. http://www.fontwalk.de/
4.4.4.2. http://www.kia.co.uk/new-cars/range/mid-sized-cars/proceed-gt/intro.aspx
4.5. Parallaxjs
4.5.1. 支援動感應裝制
4.5.2. http://wagerfield.github.io/parallax/
4.6. stephband.info jparallax
4.6.1. 擬態Z軸 景深效果
4.6.2. http://stephband.info/jparallax/
4.7. Superscrollorama
4.7.1. 支援 Greensock/TweenMax
4.7.2. http://johnpolacek.github.io/superscrollorama/
4.7.3. 補充
4.7.3.1. http://www.justfont.com/
4.8. jQuery plugin to create full screen pages fast
4.8.1. http://jquer.in/jquery-plugins-for-awesome-scrolling-and-scrollbars-on-websites/fullpage-js/
4.9. pa.js 中國人的插件
4.9.1. http://download.keqie.com/projects/pa.js/
4.10. 我只想動背景之 元組級插件
4.10.1. 功能很少但簡單
4.10.2. http://www.minwt.com/js/9082.html
4.10.3. http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/
4.10.4. http://markdalgleish.com/projects/stellar.js/demos/
4.10.4.1. 支援ios
4.11. 其他
4.11.1. http://jquer.in/?s=parallax
5. 什麼是視差滾動
5.1. Parallax Scrolling 利用滾輪操作圖層以不同的速度移動,從而形成立體的運動效果。
5.2. Parallax 這名詞最早是用在稱呼2D卷軸遊戲 還記得紅白機嗎?
5.3. 最早使用在網頁技術上 是Nike Better World
5.3.1. https://www.youtube.com/watch?v=kmGDwm5-a80
6. 基本要素
6.1. 背景層的滾動(最慢)
6.2. 貼圖層(內容層和背景層之間的元素)的滾動(次慢)
6.3. 內容層的滾動(可以和頁面的滾動速度一致)
6.4. CSS backgroud-attacthment
6.4.1. http://www.w3school.com.cn/css/pr_background-attachment.asp
7. 要訣
7.1. 運用大背景
7.1.1. 這些背景圖像一般是高分辨率,大圖,覆蓋整個網站。 高清照片是一個迅速抓住觀眾的好方式,可以產生極 具衝擊力的視覺效果,用戶的視線會不自覺地落在寬大的背景上
7.1.2. 圖片的選擇要注意不要搶到內容
7.1.3. 要注意圖片的加載的問題
7.1.4. http://www.sullivannyc.com/
7.2. 簡單的配色方案
7.2.1. 一個圖層裡的色彩最好選擇2~3種
7.2.2. 圖層跟圖層間的色差要分明
7.2.3. http://www.iutopi.com/
7.3. 定位好圖層間的關係
7.3.1. 要小心的處理貼圖層