スクロールで表示

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

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

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

このレッスンで学ぶこと

トリガーを作成する

トリガー要素を選択します（例: プロジェクトリンク）そして、インタラクションパネルに移動します
エレメントトリガーの横にあるプラス記号をクリックします
ドロップダウンメニューから「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）

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

目次