商品已停售
線上課程｜動畫互動網頁特效入門（JS/CANVAS）
1. 透過LINE購物進入蝦皮後禁止再透過蝦皮直播下單，避免訂單認列異常
2. 請務必「清空」蝦皮購物車，再透過LINE購物連結至蝦皮商店進行購買 ；先把商品加入購物車，再從LINE購物連結至蝦皮結帳，將無法獲得點數回饋。
3. 請避免連續下單，若您完成交易後，想下第二張訂單，請重新從LINE購物連結至蝦皮商店進行購買
4. 電子票券及繳費服務類別：回饋０％。
5. 請留意，蝦皮超市內的商品（蝦皮超市、蝦皮直送美妝、蝦皮免運直送）不隸屬於蝦皮商城，點數回饋請依照「蝦皮超市」商店頁為主。
6. 蝦皮商城之訂單適用於部分點數紅包，規範請依該紅包頁說明為主。
7. 點數回饋將依照蝦皮提供扣除折價券、運費與蝦幣後之最終金額進行計算。
8. 同一商品品項(即便不同尺寸規格)，皆會計入同一筆返點上限進行計算
9. 用戶需於同一瀏覽器進行交易（若自動跳轉 APP，請在 APP交易）。
10. 若使用不同物流或付款方式，將拆分成不同筆訂單編號發送通知。
11. 若使用折價券折抵，可能會有攤提折抵導致訂單金額些微落差
12. 蝦皮會將LINE的導購跳轉紀錄與蝦皮的會員ID進行綁定，若後續七天內未透過其他媒體來源導入蝦皮官網，則七天內於該蝦皮帳號下訂的首筆訂單會被蝦皮認列為該LINE用戶導購跳轉時所成立之訂單。
13. 若同一用戶使用一個以上蝦皮帳號透過LINE購物進行導購，將可能導致無法收到導購通知，亦可能無法收到點數，再請留意。
[注意事項]
1.如導購途中用戶由網頁版(電腦版/手機版網頁)切換為 App 會造成追蹤中斷而無法進行 LINE Points 回饋
2.若購買過程中關閉蝦皮APP，則需重新透過LINE購物前往蝦皮商城，否則無法進行LINE POINTS 回饋。 / 3.如用戶先前往蝦皮商城將商品加入購物車，後續透過LINE購物前往至蝦皮商城將購物車結清，此方案將不列入 LINE Points 回饋
4.若因系統異常無法追蹤訂單，致使消費者無接收到點數回饋，蝦皮保有更改條款與法律追訴之權利
5. LINE購物商品價格若與蝦皮賣場實際價格有異，以蝦皮賣場價格為準商品描述
Hahow 好學校｜線上課程📖
此商品屬「例外商品類別」，不適用七天鑑賞期法規非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供
📍課程序號發送及兌換詳情請見賣場介紹
課程資訊
【 課程名稱 】：動畫互動網頁特效入門（JS/CANVAS）
【 課程簡介 】
網頁特效入門課程，教你製作網頁特效、動畫，與遊戲製作原理。從零開始快速入門互動網頁、JS 與繪圖實戰範例，並學習 Vue.js 整合前端網頁，自己也能輕鬆製作網頁特效與動畫。從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，幫助你實踐心中的想法。
【 課程大綱 】
章節一：課程介紹與導讀
單元 1 - 動態網頁的過去與未來
單元 2 - 課程路線與學習方式
單元 3 - 使用 Markdown 與記錄學習筆記
章節二：HTML/CSS 快速入門
單元 1 - Codepen 平台介紹與基礎設定
單元 2 - html 中結構與元素
單元 3 - css 調整外觀與 class/id 概念
單元 4 - css 的內外距
單元 5 - css 的定位與排列
單元 6 - css 定位與排列實作
單元 7 - flexbox 排版入門
單元 9 - pug / sass 縮寫入門
單元 10 - sass 管理變數與模組
單元 11 - sass 迴圈與內容
單元 12 - css 動畫基礎與滑鼠互動
單元 13 - css 製作影格動畫
單元 14 - 在網頁寫一座美麗城市 Part2 - 架構與上色
單元 16 - 做一個摩斯密碼翻譯器
單元 12 - 陣列的批次操作(map/filter/foreach...)
單元 13 - AJAX 與資料處理
單元 14 - 使用者輸入與表單
單元 15 - 物件導向入門 概念篇
單元 16 - 物件導向入門 繼承篇
單元 17 - 物件導向入門 實作篇
單元 18 - 記憶方塊 Part. 2 Blocks 物件
單元 20 - 記憶方塊 Part. 3 Game 遊戲物件
章節四：動態網頁 Workflow 概覽
單元 1 - 動態網頁的形式與應用
單元 2 - 設計思考發想與繪製草稿
單元 3 - 網頁結構與內容 UX 規劃
單元 4 - UI視覺設計與元件
單元 5 - 網頁的切版與設計交接
章節五：Canvas 與特效動畫
單元 1 - 繪圖基礎語法 與動畫原理
單元 2 - 畫布的座標系操作
單元 3 - 物理基礎(速度 / 加速度)
單元 4 - Vector 向量的概念
單元 5 - 製作橫衝直撞的貪吃蛇
單元 6 - ES6 類別定義與模板製作
單元 7 - 物件導向結構 粒子篇
單元 8 - 極坐標的基礎概念
單元 9 - 三角函數入門 - 繪製多邊形
單元 10 - 三角函數的波形與軌跡
單元 11 - 進階繪圖與遞迴
單元 12 - 做科幻風格的網頁碼表
單元 13 - 速度曲線與動畫控制
單元 14 - xn--agar-p85f6us5x1kgm31a570becza10crz3c6joori.io（上）
單元 15 - xn--agar-p85f6us5x1kgm31a570becza10crz3c6joori.io（下）
單元 16 - 結合網頁元件與動畫製作動態唱盤
單元 17 - 結合重力與物理做小朋友下樓梯 (上)
單元 18 - 結合重力與物理做小朋友下樓梯 (下)
單元 19 - 結合物理與音效製作互動音樂弦
單元 20 - 結合陣列與地圖製作小精靈(上)
單元 21 - 結合陣列與地圖製作小精靈(中)
單元 22 - 結合陣列與地圖製作小精靈(下)
單元 23 - 結合設計與繪圖製作太空侵入者
章節六：Vue.js 前端資料框架
單元 1 - Vue.js 前端資料框架- 簡介與資料代換入門
單元 2 - Vue.js 前端資料框架- 條件顯示與資料展開
單元 3 - Vue.js 前端資料框架- 動態屬性與視覺樣式
單元 4 - Vue.js 前端資料框架- 事件觸發與使用者互動
單元 5 - Vue.js 前端資料框架- 計算屬性與監看變化
單元 6 - Vue.js 前端資料框架- 使用 Vue.js 製作動態選電影介面
單元 7 - Canvas / Vue.js 與 遊戲結合- 製作太空侵入者圖像產生器
章節七：加碼達標系列
單元 1 - Vue 本機開發環境架設
單元 2 - Vue 元件使用與專案建置(上)
單元 3 - Vue 元件使用與專案建置(下)
單元 4 - Vue-router / Vuex 使用介紹
單元 5 - TimelineMax 活用時間軸與 SVG 動畫
單元 6 - TimelineMax 活用時間軸與 SVG 動畫 - 收音機實作
單元 7 - D3.js 視覺化資料的利器 (入門)
單元 8 - Three.js 製作 3D 特效網頁 (入門)
單元 9 - Three.js 實作範例-原子轉轉
章節八：課程總結
單元 1 - 課程總結與感謝
【 老師介紹 】：吳哲宇
墨雨設計創辦人，紐約大學進修整合數位媒體碩士。互動設計師、藝術家、講師、全端工程師，引領超過 20,000 位學生進入互動網頁與生成藝術開發的大坑。
【 需要準備的工具/軟體 】
一台電腦、強韌不會斷線的網路、網頁瀏覽器（Chrome 為佳）。
【 需要具備的背景知識 】
不需先備知識；若有設計、網頁程式基礎者為佳，能透過案例快速掌握整合的能力。
【 上完課後，學生可以學到並做出的東西 】
- 將 HTML/CSS 融會貫通，輕鬆入門，順暢進階
- 從零紮實入門 JavaScript 程式與動畫基礎到進階互動
- 入門 Vue.js 掌控資料與顯示的前端框架 - 整合應用
- 整合應用網頁技術與數學原理，完成有設計感的互動性網站。
【 哪些人適合這堂課？】
1. 學生：不論是無網頁基礎，或是正在學習網頁技術，能快速掌握整合應用能力。
2. 設計師：想要動手做出想像中的網頁，並想嘗試在網頁上更彈性的表現與繪圖。
3. 其他：網頁可以作為一種快速，且能跨平台的簡報，例如：demo 或是黑客松成果展現。