このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ScrollTriggerを使っていこう (02:23) 無料公開中- 概要
- シンプルなアニメーションの作成
-
#02 ScrollTriggerを導入していこう (02:24) 無料公開中- コンテンツの追加
- ScrollTriggerの導入
-
#03 markersでマーカーを表示しよう (02:09) 無料公開中- ScrollTriggerの設定
- markers
-
#04 start､endでマーカーの位置を変更しよう (02:24)- start
- end
-
#05 toggleActionsでアニメーションを制御しよう (02:48)- 4つのタイミング
- toggleActions
-
#06 scrubでアニメーションを制御しよう (01:25)- scrub
- 動作確認
-
#07 Timelineと組み合わせてみよう (03:00)- Timelineアニメーション作成
- ScrollTriggerの設定
-
#08 横スクロールを途中に入れてみよう (01:39)- 作るもの
- 考え方
- 実装方針
-
#09 パネルを用意していこう (02:43)- パネルの配置
- スタイリング
-
#10 パネルを横並びにしよう (02:13)- フレックスボックスの設定
- flex: none
- 横スクロールの確認
-
#11 横に動くアニメーションを作ろう (01:49)- xPercentによる横移動アニメーション
- ease: 'none'
- overflow: hidden
-
#12 スクロールと連動させてみよう (02:35)- START、ENDパネルの追加
- セレクタの調整
- ScrollTriggerの設定
-
#13 pinで要素を固定してみよう (02:22)- start
- pin
