---
# System prepended metadata

title: 2023/05/24 切切切會議：GSAP／css background-position／認識古琴／無障礙
tags: [切切切會議記錄]

---

# 2023/05/24 切切切會議

###### tags: `切切切會議記錄`

會議室：線上 meeting  
會議時間：下午14點開始
會議地點：台北（2124會議室(D)）、新竹（R3116）、台中（4112會議室）
會議主持人：玟諭
會議記錄：Miley
與會人員：琬樺、恬恬、雅瓊、黑白切五味、祺學

**下午：14:00開始**

---

## 用動態特效點滿視覺創意 + GSAP基礎介紹
主講人：Lize
* 好學校課程分享
* GSAP基礎應用
* 雲林布袋戲專案應用

[**簡報連結 🌐**](https://statuesque-jellyfish-f67.notion.site/3699c1a0108d4d0a85f57fae3d144646)

**會議記錄：**
* Hahow：用動態特效點滿視覺創意
    * 動態網站 & 動態特效網站的差異
    * 動態特效網站的製作前提
    * 如何發想動態特效
    * 動態特效類型
    * 提升網站質感的方法
    * 動態特效如何開始？
* GSAP 基礎教學
    * 初始環境設定
    * 基礎語法：to, from, formTo, set
    * 選取目標
    * 動態屬性
    * 自訂屬性
    * 座標軸
    * 特殊屬性：x, duration, repeat, yoyo
    * ease
    * 設定 Timeline
    * 控制動畫
    * 動畫事件
* 專案實際應用


## GSAP 實際應用
主講人：思晨

* GSAP應用補充說明

[**簡報連結 🌐**](https://hackmd.io/Xztnd2yFReq4Z49IIMbsPw?both)

**會議記錄：**
* GSAP 進階應用
    * 製作svg路徑綁定滑鼠的效果
    * 製作綁定滑鼠 橫向捲軸的效果
    * 當滾輪滾到元件時 影響縮放
    * 當滾輪滾到元件時 類似遮罩撥開效果
    * 製作loading 效果
    * hover元件時利用css產生的特殊效果
    * 搭配 Swiper ＋ Gsap 輪播
    * 其他動態效果
---

## css background-position 新功能
主講人：雅瓊
[**筆記連結 🌐**](https://hackmd.io/prrF002VRiy1p7rbysrFXQ?view)

**會議記錄：**
background-position語法

## 認識古琴
主講人：雅瓊
(本機端 keynote 檔)

**會議記錄：**
* 琴的古字
* 詩經：《關雎》、《鹿鳴》
* 琴的構造
* 博物館中的琴：九霄環佩
* 琴的各部名稱
* 琴體結構：上下兩塊木料膠合而成
* 古琴琴式
* 琴的名稱
* 琴弦：絲弦、尼龍鋼絲弦、龍人冰弦
* 陶淵明的無弦琴
* 紅樓夢：黛玉的琴譜，寶玉的天書
* 右手撥弦、左手按弦
* 古琴譜的特色
* 嵇康的《廣陵散》
* 影視作品中的古琴
* 古琴名曲：《流水》、《梅花三弄》、《石上流泉》...
* 曲目欣賞
[《山居吟》 陳雯](https://youtube.com/watch?v=GqLS4zNi6XU)
[《如來藏》 自得琴社](https://youtube.com/watch?v=vSRw3ZSd4gk)
[《酒狂》 方錦龍](https://youtube.com/watch?v=rKVFcWWqXeg)
[《廣陵散》 戴曉蓮](https://youtube.com/watch?v=p1KzEJ2k-pA)
[《流水》李祥霆](https://youtube.com/watch?v=Yo3yMvJwE8U)

---

## 作品分享
[**作品連結 🌐**](https://docs.google.com/spreadsheets/d/1_HfrDsM4o2OOtK2_R65J_d1Ep8REVru5NmWb7tuq3-w/edit#gid=1358256252)

思晨 DoctorMe icon 動態套件
* [**lottiefiles**](https://lottiefiles.com/)
* [**教學**](https://airbnb.io/lottie/#/web)

## 臨時動議
* 淑雅 無障礙分享
    * [**範例連結**](https://hackmd.io/ScS121sBQCKiywCnWJgl3A?view)

1. 範例一：不能有雙標題
![](https://hackmd.io/_uploads/HJ-C_UoSh.png)
