超夯!視差捲軸動畫大解密! 3月 31 2014 小y 前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦! 登登登!傳說中的~視差動畫! 設定你的視差捲軸動畫 先構思好動畫的進行方式,視差故名思義就是景物因遠近不同造成視線內移動速度的差異, 最常見的例子是在坐車時,距離較近的建築物很快從窗前經過,遠方的山卻看不出來有移動, 因此本文前面展示的範例就是示範如何處理遠、中、近不同距.....深入了解
瀏覽器的預設 File Input 不好用!我想自訂美觀實用的照片上傳元件怎麼辦? 3月 24 2014 小y 接續前一篇介紹 Canvas 刮刮樂的文章, 本篇介紹的是去年九月份 Firefox OS 讓你盡情享受每一刻 活動的照片上傳作法。 有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見, 它的外觀光用 CSS 來設定樣式也救不了,而且上傳圖片沒有前端預覽很不直覺。 幸好可以搭配<label>元素改變表單元素外觀,以及新的 FileReader API 以在上傳前預覽.....深入了解
一起動手做吧!用迷你積木拼出一隻小火狐 12月 24 2013 小y 難得破例不講技術,耶誕節快到了,應該要來點輕鬆的。 狐迷們,今天我們一起用積木來做一隻小火狐吧! 首先要準備的積木材料如下圖: 從頭到尾分解步驟 底下開始詳細的圖文分解步驟,只要一步步照著做,很快就可以完成你的積木小火狐囉! 1. 首先照上圖把小火狐的頭組裝起來,注意第四步最左邊的方塊底下要裝鼻子(如圖 3 ), 所以不要讓底部的卡榫擋住中間,否則鼻子會裝不上去。 .....深入了解
網頁上也能做刮刮樂!運用 HTML5 canvas 合成功能 12月 13 2013 小y 我就先不賣關子,底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看,試著瞭解裡面的程式腳本,或是 fork 來改改看。 有興趣但看不太懂 code 的話, 就跟著本篇文章的介紹帶你入門吧! 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁(註 1), 應該很好奇一開始的刮刮樂是如何做到的吧? 在研究該如何實作這個功能的時.....深入了解
想學 Python/Django? 就從 Mozilla 網站專案開始吧! 7月 08 2013 小y (圖片來源:radiobread) 六月的時候 Askeing 大大介紹了 Python 開發好幫手 - virtualenv ,如果你剛好是 Python/Django 的新手,能照著 Askeing 的解說順利地完成 virtualenv 安裝使用,那麼這篇文章可以給你一個自己學習建立 Django 專案的起點。 為什麼要學 Python? 如果你還不知道 Python/Django 是什麼,.....深入了解