このページを日本語で閲覧するには「続ける」を押してください。
Press "Continue" to see this page in English.
料金プランを有効化して学習を始めましょう。

スクロールで表示

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

アクセス制限

レッスン動画を閲覧するには、会員登録が必要です

レッスン動画を閲覧するには、会員登録と有料プランの加入が必要です

アクセス制限

レッスン動画を閲覧するには、有料プランの加入が必要です。

レッスン内容

トリガーを作成する

  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.

学習進捗

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