Contents
一個在網頁上建立令人驚歎的 CSS 動畫的實用指南課程
從這 3.5 小時的課程，你會學到
- 建立一個動畫登陸網頁 ( landing page )
- 使用一個動畫英雄標題讓網頁脫穎而出
- 滑鼠懸停(Hover)，觸控和按鈕動畫
- 建立滾動和視差動畫
- 建立自己的動畫旋轉效果( animated carousel )
- 探索響應式動畫
- 組裝你自己的動畫網頁
- 包括預先建立 ( pre-built )的範例，以便快速開始
要求
- 你應該瞭解一些 CSS 和 JavaScript ( 請參考 網頁開發者程式設計訓練營 (含繁中字幕) )
- Mac 或 PC 電腦，使用文字編輯器進行編輯和瀏覽器做測試
課程說明
把動畫帶到你的網站，脫穎而出。 在本課程結束時，你將有技能和信心，以建立令人印象深刻的動畫登陸網頁。
通過近 4 個小時的高品質視訊課程，我將引導你通過建立動畫滑鼠懸停和按鈕動畫，啟用滾動動畫，利用視差動畫，響應動畫等。
每個課程章節都包含可以應用於實際專案的完整運作範例。 學習實用的技能，你可以應用到未來的工作。
對於那些想在網站上新增動畫的人來說，這是一個完美的入門課程。 這是理論和實際範例的完美平衡，我強烈推薦它。
– Andrew Clarke, Author of Hardboiled Web Design
現在是學習 CSS 動畫的時候了
隨著瀏覽器(包括行動瀏覽器)變得越來越強大，我們有更多的機會將動畫融入到我們的設計中。 與此同時，高品質的使用者體驗對於 web 和基於應用程式的企業來說是一個巨大的差異化因素。
在你的設計中新增正確的動畫可以幫助你的網站和應用程式脫穎而出
這門課是為誰而設的
你想要讓你的訪問者感到愉悅和驚奇，並使你的網站脫穎而出。 你想使用動畫不僅僅是為了讓你的使用者 wow ，而是讓網站更加有用、精美和專業。 你已經在建立網站，但是你想把你的知識提升到一個新的水平。 這是給你的課程。 本課程將為你提供將動畫帶入專案所需的實用工具。
這是一個充滿真正可下載程式碼範例的影片課程。 你將能夠將這些知識以及實際可運作的程式碼帶到你的專案中，並確保它們脫穎而出。
在實踐中學習
大多數課程只關注理論。 在本課程中，我們將一步一步地建立一個實用的登陸網頁範例。 超過 6 個模組的實踐，動手做的課程，我們將建立真正的動畫範例，你可以使用在你自己的專案。
幫助和鼓舞
在這門課程中，你不僅可以獲得大量實用的起始專案，還可以去 CSSAnimation.rocks 瞭解更多資訊，甚至可以註冊每週一期的新聞電子報，裡面充滿了在網上製作動畫的教學、靈感和提示。
– Donovan
目標受眾
- 網頁設計師和開發人員
- 任何想要建立驚人的動畫網站和應用程式
講師簡介
Donovan Hutchinson 前端網頁開發者和動畫師
Donovan Hutchinson 已經為客戶建立網頁和應用程式超過20年了。 他在 CSSAnimation.rocks 上編寫和建立 CSS 動畫教學指南，並已發表在 Net Magazine、 Smashing Magazine、 Adobe Inspire、 Modern Web 等雜誌上。
除了為線上出版物撰稿，Donovan 還撰寫和出版關於前端開發和設計的書籍，側重於動畫和使用者體驗。
你可以在 Twitter 上找到 Donovan @donovanh，關注 CSS 動畫新聞@cssanimation。
Frahaan Hussain Sonar Systems 執行長兼首席開發人員
我是 Sonar Systems 的 CEO，Sonar Systems 是世界領先的遊戲引擎 Cocos2d-x 的教材，Cocos2d-x 是世界上最好最流行的遊戲引擎之一。 憑藉多年的程式設計經驗和執行線上教育平台(Sonar Learning)的經驗，我可以幫助和支援像你一樣的程式設計新手。
我也是一名大學講師，教授從遊戲設計到 OpenGL Shader 程式設計的各種遊戲程式設計主題。
我也是一個遊戲設計的出版作者，不久將以響應式網頁設計釋出。 我有教育和啟發所需的各個方面。
英文字幕：有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境？LN+ for Web 已經針對 ChatGPT 的整合做最佳化
🙌 讓 Notion AI 成為你線上學習的得力助手，詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結
- 點選這個✨優惠連結 課程特價 | Udemy 永久擁有課程 NT330 起( 請登入 Udemy｜按過“優惠連結”後到”報名參加課程“連結網頁做更新 ）
- Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- ＄代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- CSS – 完整指引 (包含 Flexbox、Grid 和 Sass)
- 更多 CSS 特效線上課程介紹
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入