2014年7月20日 星期日

視差


回在留言有點可惜,貼在這邊
視差常用效果plugin及實做文章以 羅右鈞 問題為例,欲達成網站效果http://pixelcave.com/demo/proui-frontend/index_parallax.php
.視差滾動現成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/
怎麼找資源的話,其實就是多看http://www.cnblogs.com/lhb25/
之類的,或是用特效或關鍵字去找,例如parallax scrolling,翻一翻看一看收集一下,久了就很多啦

2014年7月9日 星期三

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


整齊 ~