【互動網頁程式教學】用 GSAP 製作直播互動動態效果
本篇教學帶大家使用 vue.js, vue-cli, gsap 製作模擬 facebook 手機版的直播畫面,連結視訊鏡頭中使用者的畫面,並加上留言區塊以及可以點擊的表情符號等功能。跟著老闆一起,動態網頁製作好簡單。
文章總表
共 91 篇,依發表日期由新到舊。
第 3 / 5 頁
本篇教學帶大家使用 vue.js, vue-cli, gsap 製作模擬 facebook 手機版的直播畫面,連結視訊鏡頭中使用者的畫面,並加上留言區塊以及可以點擊的表情符號等功能。跟著老闆一起,動態網頁製作好簡單。
在創作的道路上我們難免會遇到卡關的時候,這次帶大家欣賞互動藝術程式創作入門課程中同學們的作品,看完別人的創意之後,你是否也躍躍欲試了呢?
《擴增實境AR系列》單元文章讓Chia編帶你理解AR,挖掘許多利用擴增實境技術的作品,而且更棒的是,邊閱讀的當下就可以拿出你的手機,親身體驗!第一集帶你走入高美館的十四幅典藏畫作中,一窺畫作背後的故事。
NFT熱潮燒進台灣!本篇文章帶你了解NFT幾個展售平台、認識國際知名的藝術家,並且聚焦新媒體&生成式藝術家吳哲宇他因為作品被剽竊而意外走紅的來龍去脈,快跟著老闆一起前進creative coding的新藍海市場!
相信大家對於亞馬遜都不陌生吧?就是當你看到海外的酷東西,對錢錢說聲抱歉我需要這個然後點開下單的那個網站,過幾天帶著微笑A到Z的包裹就會出現在你家門外,裡面裝著化成快樂形狀的錢錢。除此之外,你聽過亞馬遜的雲端系統Amazon Web Services (AWS) 嗎? 「下單我會,但你說的雲端系統是什麼呢?」
本篇記錄創作<夢幻鳥>這件作品的過程,利用p5.js在短短的時間內創作出繽紛多彩、眼睛跟著滑鼠游標轉的夢幻鳥,看著他不斷地動,好像趴著在看水族館裡的魚一樣,心情也會跟著雀躍起來唷!
2021年臺北白晝之夜將於10月2日星期六下午六點開跑,一直到隔天的早上六點。白晝之夜的活動起源於哪裡?臺北又是新的活動嗎?那天晚上大家都不睡覺,那是要幹嘛?就由Chia編帶你了解今年的臺北白晝之夜活動,無論實體或是線上都可以參加,或是加入墨雨設計的Discord讓大家陪著你嗨吧!
本次創作直播內容透過 Canvas 物件,將網頁當作畫布,繪製不同的圖形,完成模擬偵測敵人的雷達機介面;運用三角函數概念,以及模組化程式,簡單製作出動態的網頁,詳細的步驟解釋,無論有沒有基礎,都能輕鬆跟著說明完成,剩下的就由你自行發揮囉!
為響應日本的一群Creative Coder在Processing Community Day的社群串聯,扮起虛擬的花火大會,我們也來利用p5.js,結合粒子系統、漸變顏色甚至是聲控模組,一起在夜空中創作出絢麗的煙火吧!
AR系列第一集帶大家詳細了解AR現今的不同用途,除了抓寶之外,也有許多日常妙用、社群濾鏡一定不陌生,又或者是品牌想做行銷和廣告,甚至是藝術家拿來實驗與創作、美術館用於策展,快來了解AR有哪些運用吧!
你多久沒鍛鍊英文了呢?這次直播使用HTML(Pug)CSS(Sass)以及Javascript(Vue.js)來完成一個練習2000字英文單字的小互動遊戲網頁,難度適中,尤其適合剛開始學習Vue.js的新手,無論是跟著步驟逐步操作,或是聽老闆的影片都能快速完成。
手機裡的動態月曆.只消一指就可以增加或是刪除行程,有想過要怎麼在網頁上實現嗎?老闆利用簡單的動態網頁範例和步驟解說,帶你一步步踏進Vue.js的世界。
小時候都玩過圈圈叉叉的遊戲,隨手畫個井字就可以與玩伴鬥智,這次我們要利用Pug、Sass及Vue.js製作出這款動態小遊戲網頁啦!
不論個人或是品牌,都需要讓網站造訪者快速暸解你的歷史發展,時間軸年表是一個常見且好用的表示方法。利用Pug(HTML)、Sass(CSS)及Vue.js製作出一個屬於你的動態時間軸年表吧!
本篇文章以簡短篇幅解釋AR、VR、MR、XR這四個R的實境科技的不同以及相關案例,除了提供簡單的區分方式,從此不會再搞混之外,也希望藉此鼓勵多加嘗試不同的作品體驗。
D3.js工具可以把大筆的資料視覺化呈現於網頁上,本篇文章利用淺顯易懂的解說,一步步寫出如同Google日曆般的日常生活作息方塊圖。
利用p5.js製作出變形的同心圓動態,沒有特別的創作點子時就隨意調整、利用不同的變數增加變化,終究會等到那個靈光一閃,增加許多畫龍點睛的細節,打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》
需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。下集將便利貼牆美化、功能變得更完善,更連結firebase即時資料庫,再多張便利貼也不怕。
需要發想靈感、紀錄個人代辦清單,或和他人討論嗎?製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁,多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。