このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 JavaScriptで動きをつけていこう (02:30) 無料公開中
- 開発環境の確認
- main.jsの作成
- Intersection Observer API
-
#02 アニメーションを設定していこう (02:25) 無料公開中
- .animateの設定
- .appearの設定
-
#03 監視対象の要素にクラスを付与しよう (02:10)
- new IntersectionObserver()
- callback関数
-
#04 要素をふわっと表示させよう (01:53)
- 要素の取得
- observe()
-
#05 要素が左右から現れるようにしよう (02:15)
- .slide-from-leftの設定
- .slide-from-rightの設定
- 動作確認
