【回饋學員:超佛心加碼課程內容】點我瞭解課綱
Mike老師加碼教學:「前端框架整合TweenMax (Vuejs、Reactjs)」


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

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


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

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

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

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

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


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


相關科系學生 

前端設計師

前端網頁工程師

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


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

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

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


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

✔︎ 一台有網路的電腦

✔︎ 原始碼編輯器

✔︎ 會HTML、CSS

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

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

Q2. 我如何操作,才可以學習這堂課程? 

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

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

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

Q4. 這門課可以看多久? 

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

Q5. 可以問老師問題嗎? 

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

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. 看不到募資影片嗎?


單元

29

課程總長

257分鐘

課堂測驗

尚無測驗

  • GSAP 介紹
  • 1 課程簡介 試看 03:46
  • 2 開發環境安裝 試看 16:50
  • TweenMax 起手式|網頁態基礎概念
  • 3 TweenMax 使用與架構 試看 09:58
  • 4 Scale 比例的縮放 試看 10:10
  • 5 CSS 屬性控制 試看 04:28
  • 6 onComplete 動畫結束之後 試看 05:56
  • 7 旋轉補間動畫 試看 18:46
  • 8 Lifecycle 生命週期 試看 06:47
  • 9 Repeat 重複動畫設定 試看 09:43
  • TweenMax 組合技 - 各司其職 jQuery 與 TweenMax|網頁動態整合應用
  • 10 staggerTo 多個物件操作與延遲 試看 11:08
  • 11 Scroll 捲軸加減速動態 1/2 試看 14:42
  • 12 Scroll 捲軸加減速動態 2/2 試看 07:41
  • 13 Number Amination 數字動畫 試看 11:43
  • 14 Parallax 捲軸動態 1/2 試看 13:16
  • 15 Parallax 捲軸動態 2/2 試看 08:33
  • 16 Page X 試看 06:41
  • 17 Page X & Page Y 試看 05:32
  • 18 staggerFrom 1/3 試看 08:21
  • 19 staggerFrom 2/3 試看 08:17
  • 20 staggerFrom 3/3 試看 06:19
  • 21 TextPlugin 文字變換 試看 05:04
  • 22 轉場動態 1/3 試看 05:39
  • 23 轉場動態 2/3 試看 09:57
  • 24 轉場動態 3/3 試看 03:50
  • 前端框架整合應用
  • 25 現代前端套件安裝管理 試看 07:44
  • 26 前端框架整合TweenMax (Vuejs) 試看 14:40
  • 27 前端框架整合TweenMax (Reactjs) 試看 10:04
  • TweenMax 溝通力|除了技術以外,你要會的事
  • 28 瞭解需求:切開設計師腦袋,建立溝通語言 試看 07:49
  • 29 課堂總結 試看 03:39

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

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

<%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%>

<%:~loadTmpl('homework-card', prop.rows)%>
<%/props%>
<%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%>
<%if prop.visible == 1 %> <%/if %>

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

<%:prop.title%>

<%:prop.user%>

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

<%:prop.comment_count%>

<%/props%>

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

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

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

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

尚無公告

老師還沒有發佈公告唷!

<%props data%>

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

<%:prop.title%>

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

回頂端