このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 JavaScriptで動きをつけていこう (02:06) 無料公開中
- 開発環境
- 完成版の確認
-
#02 アニメーションの設定をしていこう (02:52) 無料公開中
- animateクラスの付与
- アニメーションの設定
-
#03 Intersection Observer APIを使おう (02:46) 無料公開中
- main.jsの作成
- Intersection Observer APIによる監視
-
#04 要素をふわっと表示させよう (02:27)
- appearクラスの付与
- 監視の停止
-
#05 要素が左右から現れるようにしよう (02:30)
- .slide-from-left、.slide-from-right
- アニメーションの設定
- overflow: hidden
-
#06 要素が現れるタイミングをずらそう (01:52)
- .delay、.delay-more
- 動作確認
-
#07 ヘッダーを固定配置しよう (02:57)
- position: fixed
- 余白の調整
- scrolledクラスの設定
-
#08 スクロールしたか監視していこう (03:02)
- inViewObserverの設定
- onScrollObserverの設定
-
#09 ヘッダーのスタイルを切り替えよう (02:41)
- scrolledクラスの付与
- アニメーションの設定
-
#10 z-indexで要素の重なりを制御しよう (02:31)
- 要素の重なり
- z-index
-
#11 Bootstrap Iconsを使ってみよう (02:42)
- z-index
- Bootstrap Iconsの導入
-
#12 アイコンのスタイルを整えよう (02:46)
- position: fixed
- アイコンのスタイリング
- scrolledクラスの設定
-
#13 スクロールしたらアイコンを表示しよう (01:28)
- scrolledクラスの付与
- 動作確認
-
#14 トップに戻る動きを制御しよう (02:48)
- 戻るボタンの挙動
- クリックイベントの設定
- behavior: 'smooth'
