レッスン内容
トリガーを作成する
- トリガー要素を選択します(例: プロジェクトリンク) そして、インタラクションパネルに移動します
- エレメントトリガーの横にあるプラス記号をクリックします
- ドロップダウンメニューから「Scroll Into View」を選択します
アニメーションを作成する
- 「When Scrolled Into View」の下にあるアクションメニューから、「Start an Animation」を選択します
- Timed actionsの横にあるプラス記号をクリックします
- 名前を付けます(例: Move up on scroll)
- Timed actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「Move」を選択します
- 「Move」の下で、y軸を50ピクセルに変更します
- タイミングの横にある「Set as initial state」をオンに切り替えます
- タイムアクションの横にあるプラス記号をクリックし、ドロップダウンメニューから「opacity」を選択します
- opacityを0%に変更します
- タイミングの横にある「Set as initial state」をオンに切り替えます
- Timed actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「Move」を選択します
- 「Move」の下で、y軸を0ピクセルに変更します
- Easing and Durationを調整します
- タイムラインの0秒の横にあるプラス記号をクリックし、ドロップダウンメニューから「Opacity」を選択します
- opacityを100%に変更します
- Easing and Durationを調整します
- Affectの横にある選択をクリックし、クラスを選択します
- 「All elements with this class」をクリックし、「 Only children with this class」を選択します
他の要素にアニメーションを適用する
- アニメーションを閉じて、インタラクションパネルに移動します
- トリガー設定の下で、このアニメーションがこのクラスを持つすべての要素に適用されていることを確認します(例: Class: Project Link)
プレビューモードで作業を確認します。
関連レッスン
No items found.
コースのレッスン
No items found.