Card Maker

## 前情提要常常看到好看的卡片效果，今天我們就來寫一個hero section吧！但是……等一下什麼！你說你已經看到標題！沒錯！已經來到前端動手玩創意系列的第十篇，我們累積了那麼多，特別的第十篇才不要帶你寫「卡片製作」，我們要來搞一個card maker，呼應了大前端時代模組化的風格（๑ • ‿ • ๑ ）。到底什麼是製作你的製作呢？我們來看看效果： ## 效果預覽 ![](https://i.imgur.com/zrr5CiU.png) 沒錯就是這樣子，可以輸入圖片網址、讓人看不懂的日文（我也不懂那啥意思ＸＤ）就可以跳出一張很有感覺的hero section！甚至還寫了調整圖片的移動軸： ![](https://i.imgur.com/07GBgsa.png) 還可以下載！？這真的是太讚了，完全就是實現動手玩創意的絕佳精神呀～～ ## 程式碼內容 ``` Card Maker

Image URL: Text:

亮度飽和度大小

``` ## 觀念筆記目前代碼的部分canvas還沒轉好，晚點應該會修正為用html2canvas套件來抓。不過可以先玩玩看卡片製作的部分唷！ ## 心得很有趣的小項目，其實學前端什麼專業知識、構造函數、模組那些都太無聊了，講真的如果只是自己做開心的，那用什麼技術與概念又何妨呢是吧？人生就是輕鬆玩樂不需要一直給自己找碴，生活還不夠苦嗎XD 前端最有趣的就是你怎麼寫，畫面就怎麼回饋給你，比這個人生online還要好操控多惹```d(`･∀･)b``` 就當作遊戲來跟著這個系列探索世界吧！！請繼續關注，跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)