超夯!視差捲軸動畫大解密!

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦! 登登登!傳說中的~視差動畫! 設定你的視差捲軸動畫 先構思好動畫的進行方式,視差故名思義就是景物因遠近不同造成視線內移動速度的差異, 最常見的例子是在坐車時,距離較近的建築物很快從窗前經過,遠方的山卻看不出來有移動, 因此本文前面展示的範例就是示範如何處理遠、中、近不同距.....深入了解

瀏覽器的預設 File Input 不好用!我想自訂美觀實用的照片上傳元件怎麼辦?

接續前一篇介紹 Canvas 刮刮樂的文章, 本篇介紹的是去年九月份 Firefox OS 讓你盡情享受每一刻 活動的照片上傳作法。 有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見, 它的外觀光用 CSS 來設定樣式也救不了,而且上傳圖片沒有前端預覽很不直覺。 幸好可以搭配<label>元素改變表單元素外觀,以及新的 FileReader API 以在上傳前預覽.....深入了解

Gecko Layer 除錯工具: LayerDump & LayerScope

在 Firefox 的 Rendering Pipeline 中,一路從 Layout 到 Layer tree,在 Layer tree 中的每一個 Layer 會依序的畫到螢幕上,所以通常畫面出現問題後(ex. 某個畫面下面剛好少了一個 pixel ),我們會先從 Layer 開始下手從下到上去檢查到底是那一個環節出了問題。 不過 Layer 這麼複雜,有什麼好用的工具可以幫助我們快速的.....深入了解

Gecko 多彩多姿多媒體

自從個人電腦愈來愈普及之後,影音娛樂的應用一直是大家關注的焦點之一。在其中,多媒體的播放功能已經變成基本功能中的基本功能。為了能處理各式各樣的多媒體功能(諸如:錄製、播放、串流、轉換格式、後製處理等),每個平台上幾乎都有設計出一套多媒體框架用來應付各種的需求,像是 Windows 上有 DirectShow 跟 Media Foundation 、 Linux 上有 GStreamer 、 Mac.....深入了解

我也想成為 mozillian!教你如何貢獻到 mozilla code base

看了這麼熱血的影片,想必你也迫不及待想成為個 mozillian 吧?!只要有心,人人都能成為 mozillian,如果坐在電腦前的你是個 developer 那就更適合不過了! 這篇就來告訴你如何貢獻到 mozilla 的 code base。 Step 1:新增 Bugzilla 帳號 首先,你需要新增一個 Bugzilla 帳號。Bugzilla 是一套追蹤 bug 的系統.....深入了解