【分享活動:$100元折價券大放送】活動結束
分享貼文後,並在下方留言「#TweenMax動態特效速成實戰」,將私訊超值折價卷
【回饋學員:超佛心加碼課程內容】點我瞭解課綱
Mike老師加碼教學:「前端框架整合TweenMax (Vuejs、Reactjs)」




 讓綠色超人領你走進動態網頁的二維空間 

HTML、CSS、JavaScript 是網頁的三大要素,而 TweenMax 是專為製作動態網頁誕生的開源工具,它是一款強大的 JavaScript 動畫程式庫,能快速實現 jQuery 撰寫多行才做得出的動態效果,這門課將帶你深入淺出上手 TweenMax。


 訓練思維邏輯  加強二維空間概念與邏輯,領你從平面網頁進入動態式網頁世界

 理論實務結合  從概念講解到組合技應用,每個課程範例將會以實務導入

 獨家課程教材  提供老師自製教學講義,滿滿精華的學習重點大補帖

 打破學習疆界  可隨時隨地觀看課程,並在課程討論區與老師線上互動

   提供原始碼    提供課程範例原始碼,跟著老師動手做



成智遠(Mike),對互動技術與網頁前端抱持者極大興趣的開發者,曾參與超過 60 款網頁、遊戲等大小型專案,同時也是飛肯設計學苑講師,並曾擔任致理科技大學、企業專業技能內訓講師,累積多年實務與教學經驗,熱愛分享自己所見所學的技術,與幫助學生解決觀念與工作上碰到的難解問題。


相關科系學生 

前端設計師

前端網頁工程師

對網頁動態特效製作有興趣者


 ☑︎ 建立動態網頁、二維空間的邏輯與概念

 ☑︎ 學會從零開始製作動態網頁

 ☑︎ 完整瞭解 TweenMax 的使用方式


Q1. 上課前,需要準備什麼?

✔︎ 一台有網路的電腦

✔︎ 原始碼編輯器

✔︎ 會HTML、CSS

✔︎ 具備基礎JS語法知識(例如:變數、事件、function、判斷式、陣列等)

TweenMax是開源的工具,課程中會教你如何下載與安裝

Q2. 我如何操作,才可以學習這堂課程? 募資預購又是什麼意思呢? 

■ 現在只要按下右方的「立即購買」,並按後續步驟操作,就可以成為本堂線上課程的其中一位學員!

① 若在 2018/7/29 (日) 前達到 30 人的目標人數,即會確定開課 ; 正式課程預計在 2018/9/14 (五) 上線 ; 上線後,您就可以無限次數、地點、時間,在 YOTTA 平台上觀看本堂課程!

② 若募資未成功,YOTTA 平台將會於募資結束後,退還全額課程費用。

Q3. 募資預購時間到什麼時候? 

這堂課在 2018/6/26(二) ~ 2018/7/29(日) 開放課程預購,預購期間購課優惠 $999 元。 (2018/7/30 起將恢復原價 $1,600 元)

Q4. 這門課什麼時候開始上課? 

正式課程預計將於 2018/9/14 (五)上架喔!

Q5. 這門課可以看多久? 

購課後享不限次數、永久觀看,可以一直看一直學!

Q6. 可以問老師問題嗎? 

當然!歡迎到「購課問答」詢問 ; 當學習遇到問題時,也歡迎到「課程討論區」與老師同學一同互動。

Q6. 我要如何購買課程呢? 

非常的簡單!在你的右手邊有「立即購買」的字樣,點進去就對啦!

Q7. 目前有哪些付款方式呢? 

目前 YOTTA 提供三種付款方式: 

a/ 信用卡付款 ( (可使用 Visa / Master / JCB) 

b/ 超商代碼付款 (7-11、全家、萊爾富、OK 即可繳費),繳費步驟說明:https://goo.gl/tWafYe 

c/ ATM 轉帳

Q8. 為什麼我已經付款了,訂單狀態仍顯示未付款? 

a/ 選擇「超商」方式付款,金流處理時間需 5~15 分鐘。 

b/ 選擇「ATM」方式付款,銀行金流處理時間需要 1 個工作天,等金流完成入帳後,「訂單狀態」將會轉為顯示「已付款」,再麻煩稍待幾天。

Q9. 請問什麼時候會收到發票? 

當本堂課程募資結束後 10 個工作天,電子發票將會透過 E-mail 方式寄送電子發票給您。

Q10. 我還有其他問題! 

請直接參考 YOTTA 平台操作說明:https://goo.gl/9a8DEh

Q11. 看不到募資影片嗎?


單元

23

預計總長

180分鐘

預計測驗

尚無測驗

  • GSAP 介紹
  • 1 課程簡介 & 什麼是 TweenMax? 試看  
  • 2 開發環境安裝 試看  
  • TweenMax 起手式|網頁態基礎概念
  • 3 語法基本結構與座標轉換 試看  
  • 4 Scale 比例的縮放 與 Easing 試看  
  • 5 CSS 屬性控制 試看  
  • 6 onComplete 動畫結束之後 試看  
  • 7 旋轉補間動畫 試看  
  • 8 Lifecycle 生命週期 試看  
  • 9 Repeat 重複動畫設定 試看  
  • TweenMax 組合技 - 各司其職 jQuery 與 TweenMax|網頁動態整合應用
  • 10 staggerTo 多個物件操作與延遲 試看  
  • 11 捲軸加減速動態 試看  
  • 12 數字動畫 試看  
  • 13 Parallax 捲軸動態 1/2 試看  
  • 14 Parallax 捲軸動態 2/2 試看  
  • 15 pageX & pageY 試看  
  • 16 staggerFrom 試看  
  • 17 TextPlugin 試看  
  • 18 轉場動態 1/3 試看  
  • 19 轉場動態 2/3 試看  
  • 20 轉場動態 3/3 試看  
  • 前端框架整合應用
  • 21 前端框架整合TweenMax (Vuejs、Reactjs) 試看  
  • TweenMax 溝通力|除了技術以外,你要會的事
  • 22 瞭解需求:切開設計師腦袋,建立溝通語言 試看  
  • 23 拆解動畫:抽象的想法,具體實現在網頁上 試看  

開始分享你的學習成果吧!

這裡是專屬於課堂學員及老師可以互動的作業區,學員們可以透過實際操作來複習課程中所學習到的內容,作業完成後只要簡單上傳到平台裡,就能得到更多老師的指點唷!同時,在這裡也可以觀摩其他學員的成果,一起來互相切磋吧!

<%if list.length == 0 %>

尚無作業

老師還沒有出作業唷!

<%else%><%props list%>

作業<%>~numToZH(~toInt(key) + 1)%>

<%if prop.type == 'image' %> 圖片檔 <%else prop.type == 'pdf' %> picture_as_pdfPDF <%else prop.type == 'youtube' %> Youtube 影片連結 <%else prop.type == 'ppt' %> PowerPoint <%else prop.type == 'sound' %> 錄音檔 <%/if %>

<%:prop.title%>

<%/props%><%/if%>

作業觀摩

目前還沒有任何學員上傳作業喔!來當第一個吧~

<%props data%>

<%if prop.type == 'image' %> <%else prop.type == 'pdf' %> picture_as_pdf <%else prop.type == 'youtube' %> <%else prop.type == 'ppt' %> <%else prop.type == 'sound' %> <%/if %> 作業<%>~numToZH(~toInt(key) + 1)%> <%:prop.title%>

<%props prop.rows %>
<%if prop.type == 'image'%>
<%else prop.type == 'pdf' %>
picture_as_pdf
<%else prop.type == 'youtube' %>
<%else prop.type == 'ppt' %>
<%else prop.type == 'sound' %>
<%/if %>
<%if prop.isAuthor and prop.visible == 1 %> <%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor %> 刪除 編輯 <%/if %>

<%:prop.comment_count%>

<%/props%>
<%/props%>

錄音 <%:~numToZH(sort + 1)%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧!

這裡是專屬課程的公告區,老師將在此發佈與課程相關的重要資訊,您可以在此看到所有與課程有關的最新公告。

尚無公告

老師還沒有發佈公告唷!

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%:prop.content%>
<%/props%>

回頂端