<%props data%>
  • <%:prop.name%>

    <%if prop.total%><%:prop.total%><%/if%>
  • <%/props%>

    【回饋學員:超佛心加碼課程內容】點我瞭解課綱
    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'%>
    <%:~isGif(prop.cover)%>
    <%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%>

    回頂端