Parallax

马上开始. 它是免费的哦
注册 使用您的电邮地址
Parallax 作者: Mind Map: Parallax

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. 要小心的處理貼圖層

7.4. 好的故事

7.5. 好的操作手感

8. 失敗的例子

8.1. http://www.manufacturedessai.it/it/

8.2. http://fullten-plums.com.tw/

8.3. http://www.yebocreative.com/

9. 進階

9.1. http://www.rleonardi.com/interactive-resume/

9.2. http://everylastdrop.co.uk/

9.3. http://grabandgo.pt/grab.html

9.4. http://onepiece.sushiexpress.com.tw/html/menu.html

9.5. http://www.evastylecard.com/

9.6. http://www.apple.com/ipad-air/

9.7. http://first-launch.com/