最近閱讀的一些資料給大家分享:包括視差滾動,虛擬機安裝fedora,sublime text2等等

一、最近在學習linux,當然得自己裝了linux系統,我在win7下通過虛擬機安裝了fedora.我也是個菜鳥,自行百度,谷歌,幫你搞定。

虛擬機使用的是:vmware,這個直接百度就能查到。

fedora的下載地址:http://mirror.karneval.cz/pub/linux/fedora/linux/

具體的安裝方法,請參考:1.http://wenku.baidu.com/view/7894a95677232f60dccca101.html

2.http://wenku.baidu.com/view/775820f74693daef5ef73df2.html

二、視差學習,最近視差網頁實在太火,不研究下你都不好意思,對不對?

1.何爲視差?

     1.1 解釋:http://baike.baidu.com/view/230225.htm?subLemmaId=230225&fromenter=parallax

1.2 定義:視差就是從有一定距離的兩個點上觀察同一個目標所產生的方向差異。從目標看兩個點之間的夾角,叫做這兩個點的視差,兩點之間的距離稱作基線。只要知道視差角度和基線長度,就可以計算出目標和觀測者之間的距離。

     2. 構成元素

     2.1 動畫效果:包括元素運動軌跡,以及視差效果設計

    參考網站:http://www.webapptrend.com/2012/03/2150.html

       2.2 web字體

        四十種web字體組合:http://www.oschina.net/news/24609/40-best-typeface-combinations-in-web-design?from=rss

       參考網站:http://newhtml.net/tag/%E5%AD%97%E4%BD%93/

     http://www.fontsquirrel.com/fontface

    http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html

       3. 實現方法

    3.1 利用css3屬性,multiple-background,http://www.w3cplus.com/content/css3-multiple-backgrounds

             用純css3 transition 實現背景圖滾動:http://www.paulrhayes.com/experiments/parallax/   

             CSS3中的Transition屬性詳解: http://www.cnblogs.com/gaoxue/articles/2287319.html

              transform詳解:http://www.w3cplus.com/content/css3-transform

        3.2 利用傳統的javascript

     4. 範例

       4.1.http://lostworldsfairs.com/atlantis/ 這個網站是模擬了電梯的下降過程,鼠標滾動過程中,電梯是position:fixed,對背景進行分塊處理,然後主要靠背景圖片的變換來造成的視差。

4.2.jQuery實現:http://www.ianlunn.co.uk/plugins/jquery-parallax/,原理:http://www.ianlunn.co.uk/blog/code-tutorials/recreate-

nikebetterworld-parallax/

    4.3.水平方向的視差滾動:http://www.sequencejs.com/themes/sliding-horizontal-parallax/

4.4這個網站例子很多:http://www.cnblogs.com/lhb25/archive/2012/09/13/jquery-parallax-and-scrolling-effect-plugins.html

4.5. 垂直方向滾動的很多:http://www.iutopi.com/

4.6. 這個網站挺好,簡單易學:http://www.css88.com/tool/css3Preview/Transform.html

4.7. QQ瀏覽器下載頁:視差角度是傾斜的,http://browser.qq.com/index_m.html

4.8.nike網站,水平和垂直的視差都有:http://www.nike.com/jumpman23/aj2012/

4.9.新出的10個炫酷的視差網站:http://www.alibuybuy.com/posts/76446.html

5. demo  利用squence插件做了一個demo

5.1.demo地址:利用jquery插件做了個小demo,按左右方向鍵控制每一屏的翻轉:http://hutaoer.github.com/templates/Sequence-master/themes/parallax/

三、sublime text 2

1. 入門技巧:http://lucifr.com/139225/sublime-text-2-tricks-and-tips/?replytocom=122286

2. windows下的快捷鍵:http://istyles.blog.163.com/blog/static/1811003892011828111418654/

3. mac下快捷鍵:http://lucifr.com/139235/sublime-text-2-useful-shortcuts/

4.安裝常用插件:http://www.imququ.com/post/i_love_sublime-text-2.html 

發佈了57 篇原創文章 · 獲贊 5 · 訪問量 17萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章