視差

Liu Lan Chuang

7月17日 1:19 · Taipei · 編輯紀錄

回在留言有點可惜，貼在這邊

視差常用效果plugin及實做文章以 羅右鈞 問題為例，欲達成網站效果http://pixelcave.com/demo/proui-frontend/index_parallax.php

．背景原理教學
http://www.shejidaren.com/css-fixed-scroll-background.html

．置頂選單(自己刻)
http://www.shiftbrain.co.jp/book/jquery/sample/chapter05/04/

．視差滾動現成Library
http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm
簡單來說就是用偵聽scroll事件，然後再去觸發加class或其他方式去移動物件，另外就是透過不同的移動速度及z-index去做出物件景深的效果

．另一種動畫處理方式（就是一直換圖的動畫css實做方式）
http://www.bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations

．選單滑到固定位置可以看這篇怎麼實做（常用在側邊小圓點或小選單）
http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

．Icon旋轉什麼的
http://tympanus.net/Development/IconHoverEffects/#set-6

怎麼找資源的話，其實就是多看http://www.cnblogs.com/lhb25/
之類的，或是用特效或關鍵字去找，例如parallax scrolling，翻一翻看一看收集一下，久了就很多啦

icon~~~

ICONMOON

http://icomoon.io/#home

CSS 簡潔Code 幾個資源參考

通用 CSS 笔记、建议与指导

很重要的一些觀念，講得很好

http://yukir.net/CSS-Guidelines/#%E5%8D%95%E4%B8%80%E6%96%87%E4%BB%B6%E4%B8%8E%E5%A4%9A%E6%96%87%E4%BB%B6

字型設定，易於重複使用的好方法

http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

作者提供範例css，可使用
http://jsfiddle.net/csswizardry/8nYqN/

成為 CSS 團隊的一員：

CSS 團隊開發的最佳實踐

作者分享體驗，如何有效的在團隊中定義一套css
http://msdn.microsoft.com/zh-tw/magazine/ff679957.aspx

sublime 實用功能

註解

可選多行，按  ctrl + /  將選擇的欄位註解起來

html、css...等檔案都可以直接使用此快捷鍵，很方便

多重選取

可以先選取你想要多重取代的欄位，按 ctrl + D 選取到檔案中相同的欄位，如果想要跳過其中幾個不用取代，就按 ctrl + K + ctrl + D ，如果想要復元選取動作則按 ctrl + U

合併多行

選取愈合併的多行，按 ctrl + j 就會使其在同一行，或直接停駐一點，按 ctrl + j 就會使後面程式碼向停駐的行排列

選取後 >> 按 ctrl + j

整齊 ~

gif、jpg、png 了解圖檔特性

GIF 圖形交換格式

GIF(Graphics Interchange Format)，適合儲存 256 的影像，是使用 LZW 技術縮減影像色彩至256色內並壓縮，透過減色的方式來縮減檔案大小。因為可以儲存的顏色較少，不適合用於全彩的照片、或漸層細膩豐富的影像，但很適合用於存取色塊、形狀不複雜的圖形。

設定 GIF 最佳化時會出現一個交錯式的選項，所謂交錯式 (Interlacing) 指的是圖檔出現的方式，一般而言網路的顯示是由上而下一條線一條線地依序顯示，使用者必須要等到圖形下載完後才能看到完整圖片，圖檔愈大就要等待愈久。 而交錯顯示則是以相隔八條線的方式跳著顯示，所以圖形會像打開百葉窗一樣(依瀏覽器處理方式可能會有所不同)，即可讓使用者在圖形未完全出現前，先對圖案有個概念，但檔案相對會比較大。

交錯適不適合用於製作 GIF 動畫，會有鬼影殘留的現象。

另外再 GIF 89a 規格中可以儲存透明背景、動畫效果，是其特色。

JPG靜態影像壓縮格式

JPEG(Joint Photographic Experts Group) 圖檔，又稱 JPG 檔，適用於儲存 24 位元全彩影像，但不支援透明或動畫。JPEG運用壓縮愈[算法可以將影像資料壓縮成數十分之一的大小，但壓縮比越高影像耗損也越大，影像會越失真。多數影像編輯軟體都可以調整 JPEG 的壓縮比值，一般壓縮比10左右比較無法分辨出與原先的差別。

JPEG 雖好用但由於他的破壞性壓縮，應避免重複壓縮，過度的破壞會造成影像的品質越來越差。

JPEG 格式:

• 標準 JPEG 格式 : 此類圖檔在網頁下載時只能由上而下依序顯示圖片，直到圖片資料全部下載完畢，才能看到全貌。

• 漸進式 JPEG 格式 : 此為標準式的改良版，可以在網頁下載時，先呈現出圖片的粗略外觀後，再慢慢地呈現出完整的內容(像是 GIF 的交錯顯示)，漸進式也比標準式檔案來得小，所以可以多用這種格式。

•  JPEG2000 格式 : 壓縮品質更好，並可改善無線傳輸時常因訊號不穩定而造成馬賽克及位置錯亂的情況。具有 Random Access 特性，可讓使用者先從伺服器下載 10% 的圖檔資料，在模糊的圖檔中找到需要的部分後，再重新下載部分資料即可，可大幅縮短時間。

PNG可攜式網路圖像格式

PNG(Portable Network Graphics) 壓縮影像不會失真，可儲存 48 位元的色彩影像，比 JPEG 的 24 位元高，像素色彩也可有 256 種不同的透明度選擇，可讓圖像在任何背景上，看不到接縫，改善 GIF 只能有透明或不透明的兩種選擇，與 GIF 檔描邊不佳的問題。

PNG 格式跨平台的影像亮度控制，可讓影像在不同的作業系統顯示出相同的效果，不像 GIF 擋在不同的作業系統上顯示出的畫面會跟著不一樣，所以 PNG 格式特別適合在網路環境流通。

PNG 因影像壓縮不失真，所以檔案會比 JPEG 大。

----------------------------------------------------------
圖檔適用 : 

GIF (讀取速度快)
icon圖示、圖片無漸層、圖片須透明背景、GIF動畫

JPEG (讀取速度中)
全彩照片、圖片有漸層

PNG (讀取速度慢)
網頁介面、圖片需漸層與透明的背景

(參考引用)  關於JPG‧GIF‧以及PNG  http://ppt.cc/gBdU