104學習

網頁動畫設計

網頁動畫設計
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
「網頁動畫設計：負責設計與製作互動性強的網頁動畫，以提升使用者體驗與品牌形象。此角色需主導動畫概念開發，協作跨部門團隊，確保設計符合技術需求與市場趨勢。必要技能包括精通Adobe After Effects、HTML5/CSS3和JavaScript，具備優秀的視覺設計及溝通技巧，能夠迅速調整設計以應對客戶需求及實際使用情境。在台灣的職場環境中，必須敏銳洞察流行趨勢和消費者心理，以創造吸引人的內容。」
關於教室
關注人數 0 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • 網頁動畫設計
    • 關於教室
    關注人數 0 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • 網頁動畫設計
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    網頁動畫設計 學習推薦

    全部
    影片
    文章
    Hahow 好學校
    關注
    Hahow 小蛙編輯

    創作內容編輯

    2022/08/29

    翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來
    本篇文章接續上集，要帶大家簡單做出好玩的 SVG 網頁動畫，讓蔥油餅翻滾！怎麼讓場景元件動起來，一步步帶你動手做。
    本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。
    在上集中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。
    本篇文章會談到：
    本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。
    實際應用﹔讓場景中的元件動起來
    怎麼讓素材動起來？
    一、驚嘆號
    首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。
    這邊使用了新的 css 屬性 animation ，需要搭配 @keyframes 使用，在 keyframes 用百分比去註記不同時間該顯示的樣式，透過 animation 定義動畫總時間，這也代表這個 keyframes 可以提供給不同元件使用，使用的元件賦予不同的時間等屬性，就是一個全新的樣貌。
    要注意元件會以左上角為旋轉中心點，適時加上 transform-origin, transform-box 讓動畫更加合理。
    詳見原文>
    看更多
    翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來
    hahow.in
    翻滾吧蔥油餅！簡單 SVG 動畫製作（下集）：讓場景元件動起來
    1 0 716 1
    104學習

    05/30 00:00

    youtube.com
    品牌廣告│天韻 網頁動畫設計
    3 0
    104學習

    09/17 00:00

    youtube.com
    自製網頁動畫設計
    0 0

    推薦給你

    職場熱門證照排行榜
    關注
    104學習

    產品

    14小時前

    Canva免費證照速攻！快速考證指南
    Canva一直是許多職場人士的必備工具，但除了強大的設計功能外，很少人知道旗下Canva Design School還提供許多Canva免費課程，部分課程完成後，還能透過考試取得官方Canva證照。這份攻略將詳細介紹如何獲取證書，幫助你快速掌握Canva基本功、熟悉最新的AI工具應用，有效提升職場技能。
    ⚡Canva免費考證 FAQ 完整攻略⚡
    ✅Q1：如何找到Canva官方的免費課程與證書考試？
    A：首先進入Canva Design School，在平台上，點擊「Get certified」，這裡提供的課程在結束後都可參加考試並獲得證書。
    *即使沒有將課程上完，也可直接點擊「Earn a certificate」開始考試。對於已經熟悉Canva操作的使用者來說，若覺得課程內容簡單，想要節省時間，可直接選擇考試的方式獲得證書。
    ✅Q2：有哪些推薦的免費認證課程？
    A：Canva提供了多門適合不同需求的課程，例如：
    • Canva Essentials(Canva基礎操作)：適合初學者快速建立Canva使用能力，涵蓋基礎介面、功能及AI輔助工具。 https://nabi.104.com.tw/ability/10049184
    • Marketing with Canva(行銷設計技巧)：教導如何利用Canva製作符合品牌風格的社群貼文、廣告素材，提升行銷效率。
    • Graphic design essentials(平面設計基礎)：學習設計的基本元素、原則、色彩理論與字體排版。
    還有「Canva for Work」（職場應用）及教育類的「AI in the Classroom」等課程…
    ✅Q3：想快速拿證照，一定要把所有課程看完嗎？
    A：不一定需要。對於已經熟悉Canva操作的資深用戶來說，即使沒有將課程上完，也可直接點擊「Earn a certificate」開始考試，藉此節省時間。考試題目為選擇題或多選題，數量介於20到30題之間。不過，若是Canva新手，建議還是完整將課程看完後再考試，除了能穩固基本功外，也能在答題時減少錯誤的機率。
    ✅Q4：Canva證書有什麼實際用途？如何分享？
    A：Canva的證照不僅實用且免費，能夠證明您與時俱進，擁有數位設計與AI應用的專業能力。通過測驗的學員可獲得官方電子證書下載保存，或將證書分享到履歷表，為履歷及職涯形象加分。
    看更多
    Canva免費證照速攻！快速考證指南
    2 0 321 0
    你可能感興趣的教室