セクション内で要素をフロートさせてDiviで動的スクロール効果を作成する方法

セクション内のフローティング要素は、ユーザーがページを下にスクロールしたときにコンテンツを表示するための効果的でユニークな方法を提供できます。 Diviを使用すると、使用可能な組み込みの位置オプションを使用して要素に固定位置を与えるだけで、要素をフロートさせることができます。 また、固定要素を静的要素、アニメーション、視差と組み合わせると、コンテンツが活気づきます。

このチュートリアルでは、Diviのセクション内で要素（画像と宣伝文句）をフロートさせて、美しくダイナミックなスクロール効果を作成する方法を紹介します。

始めましょう！

スニークピーク

これは、私たちが構築するフローティング要素の設計の概要です。

私たちのYoutubeチャンネルを購読する

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。

注：Divi Builderをビジュアルモードで使用してアイテムを編集する場合は、ワイヤーフレームビューモードを展開し、中央セクションのデフォルトのZインデックスを復元する必要があります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。 その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
4. このチュートリアルで使用したものと同じ画像を使用するには、ここをクリックしてCandy Shop LayoutPackから画像をダウンロードできます。

3列のセクションを作成する

3列の行を作成して作業を始めましょう。

次に、次のように行設定を更新します。

• 側溝幅：1
• 幅：100％
• 最大幅：100％

列1の設定を開き、次のパディングを追加します。

• パディング：10vw上、5vw下

これは、画像のレイアウトを少しずらして、列に高さを追加するのに役立ちます。

列2の設定を開き、次のZインデックスを追加します。

• Zインデックス：12

これにより、中央の列に追加する宣伝文モジュールが、セクションの他のすべてのコンテンツの上にとどまるようになります。

静的および固定位置の画像の追加

次のステップは、フローティング画像を左右の列に追加することです。 4つの画像は静的（デフォルト）位置を維持しますが、2つは固定位置にします。 これは、一部が浮いているような錯覚を与えるのに役立ちます。

画像＃1（静的）

列1に新しい画像モジュールを追加します。

モジュールに画像をアップロードします。

画像の次のデザイン設定を更新します。

• 幅：200px
• モジュールの配置：右
• ぼかし：2px
• 変換変換（Y）：-58px
• 変換変換（X）：63px

画像＃2（修正済み）

列1の最初の画像モジュールの下に2番目の画像モジュールを追加します。

モジュールに新しい画像をアップロードします。

画像＃2のデザイン設定を次のように更新します。

• 幅：200px
• 位置：固定
• 場所：左上
• 垂直オフセット：7％
• 水平オフセット：5％

画像＃3（静的）

列1の2番目の下に3番目の画像を追加します。

モジュールに新しい画像をアップロードします。

画像のデザイン設定を次のように更新します。

• 幅：300px
• モジュールの配置：右
• 変換変換（Y）：179px
• 変換変換（X）：128px

画像＃4（静的）

4番目の画像モジュールを列3に追加します。

モジュールに新しい画像をアップロードします。

画像＃4のデザイン設定を次のように更新します。

• 幅：200px
• モジュールの配置：左
• ぼかし：4px
• 変換変換（Y）：-9px
• 変換変換（X）：-30px

ぼかし効果は、画像が遠くにあるような錯覚を与えるのに役立ちます。

画像＃5（修正済み）

次に、列3の画像＃4の下に新しい画像モジュールを追加します。

次のように、モジュールに新しい画像をアップロードします。

画像＃5のデザイン設定を次のように更新します。

• 幅：200px
• 位置：固定
• 場所：右下
• 垂直オフセット：7％
• 水平オフセット：5％

画像＃6（静的）

3列目の画像＃5の下に6番目の最後の画像を追加します。

モジュールに新しい画像をアップロードします。

画像＃6のデザイン設定を次のように更新します。

• 幅：300px
• モジュールの配置：左
• 変換変換（Y）：62px
• 変換変換（X）：-122px

固定位置で宣伝文を追加する

最後のコンテンツをセクションに追加する準備が整いました。 これは、固定位置にもある主な宣伝文句になります。

中央の列（列2）に宣伝文句モジュールを追加します。

次に、宣伝文の内容を次のように更新します。

• タイトル：Sweet Deal

次に、テキストタブの下の本文に次のHTMLを追加します。

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

<a href="#">Learn More</a>

宣伝文に画像を追加します。

次の設定を更新して、宣伝文をデザインします。

• 背景色：#ffffff
• テキストの配置：中央
• タイトルフォント：コンサートワン
• タイトルテキストの色：＃0a2d61
• タイトルテキストサイズ：50px
• ボディフォント：コンサートワン
• 本文サイズ：20px
• ボディラインの高さ：1.8em
• リンクフォントスタイル：TT
• リンクテキストの色：＃ff3d97
• リンクテキストサイズ：20px
• リンク文字の間隔：5px
• 幅：400px
• パディング：上30px、下30px、左30px、右30px

• 丸みを帯びた角：10px
• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：80px

次に、最後に宣伝文を中央の位置で固定位置にします。

• 位置：固定
• 場所：ミドル/センター

モックトップとボトムセクションの作成

現在のセクションの下に新しい通常のセクションを追加します。

セクションに背景色を付けます。

• 背景色：＃4DB9FF

次に、フローティング要素を含むセクションをスクロールするのに十分なスペースを確保できるように、高さを指定します。

• 高さ：100vh

モックセクションを複製し、複製をページの上部に移動して、フローティング要素を含むメインセクションが中央セクションになるようにします。

ミドルセクションへの最後の仕上げ

デザインを完成させるために、視差の背景をセクションに追加して、動きの別のレイヤーを追加します。 また、オーバーフローを非表示にする必要があります。 しかし、主な問題は、固定要素がまだ上部セクションと下部セクションの上に表示されていることです。 これを修正するには、セクションに-1Zインデックスを付ける必要があります。

• 背景画像：画像を挿入
• 視差効果を使用する：はい
• 視差効果：真の視差
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示
• Zインデックス：-1

注：セクションに-1のZインデックスを指定すると、デスクトップビューモードのビジュアルビルダーが正しく機能しない場合があります。 したがって、セクションをさらに編集するには、ワイヤフレームビューモードを展開する必要がある場合があります。

静的要素の追加アニメーション

複数選択を使用して4つの静止画像を選択し、次のアニメーション設定で要素設定を更新します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーション時間：4000ms
• アニメーションの開始不透明度：100％

これにより、画像がスクロール時に表示されたときに画像のフローティング効果が追加されます。

最終結果

これが最終結果です。

最終的な考え

Diviで要素をフローティングするには、数回クリックするだけで固定位置を指定し、オフセットを使用して、ブラウザ内で固定したい正確な場所に要素を配置できます。 次に、Zインデックスを使用して、固定要素が特定のセクションにのみ表示されるようにすることができます。 基本的な設定が完了したら、静的要素、視差の背景、アニメーションを追加してセクションを生き生きとさせることで、スクロール効果を向上させることができます。 これにより、次のDiviビルドで少しクリエイティブになることを願っています。

このセクションをまったく新しいレベルに引き上げたい場合は、Diviに組み込まれている新しいスクロールエフェクトを確認してください。

コメントでお返事をお待ちしております。

乾杯！