使用 jQuery 打造互動性網頁動畫效果
講師：廖 洧杰
- 高雄前端社群發起人
- 中華電信前端講師
- 高雄大學前端講師
- 十年實務經驗，授課時數超過一千小時
我將從這堂課程學到什麼？
1. 能夠掌握如何在網頁上設計互動性網頁動畫效果
2. 有辦法輕易整合別人寫好的第三方動畫插件，並套用在自己的網頁上
3. 有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果
當 jQuery 程式碼變多時，也能夠有條理地進行維護整理
課程大綱
六角學院線上資源
Available in
days
days
after you enroll
jQuery 入門
Available in
days
days
after you enroll
- JavaScript 與 jQuery 傻傻分不清楚？ 讓我們來教你！ (7:20)
- 課程最終任務說明
- 六角學院線上問答會資訊
- 初探 jQuery 強大之處(練習流程)
- 初探 jQuery 強大之處 (12:47)
- 下載jQuery檔案，介紹1.x與2.x的差別 (6:21)
- 下載jQuery檔案，介紹1.x與2.x的差別-課程補充
- 設定 jQuery 環境好簡單 (11:35)
- jQuery 環境建置範例程式碼
- jQuery Codepen 環境建立(無聲音版) (1:13)
- 小叮嚀 (win 熱鍵提醒)：使用 Sublime 插件提升寫 jQuery 效率
- 使用 Sublime 插件提升寫 jQuery 效率 (7:11)
- 第一章測驗
選擇器與事件：開始讓你的網頁具有互動性吧！
Available in
days
days
after you enroll
看看還有哪些動畫效果可以使用
Available in
days
days
after you enroll
教你如何搭配 CSS + jQuery 各式各樣的動畫效果
Available in
days
days
after you enroll
- 使用 preventDefault() 取消默認行為 (7:31)
- preventDefault 程式碼範例
- css() - 教你如何動態載入 CSS style 設定 (4:05)
- 設計下拉式收闔選單 (11:00)
- delay() - 延遲動畫效果的好用語法 (8:04)
- 即時放大縮小字型好簡單 (6:47)
- fixed 固定網頁內容 (6:01)
- 使用 stop() 讓你的動畫效果更滑順 (4:45)
- 設定offcanvas左右選單切換 (8:31)
- Animate.css 更新說明
- Animate.css - 載入第三方插件 - 增添網頁動畫豐富度 (7:23)
- 第四章測驗
- 第四章問題發問區
教你如何操控網頁元素
Available in
days
days
after you enroll
jQuery 常用小技巧
Available in
days
days
after you enroll
第三方Plugin
Available in
days
days
after you enroll
- 使用第三方plugin需要注意的細節 (6:33)
- 使用第三方plugin需要注意的細節-課程補充
- Lightbox 2 - 圖片燈箱效果 (上) (16:05)
- Lightbox 2 - 圖片燈箱效果 (上)-課程補充
- Lightbox 2 - 圖片燈箱效果 (下) (9:53)
- Swiper - 輪播效果 (上) (11:05)
- Swiper - 輪播效果 (上)-課程補充
- Swiper - 輪播效果 (中) (13:24)
- Swiper - 輪播效果 (下) (3:22)
- Swiper - 補充備註 (1:57)
- 將上面的效果試著整合在一個網頁中吧！ (5:57)
- 如何去查詢別人使用的 jQuery 插件 (5:44)
開始喜歡 jQuery了嗎？教你如何更精進！
Available in
days
days
after you enroll
最後，你還可以往哪些方向去精進
Available in
days
days
after you enroll
基本條件
- 具有基本的 HTML + CSS 觀念
- 本課程使用 Sublime Text 3 網頁編輯器進行教學
這門課程適合...
- 想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生
- 想要設計出超棒的網頁使用者體驗的學生
- 除了基本 jQuery 技巧，還想學會更多應用的學生
