點選上面這張圖片就可以看到效果~ 這是延續之前自己寫過的 JQuery 清單排序特效原始模型， 所修改出來的 plugin， 修改的地方其實不少，包含了標籤與相關的篩選機制， 而這個 plugin 的版用起來非常方便， 可以應用的地方也很廣，例如相簿、秀圖篩選.....
點選上面這張圖片就可以看到效果~ 這是之前一直很想嘗試的滑鼠效果， 所以就做成了一個以後方便套用的 plugin~ 套用與設定的方式很簡單， 只要用一個 list 就可以做出來模擬視差的立體感， 算是滿有趣的互動效果~ 這個效果套用在 ul 上，只有一個地方需...
點選上面這張圖片就可以看到效果~ (不過限用 Chrome 或是 Safari) 這是已經存在很久的 webkit 的 css 濾鏡， 直接整理出來做個記錄，以後自己要找也比較好找~ 雖然效果很炫， 但是一直到目前為止都還只有 webkit 核心的瀏覽器支援， ...
點選上面這張圖片就可以看到效果~ 這也是在 flash 中很常見到的效果， 同樣的利用 jquery 來呈現， 滑鼠在圖片上按住 0.5 秒後，原圖就會出現， 再壓住 0.5 秒後又會回復模糊的圖片， 比較特別的是你可以自己使用自己做的模糊圖片， 或是使用程式幫...
點選上面這張圖片就可以看到效果~ 這是一個文字特效的 plugin， 之前在玩 flash 算是自己滿熟練的一個效果， 但現在不用 flash 了就只好用 jquery 來做， 也當作字串符、字串以及定位的練習， 同樣的，因為我自己是前端設計師， 這套 plug...
點選上面這張圖片就可以看到效果~ 這是之前做過 sortTableTd plugin 的第二版， 主要因為發現了之前 plugin 的一個大問題， 是自己沒有測試到的大問題：數字與字串排序行為不同， 這次花了滿多時間去了解數字和字串排序的不同， 舉例來說，1,11...
點選上面這張圖片就可以看到效果~ 其實下拉式選單對我來說並不難， 大概半小時就可以用 css 做出一組， 但要做成方便修改的 plugin 又是一回事了， 這個 plugin 我整整做了兩天才做出來， 在設定自由度與彈性上做了滿大的開放， 應該可以滿足大部分前端...
點選上面這張圖片就可以看到效果~ 之前我有單純用 css 做出樹狀清單的原始模型， 這次花了些時間，把它轉換成 plugin， 這樣一來對於前端的設計者而言， 做出一個 treeview 就不用自己在那邊寫 css， 可以直接套用就會產生效果， 對於後端程式設計...
點選上面這張圖片就可以看到效果~ 這是一個我自製的簡單表格排序 plugin， 說起來簡單其實背後的運作也是頗複雜的， 複雜的在於要讓所有的欄位不需要命名且互相進行連動， 光是這個邏輯觀念我就想了整整一天， 不過可以套用在任何表格上喔~ 在不透過資料庫的狀況下...
點選上面這張圖片就可以看到效果~ 這也是我設計的 JQuery plugin 針對表格做整個欄位的拖曳效果 滑鼠點選 最上方 title 的部分按住不放一秒後 就可以開始進行拖曳排序 屬性的部分也做了滿大的自由度開放 表格的所有屬性幾乎都可以設定 (當然合併欄...
點選上面這張圖片就可以看到效果~ 這是我自製的 jquery plugin， 主要對清單做拖曳的互換排序， 並且還針對不同流覽器對於 margin 的定義不同進行瀏覽器判斷， 要不是我現在還不熟悉 cookie 的寫法， 就應該可以做出記錄位置的效果了， 需要套...
點選上面這張圖片就可以看到效果~ 這是最近在練習的一個清單排序效果， 主要可以應用在相簿、icon 或是一些排序篩選上， 當中也使用了類似 JSON 的寫法， 這樣一來不僅可以結合 AJAX， 再修改上也更為直覺方便~ 其實這個效果的重點在於"定位...
點選上面這張圖片就可以看到效果~ 之前玩 dropbox 獲取空間闖關遊戲時看到了九宮格效果， 想說就利用 JQuery 的簡單動畫效果來試做， 做出來果然效果還不錯， 也當作一次 div 定位的練習~ 其實整體程式並不困難， 主要有兩個重點， 第一：製作一個...
點選上面這張圖片就可以看到效果~ 這是之前花了兩天所研究出來模擬 Mac 的效果 雖然網路上有不少模擬相關效果的 plugin 但套用起來總是不太順手 於是就從相關原理著手進行程式碼的編寫 總算是做出來一個像樣的效果~ 不過我的做法只利用了相對位置來判斷大小 ...
點選上面這張圖片就可以看到效果~ 這是偶然間發現的一個很酷的效果 通常網頁捲軸下拉的時候 頁面上的東西不是固定不動，就是所有一起往上移動 這個效果主要就是造成物件不同步的移動 而產生帶有透視感與立體感的背景特效~ 其實程式碼不難 重點還是在如何讓頁面上的東西...
點選上面這張圖片就可以看到效果~ 這是今天練習的一個特殊效果， 利用 html5 對於圖片上每一點像素的處理， 將彩色的圖片轉換成黑白的圖片， 其中用到的程式其實不難， 難是難在將圖片上每個像素轉換為矩陣的觀念與原理~ 這個網站 對於圖片像素轉換有相當詳細的介紹...
點選上面這張圖片就可以看到效果~ 最近在練習html5中練習到一個不錯的技巧， 就是利用二維矩陣來產生圖片， 而製作出來的圖片又可以利用html5的方式輸出成jpg或png， 或是進一步製作動畫或是遊戲， 算是一個非常實用的技法~ 原理其實就是把一張具有固定長...
點選上面這張圖片就可以看到效果~ 這是模仿之前大海嘯日本衛星空照圖前後對照圖的一個效果 在網路上也有相同的 plugin 可以下載 但是想說必須了解真正的原理 就用 jquery 做了一個ㄎㄎ 白人黑人變變變，還滿有趣的吧~ 原理其實不難 最主要還是在CSS...
點選上面這張圖片就可以看到效果~ 這是使用 javascript 對自由落體做的一個模擬 原本想使用運動定律的寫法 s=v0t+1/2gt 平方 但是測試出來的效果不如預期來得好 所以就改用 sin 和 cos 的做法來進行加速減速 也產生了滿不錯的效果~ 在...
點選上面這張圖片就可以看到效果~ 這是利用 SVG 中 path 繪製的扇形， 與 HTML5 的繪製方式有滿大的差異， 當然如果不想用寫程式的，還想直接看到效果， 可以使用如 illustrator 等向量繪圖軟體來產生 SVG， 接著再使用如 Dreamwea...
Popular Posts
-
小喬：我要你答應我，永遠都不要讓他當"站"馬！ 小喬：萌萌，站起來！ 萌萌：嘶~~~~ 吼~~~~ 小喬：他好像要說什麼呀？ 諸葛亮：你到底要我站，還是不站呀？你搞的我好亂呀！ 周瑜：這馬話你也懂？ 諸葛亮：略懂... 魯肅：因為他是豬... 周瑜：我是魚..... -
這是一個之前看到的效果現在分享給大家 其實還滿容易做的 不過裡頭卻有幾個必須要注意的地方 開新檔案，背景黑色，新增白色文字 將文字與背景結合，複製到最上方 變型→逆時針旋轉90度 濾鏡→風格化→風動效果 執行兩次風動效果(可用 ctrl+f 重複執行動作) 濾鏡→模糊→高斯模糊 ... -
這篇要介紹用筆刷的方法 作出字在光線上的感覺 開新檔案，新增圖層，背景設定為黑色 將背景隱藏起來，點選圖層1 選擇方形筆刷(大小自訂) 在圖層1上畫上一條垂直的線(按住shift可以畫直線) 編輯→定義筆刷預設集 設定筆刷名稱 接著開啟筆刷面板，點選剛剛新增的筆刷 將筆刷調小一點... -
這篇我們要利用"彩色網屏"以及"遮色片" 來製作醫院用的色盲測試圖效果 開新檔案 新增文字圖層，新增文字 點陣化文字(在文字圖層上右鍵，點陣化文字) 濾鏡→扭曲→漣漪 切換到色版的面板，複製其中一個色版 將複製出的色版調亮(原因後面會講) ...
-
點選上面這張圖片就可以看到效果~ 這是一個我自製的簡單表格排序 plugin， 說起來簡單其實背後的運作也是頗複雜的， 複雜的在於要讓所有的欄位不需要命名且互相進行連動， 光是這個邏輯觀念我就想了整整一天， 不過可以套用在任何表格上喔~ 在不透過資料庫的狀況下... -
第一次接觸Adobe 是在剛上研究所的時候 大三到大五的這段時期 完全是用photoimpact來創作 隨著熟悉的軟體flash和dreamweaver被Adobe買走 我也一腳踏進了Adobe的多媒體世界 趕緊把photoshop給學了起來 緊接著學了Illustrator 後... -
磁磚每一塊都不同顏色，又帶有些許光澤 該如何快速的製作大量的磁磚呢？ 我們就要利用「馬賽克濾鏡」以及「填滿」功能] 可以非常快速的完成大量的磁磚 開新檔案，新增圖層(圖層1)填滿顏色 濾鏡 → 雜訊 → 增加雜訊 → 一般 → 單色 濾鏡 → 像素 → 馬賽克 新開另一個空白檔案... -
最近花了不少時間找到一些周星馳電影中的音樂 這些音樂有些是配樂有些是星爺唱的或其他角色如達叔唱的 以下是我自己整理的大家有需要就自己去看看囉~^^ 功夫： 有出原聲帶 少林足球： 只在日本有出原聲帶 行運一條龍： 1.片尾鄭秀文跳舞：老歌-多少柔情多少淚 2.主題...
