-
#01 Intersection Observer APIを使ってみよう (02:03) 無料公開中
- 概要の説明
- target
- root
- Intersection Ratio
- APIの用途
-
#02 学習の準備を整えよう (02:09) 無料公開中
- 素材の紹介
- index.htmlの作成
- コンソールの表示
-
#03 コンテンツを配置していこう (02:08) 無料公開中
- 要素の配置
- main.jsの作成
-
#04 処理が実行されるタイミングを知ろう (02:56)
- targetの取得
- observerの設定
- targetの監視
- 処理の実行タイミング
-
#05 thresholdを指定してみよう (02:07)
- thresholdオプション
- 複数の値の指定方法
-
#06 交差した要素の情報を取得しよう (02:54)
- intersectionRatio
- isIntersecting
- target
-
#07 CSSアニメーションの設定をしよう (02:04)
- styles.cssの作成
- CSSアニメーションの設定
-
#08 要素が交差したらふわっと表示させよう (02:18)
- クラスの付け外し
- 早期リターン
-
#09 root､rootMarginについて見ていこう (02:58)
- root
- rootMargin
-
#10 rootMarginを使ってみよう (01:57)
- rootMarginの設定
- rootMargin指定時の注意点
- 動作確認
-
#11 targetの監視を止めてみよう (02:29)
- callbackの第2引数
- unobserve()
-
#12 監視対象を増やしてみよう (01:30)
- 要素の設置
- コードの改変
-
#13 すべての要素に処理を設定しよう (02:45)
- entriesの挙動
- 処理の設定
2021年6月27日
2021年8月27日
2021年9月10日
2021年5月13日
