視差モーションのスクロール

視差の視覚効果は、奥行きと立体感を与えます。画面上の要素をさまざまな速度で動かすことで、この効果が得られます。視差効果のあるアニメーションを実装すると、メカニズムを紹介したり、製品の構造を強調したりすることでユーザー エンゲージメントを高めるなど、さまざまな目的に使用できます。また、訪問者がサイトをさらに探索したくなるような魅力的な視覚体験を生み出すこともできます。Webflow の最新の Interactions 2.0 では、コーディングを必要とせずに、このようなアニメーションを Web サイトに簡単に統合できます。

ここでは、次の内容を取り上げます。

1. 初期設定の確立
2. アニメーションの定義
3. スクロールアニメーションの設定
4. アニメーションのプレビュー
5. 追加のアニメーションを組み込む
6. 特定のデバイスでアニメーションを無効にする

プロのヒント — 奥行きの錯覚

リアルな 3D 環境を作成するには、奥行き知覚の原則に従います。要素のサイズ、位置、影の距離、さらにはぼかし効果などの要素が、奥行きとフィールドのシミュレーションに貢献します。

セットアップの開始

ステップ1.セクションを挿入する

まず、 セクション 要素をキャンバスに 要素パネル 左側。表示領域の下、他のセクションの上に配置します。

ステップ2.セクションを調整する

セクションを選択し、上部と下部を追加します パディング スタイルパネルで設定します。また、 オーバーフロー に 隠れた セクションの境界内にコンテンツを含めます。

ステップ3. コンテナを挿入する

ドラッグ 容器 要素から 要素パネル セクションに入力します。 身長 1200ピクセルにして 位置 相対的この設定により、コンテナ内で画像を正確に配置できます。

ステップ4. 画像をインポートする

画像を選択 アセットパネル セクションに配置します。画像のサイズを調整して、3D 空間の感覚を効果的に作り出します。

追加情報

画像の幅は、 画像設定モーダル画像をダブルクリックするか、画像ラベルの横にある歯車アイコンをクリックしてアクセスします。または、 要素設定パネル 右側のデザイン側で、画像を選択してキーボードの D キーを押します。

画像設定で画像のサイズを調整すると、さまざまなデバイスのブレークポイントに変化が反映されます。特定のデバイスで固有のサイズにするには、 幅 経由で スタイルパネル.

ステップ5. 画像のスタイルを強化する

適用する 影を落とす 各画像に影の一貫性を保つ 角度 すべての画像に適用される。 色, 不透明度、 距離、 ぼかし、影のサイズ/広がりを調整して視覚的な奥行きを作成します。

ステップ6. 画像を配置する

をセットする 位置 各画像の 絶対UIまたは手動入力で位置値を操作して画像の位置を調整します。 Zインデックス レイヤーを制御する – Z インデックスが高い画像は近くに表示され、背景に重なります。

アニメーションの定義

アニメーションを理解することは、 イベントと応答 望ましい結果を達成するために必要です。 

このアニメーションでは、セクションがスクロールして表示されるにつれて画像がアニメーション化されます。 イベント は 要素トリガー の 画面をスクロールしながら、トリガー スクロールアニメーション として 応答.

ステップ7. イベントを定義する

画像を含むセクションを選択してインタラクションの作成を開始します。 インタラクションパネル 設定する 要素トリガー の 画面をスクロールしながら.

ステップ8. イベントの設定

選択して スクロールアニメーションを開始する必要に応じてアニメーションの境界を調整し、アニメーションの開始と終了を制御します。デフォルトでは、アニメーションはセクションがビューポートに入ると開始し、出ると終了します。このチュートリアルでは、デフォルト設定のままにします。

スクロールアニメーションを説明する

目的を明確にすることで、設定する必要のあるタスクを特定しやすくなります。この時点での目標は、画像の速度を変更することです。セグメントをスクロールしているときに、最前列にある画像は、背景にある画像よりも高速で動いているように見える必要があります。したがって、 スクロール行為 と シフト 各画像について、 位置 各画像の Y軸 アニメーションの開始時と終了時。

ステップ9. スクロールアニメーションを作成する

アニメーションを開始する前に、スムージングの概念について説明しましょう。スムージング、またはダンピングは、アニメーションタイムライン上の正確な位置に向かって差し迫った速度を緩和し、調整します。スムージング値は、 スクロールアニメーションこのガイドでは、50% で保持できます。

さて、新しい スクロールアクション

ステップ10. シフトアクションを実行する

最大のZインデックスを持ち、あなたの視点に最も近い画像を選択してください。 スクロール行為 の シフト アニメーション中の画像の動き方を変更します。

アニメーション タイムラインには、画像の重要なフレームまたは発生が 2 つ含まれています。1 つはアニメーションの開始である 0% に設定され、もう 1 つはアニメーションの終了である 100% に設定されています。

ステップ11. 初期位置を確立する

最初のキーフレーム0%を選択します。 シフト変換設定、画像の位置を指定して位置を下げる Y軸 1000px など。これは、セグメントが最初にスクロールして表示されるときの画像の位置を表します。

ステップ12. 最終的な位置を決める

アニメーションタイムラインの2番目のキーフレームをマークし、その位置を正確に特定して画像を高くします。 Y軸 -1000px まで。これは、セグメントがスクロールして表示されなくなるときの画像の位置を示します。

ステップ13. 二次アクションを確立する

セグメント内で最も後ろに位置するZインデックスが最も低い画像を選択します。 シフトこの新しい画像のアニメーション タイムラインに、0% と 100% の 2 つの新しいキーフレームが追加されます。

主要なポジションを決定する

この新しい画像のキーフレーム0%を選択します。 シフト変換設定、画像の位置を指定して高さを調整します。 Y軸 -352px として表示されます。セグメントがスクロールして表示されると、この画像はこの位置から移動を開始します。

最終的な位置を指定する

対応する画像の100%のキーフレームを選択し、 Y軸 352ピクセルまで。この画像はページを進むにつれてこの位置まで下がります。前のアクションでイージング設定を変更した場合は、同じものを適用してください。 緩和 すべてのアクションに。

ステップ14. 3番目のアニメーションを作成する

前景の別の画像を選択します。スクロールアクションを含めます シフト最初のキーフレームでは、下げます。値として 300px を指定します。2 番目のキーフレームでは、画像を上げます。次に、-500px などの値を設定します。これにより、画像は 800px の範囲を移動します。これは、最も近い画像よりも遅く、最も遠い画像よりも速くなります。

アニメーションのプレビュー

アニメーションを予測する プレビューモード デザイナーの画面またはキャンバス上で切り替えてライブ表示 ライブプレビュー オンにします。現時点では、視差効果がより顕著になり、このアニメーション内に奥行き感が増したように見えます。位置やイージングを変更して、意図した結果を実現します。

追加のアニメーションを組み込む

このスクロール アニメーション シーケンス全体にわたって、アニメーション化したい各画像にスクロール アクションを追加し続けます。一貫性のある視差スクロール アニメーションを作成するには、この体系的なパターンに従ってください。前景の要素 (Z インデックスが高いもの) は、背景の要素 (Z インデックスが低いもの) よりも速い速度で動いているように見えます。

ガジェットのアニメーションを無効にする

モバイルデバイスではこのアニメーションを無効にするオプションがあります。アニメーションタイムラインを閉じるには、 バツ 「パララックススクロール効果」の横にある その他の設定, デバイスを無効にする このやり取りをトリガーしたくない場合。

機能的情報 — 動きの速度

画像の Y 軸上の位置を確立すると同時に、動きの速度も確立します。これは、セグメント内を移動すると、最初の画像が 1000 ピクセルの Y 位置から -1000 ピクセルの Y 位置 (2000 ピクセルの距離) に移動するからです。次の画像は、-352 ピクセルの Y 位置から 352 ピクセルの Y 位置に移行する際に、704 ピクセルという短い距離を移動します。このセグメントには、3 つの平面または深さの層があるようです。

• 第1層 — 画像がより近く見え、より速いペースで動く
• 2番目の層 — 他のほぼすべての画像が標準的なペースで動いているように見える
• 3番目の層では、画像が遠くに見え、著しく遅い速度で動いているように見えます。