料金プランを有効化して学習を始めましょう。
Reveal elements on scroll

スクロールで表示

スクロール時にページ要素をフェードインおよび移動します。

レッスン内容

トリガーを作成する

  1. トリガー要素を選択します(例: プロジェクトリンク) そして、インタラクションパネルに移動します
  2. エレメントトリガーの横にあるプラス記号をクリックします
  3. ドロップダウンメニューから「Scroll Into View」を選択します

アニメーションを作成する

  1. 「When Scrolled Into View」の下にあるアクションメニューから、「Start an Animation」を選択します
  2. Timed actionsの横にあるプラス記号をクリックします
  3. 名前を付けます(例: Move up on scroll)
  4. Timed actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「Move」を選択します
  5. 「Move」の下で、y軸を50ピクセルに変更します
  6. タイミングの横にある「Set as initial state」をオンに切り替えます
  7. タイムアクションの横にあるプラス記号をクリックし、ドロップダウンメニューから「opacity」を選択します
  8. opacityを0%に変更します
  9. タイミングの横にある「Set as initial state」をオンに切り替えます
  10. Timed actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「Move」を選択します
  11. 「Move」の下で、y軸を0ピクセルに変更します
  12. Easing and Durationを調整します
  13. タイムラインの0秒の横にあるプラス記号をクリックし、ドロップダウンメニューから「Opacity」を選択します
  14. opacityを100%に変更します
  15. Easing and Durationを調整します
  16. Affectの横にある選択をクリックし、クラスを選択します
  17. 「All elements with this class」をクリックし、「 Only children with this class」を選択します

他の要素にアニメーションを適用する

  1. アニメーションを閉じて、インタラクションパネルに移動します
  2. トリガー設定の下で、このアニメーションがこのクラスを持つすべての要素に適用されていることを確認します(例: Class: Project Link)

プレビューモードで作業を確認します。

関連レッスン

No items found.

コースのレッスン

No items found.

次のレッスン

サポート

チャットで講師に質問を聞きましょう

質問する

学習進捗

閲覧後に「完了」を押して、進捗を保存しましょう