LikePay Academyが「スーパーサイトAcademy」に変わります。詳しくはこちらです。

スクロールで表示

ページをスクロールすると、要素がフェードインして移動するトリガーを作成します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

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

このレッスンで学ぶこと

トリガーを作成する

  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)

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

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談