Parallax

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
Rocket clouds
Parallax por 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. Parallax Scrolling 利用滾輪操作圖層以不同的速度移動,從而形成立體的運動效果。

4.2. Parallax 這名詞最早是用在稱呼2D卷軸遊戲 還記得紅白機嗎?

4.3. 最早使用在網頁技術上 是Nike Better World

4.3.1. https://www.youtube.com/watch?v=kmGDwm5-a80

5. 基本要素

5.1. 背景層的滾動(最慢)

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

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

5.4. CSS backgroud-attacthment

5.4.1. http://www.w3school.com.cn/css/pr_background-attachment.asp

6. 要訣

6.1. 運用大背景

6.1.1. 這些背景圖像一般是高分辨率,大圖,覆蓋整個網站。 高清照片是一個迅速抓住觀眾的好方式,可以產生極 具衝擊力的視覺效果,用戶的視線會不自覺地落在寬大的背景上

6.1.2. 圖片的選擇要注意不要搶到內容

6.1.3. 要注意圖片的加載的問題

6.1.4. http://www.sullivannyc.com/

6.2. 簡單的配色方案

6.2.1. 一個圖層裡的色彩最好選擇2~3種

6.2.2. 圖層跟圖層間的色差要分明

6.2.3. http://www.iutopi.com/

6.3. 定位好圖層間的關係

6.3.1. 要小心的處理貼圖層

6.4. 好的故事

6.5. 好的操作手感

7. 失敗的例子

7.1. http://www.manufacturedessai.it/it/

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

7.3. http://www.yebocreative.com/

8. 進階

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

8.2. http://everylastdrop.co.uk/

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

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

8.5. http://www.evastylecard.com/

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

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

9. 插件

9.1. Sequence js

9.1.1. http://www.sequencejs.com/themes/sliding-horizontal-parallax/

9.1.2. 支援手機

9.1.3. 能垂直跟水平

9.1.4. 有專業的客制化團隊

9.1.5. 範例

9.1.5.1. http://www.sequencejs.com/blog/showcase-1/#more-1041

9.2. JS程式庫 – Jarallax

9.2.1. http://www.jarallax.com/?page=home

9.2.2. http://yesdesigning.com/thread-120-1-1.html

9.2.3. 動畫處理

9.2.4. 支援度處理

9.2.5. 控制器

9.2.5.1. Drag and drop controller:

9.2.5.1.1. drag the button below to the right to ajust the animation position

9.2.5.2. Keyboard controller:

9.2.5.2.1. press the down key on the keyboard to ajust the animation position

9.2.5.3. Mousewheel controller:

9.2.5.3.1. scroll down with the mousewheel to ajust the animation positio

9.3. jQuery Scroll Path

9.3.1. It uses canvas

9.3.2. http://joelb.me/scrollpath/

9.3.3. http://www.urbangap.com/urban12/marzo

9.4. skrollr

9.4.1. https://github.com/Prinzhorn/skrollr

9.4.2. 利用data來控制 每個場景的開始與結束動作

9.4.3. 動畫處理

9.4.4. 範例很讚

9.4.4.1. http://www.fontwalk.de/

9.4.4.2. http://www.kia.co.uk/new-cars/range/mid-sized-cars/proceed-gt/intro.aspx

9.5. Parallaxjs

9.5.1. 支援動感應裝制

9.5.2. http://wagerfield.github.io/parallax/

9.6. stephband.info jparallax

9.6.1. 擬態Z軸 景深效果

9.6.2. http://stephband.info/jparallax/

9.7. Superscrollorama

9.7.1. 支援 Greensock/TweenMax

9.7.2. http://johnpolacek.github.io/superscrollorama/

9.7.3. 補充

9.7.3.1. http://www.justfont.com/

9.8. jQuery plugin to create full screen pages fast

9.8.1. http://jquer.in/jquery-plugins-for-awesome-scrolling-and-scrollbars-on-websites/fullpage-js/

9.9. pa.js 中國人的插件

9.9.1. http://download.keqie.com/projects/pa.js/

9.10. 我只想動背景之 元組級插件

9.10.1. 功能很少但簡單

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

9.10.3. http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

9.10.4. http://markdalgleish.com/projects/stellar.js/demos/

9.10.4.1. 支援ios

9.11. 其他

9.11.1. http://jquer.in/?s=parallax