不論個人或是品牌,都需要讓網站造訪者快速暸解你的歷史發展,時間軸年表是一個常見且好用的表示方法。利用Pug(HTML)、Sass(CSS)及Vue.js製作出一個屬於你的動態時間軸年表吧!
繼續閱讀
D3.js工具可以把大筆的資料視覺化呈現於網頁上,本篇文章利用淺顯易懂的解說,一步步寫出如同Google日曆般的日常生活作息方塊圖。
繼續閱讀
利用p5.js製作出變形的同心圓動態,沒有特別的創作點子時就隨意調整、利用不同的變數增加變化,終究會等到那個靈光一閃,增加許多畫龍點睛的細節,打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》
繼續閱讀
需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。下集將便利貼牆美化、功能變得更完善,更連結firebase即時資料庫,再多張便利貼也不怕。
繼續閱讀
需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。
繼續閱讀
寫網頁的時候,單看sass變數的程式碼,會不知道色碼是不是合適的嗎?老闆帶你一小時就能利用Vue.js快速建立好視覺化色票卡小工具。文章會從一開始雛型的設計稿發想,一步步教你如何完成工具。
繼續閱讀
利用p5.js程式一步步創作出會發光的水色星球粒子,並且增加弧形軌跡、連線、外圍刻度尺規等細節,讓整件作品完整且耐人尋味。
繼續閱讀
身為台灣人可能沒親眼看過龍捲風,但也大概它知道長甚麼樣子,威力又有多強大。今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片。
繼續閱讀
Creative Coding並沒有你想像中的複雜,本篇文章將循序漸進地帶領你用p5.js慢慢畫出會動的機器人,並使用時間參數及亂數大量複製,加上與滑鼠的互動,成為一幅可愛的互動藝術作品。再加碼收錄老闆於直播時的Q&A,邀請你一同進入互動藝術創作程式的世界。
繼續閱讀
上一篇中,老闆利用三角函數幫 DOM 做 CSS 的絕對定位,這次我們雖然也是使用三角函數,但是改使用 canvas 在網頁上繪圖,製作科幻效果的時鐘。
繼續閱讀