# JS30Day13
主題 : Slide In on Scroll
demo : https://codepen.io/benben6515/pen/ZEKeKer
by Benben
---
### HTML
一個 div 包了很多的 p, img
假文 : `lorem` ( 開發好用 )
假圖 : http://unsplash.it/400/400
---
### CSS
先使用 transform 跟 opacity 讓圖片穩藏
再使用 .active 的 class 操空圖片
opacity 參數範圍 : 0 ~ 1
float : 神奇的排板屬性
---
### Javascript
- function debouce : 可以減少事件監聽，可參考就好，[補充](https://mropengate.blogspot.com/2017/12/dom-debounce-throttle.html)
- function checkSlide : 監聽 scroll 有沒有在圖片有出現的範圍裡
- 數學題 :
```javascript
(window.scrollY + window.innerHeight) - slideImage.height / 2
```
視窗的捲動 + 視窗的高度 - 圖片的一半高度 ( 單位 : pixel )
---
### Live 練習時間
試試看使用一個 button 控制圖片的開關
(☞ﾟヮﾟ)☞
---
### 寫些大家
大哥沒有輸！
(┬┬﹏┬┬)
{"metaMigratedAt":"2023-06-16T04:37:37.966Z","metaMigratedFrom":"Content","title":"JS30Day13","breaks":true,"contributors":"[{\"id\":\"501c937b-efc9-4941-94b4-ec0bc323749a\",\"add\":708,\"del\":21}]"}