這是一份在離職前籌備好的小分享,一直以來想分享平日我個人的開發習慣給朋友們,算是多年的經驗慢慢累積一套屬於自己的系統,這是平常在網路上找不到的教學,覺得有這樣的交流是很好玩又很實用的!☺️

然後想說可以用一個創意網站案例來分享,既可以實作開發流程,又可以順便學習 Canvas 2D,還兼理解超級酷的創意網站是怎麼做的,是不是一舉三得呢??! 😂😂😂

在開始說明之前,我想先貼一下之前分享過的 infinite Loop 創意網站的範例~

當然可以直接參考之前的簡報 2019 網頁設計與前端技術分享,我記得第一次看到這種網站時,我實在太驚呼了~這根本神的宇宙觀嘛!!!因為非常喜歡這種創意思考,所以之前有搜集了這些網站,不過數量實在是不太多,畢竟要畫很大量的插畫是很累人的(?!),哈哈,於是在一個機緣下,發現 Adult Swim – Zoom Quilt 的網站原始碼是公開的!!太佛心了~~~ ❤️所以我便開始拆拆解解地整理這些程式碼,以便之後想要做這類型網站的人理解。

原本為了這個小分享做了一個漂亮簡報,所有的教學都在裡面,因為程式的教學實在很複雜,加上懶惰的 Domo 不願意再重打一份 😂(欠揍,所以希望大家自行欣賞這份簡報,能夠理解這種網站玩法,這份簡報主要是給前端同事們看的,以及部分想了解前端程式在幹麻(然後有多複雜、多難寫… w)的創意或設計們,因此大體上我還是講了整個開發概括,至於程式細節,請洽 Domo 本人詢問吧!😆雖然我覺得寫程式的聰明人類一定能理解,如果還是有困難… 就請再洽詢我本人吧~ 😂

我一共做了三種有階層的範例和步驟以便大家理解,分別是:

  1. 單一個 infinite Loop 網站,配合各種套件開發,並整理成線上打包的檔案:demo
  2. 前端程式朋友來說,還可以把它再進化,自成一套模組插件,方便未來使用或維護:demo
  3. 創意設計朋友來說,同樣一個網站形式,其實還也可以玩出多種創意(當然我是非常懶得做素材的人… orz 裡面的圖片素材幾乎都是來自網路上的圖片喔!):demo

※因為覺得這三個檔案都沒有壓縮過,就請直接摳上面的程式碼和檔案吧!(讓我省一點空間用 😆

教學簡報在這裡,ㄊㄚ ㄉㄚ !

如果有路過的大大覺得有更好的方式或是願意分享自己的開發習慣,也可以留言在下方唷~ 👋