# jQuery 也可以做到的互動效果
###### tags: `大神來六角`
---
Leo 陳志龍
20221107

## 主持人
- 六角學院 Ray

## 講者
Leo 陳志龍

- 經歷
* LILEE Systems - Front-End Lead
* 大神來六角 2020/2021/2022
* Angular Taiwan 社群管理員
* 前端精神時光屋 3rd 前端評審

- blog
- fb：[Leo's Coding Life](https://www.facebook.com/leoscodinglife)
- blog：[https://blog.leochen.dev/](https://blog.leochen.dev/)

## 課程推薦/相關課程 or 著作

- ithelp（iT 邦幫忙鐵人賽）
* [Angular 深入淺出三十天](https://ithelp.ithome.com.tw/users/20090728/ironman/1600)
* [Angular Schematics 實戰三十天](https://ithelp.ithome.com.tw/users/20090728/ironman/2149)
* [Angular 深入淺出三十天：表單與測試](https://ithelp.ithome.com.tw/users/20090728/ironman/3881)

## 大綱

* 常見 動畫/特效案例 分享
* [3D 放射柱狀物](https://codepen.io/atflihoucine/pen/PmPMzG?editors=0010)
* [氣泡](https://codepen.io/Thomasbayy/pen/wqQdez?editors=1010)
* [夜空](https://codepen.io/Elena_in_code/pen/XaQVrx)
* [立體輪播](https://www.instagram.com/reel/Cjk3maHg5Sv/)
* 動畫/特效 基礎 ★3.5
* 座標軸(xy,2d)
* [範例](https://jsbin.com/lenugov/edit?html,css,js,output)
* 知識
* pic
- 座標
- xy clientxy offsetxy
* https://javascript.info/size-and-scroll
* https://pjchender.dev/webapis/note-coordinate-system/
* 3D(xyz)
* [範例](https://jsbin.com/jidapox/edit?output)
* 知識
* pic
* [[CSS]一起来画立方体: CSS perspective属性](https://www.jianshu.com/p/0f26e56bc09a)
* https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html
* 動畫/特效 拆解與實作 ★3.5
* [寶可夢卡牌](https://deck-24abcd.netlify.app/#%E2%9A%93-top) | [dynamicMopconGirl](https://www.casper.tw/WorkShop-gh-pages/dynamicMopconGirl/)
* [sample](https://jsbin.com/nuforuf/3/edit?js,output)
* 翻牌
* 光暈
* 推薦資源 ★4
- [動態特效網站 SOP - 板塊](https://blockstudio.tw/blog/web-animation-sop/)
- [完整解析 CSS 動畫](https://www.oxxostudio.tw/articles/201803/css-animation.html)
- [10+ Best JavaScript **Animation Libraries** to Use in 2022](https://www.codeinwp.com/blog/best-javascript-animation-libraries/)

## 講義

- [Sli.do 問答區](https://app.sli.do/event/5NuNh38E75RyG4VEbwd1yM)
- video
- note
- [link](https://ku895260.notion.site/jQuery-5bc775ec91f64444a0a3bfb03718171f)

## 近期活動

- [TheF2E 活動](https://2022.thef2e.com/)