セクション ディバイダーを使用してスクロール効果を作成することは、あなたに命を吹き込むことができるシンプルで楽しいテクニックです。 サイトのWeb を使用して ワードプレスのテーマ ディビ。 セクション区切りは引き続き多用途のデザイン要素であり、トランジションに創造性を加えるのに役立ちます。 コンテンツ ページの。
しかし、Divi のスクロール効果を使用すると、セクション区切りがさらに面白くなります。 秘訣は、選択した分割スタイル専用のセクションを分離することです。 次に、スクロールによって生成されるあらゆる種類の動きをセクションに追加して、背景として美しいスクロール効果を作成できます。 コンテンツ ページ。
始めましょう！
考えられる結果
これは、このチュートリアルの最後に実現できる設計の概要です。
Diviでアニメーションのスクロールセクションディバイダーを作成する方法
XNUMXつのコンテンツセクションの作成
行を追加する
まず、デフォルトセクションにXNUMX列の行を作成します。
セクションマージン（テスト用）
テストの目的で、セクションに上部マージンを追加して、スクロールする余地を残します。 セクション設定を開き、以下を追加します。
- 上マージン：80vh
テキストモジュールを追加する
列の行に、新しいテキストモジュールを追加します。
テキストモジュールの内容
の中に コンテンツ 本文に、次の H2 見出しを追加します。
<h2>Section Avec Séparateurs</h2>
テキストモジュールの設計
デザイン設定で、以下を更新します。
- テキストフォント：Roboto
- テキストの配置：中央
- アイテム2テキストの色：＃bae0d8
- ヘッダー2テキストサイズ：80ピクセル（デスクトップ）、50ピクセル（タブレット）、30ピクセル（電話）
XNUMX番目のコンテンツセクションを追加する
前のセクションの下に、新しい通常のセクションを追加します。
行を追加する
新しいセクションで、列に行を追加します。
テキストモジュールを追加する
次に、新しいテキストモジュールを行に追加します。
テキストモジュールの設計
今のところ、デフォルトのパディングコンテンツを本文内に保持できます。 [デザイン]タブに移動して、以下を更新しましょう。
- テキストフォント：Roboto
- テキストのテキストの色：#dddddd
- テキストサイズ：16px
- テキスト行の高さ：1,5 em
- テキストの配置：左
- 最大幅：400ピクセル
- モジュールの配置：中央
セクション設定
セクションのデフォルトの背景色を必ず削除しますが、完全に透明な背景にします。 次に、スクロールテストの目的で、上部のパディングを削除し、下部のマージンを追加できます。
これを行うには、セクション設定を開き、以下を更新します。
- 背景色：rgba（0,0,0,0）
- 下マージン：80vh
- パディング：0px
アニメーションのセクション区切りの作成
XNUMXつのコンテンツセクションが完成したら、アニメーションセクションディバイダーのセクションを追加する準備が整います。
新しいセクションを追加する
先に進み、XNUMXつのコンテンツセクションの真ん中に新しい通常のセクションを作成します。
セクションのコンテキスト
また、セクションのデフォルトの背景色を削除しますが、以下を更新します。
- 背景色：rgba（0,0,0,0）
セクション区切りデザイン
心配しないでください。セクションの仕切りを使用して背景色を作成します。 これを行うには、[デザイン]タブをクリックし、次のようにセクションに上下の仕切りを追加します。
優れた仕切りデザイン
- トップディバイダースタイル：スクリーンショットを参照
- 上部仕切りの色：＃524fbf
- 上部仕切りの高さ：20vw
- 上部仕切りの水平方向の繰り返し：0,6x
- 上部仕切りの反転：水平
下部仕切りデザイン
- 下仕切りスタイル：スクリーンショットを参照
- 下セパレーターの色：＃524fbf
- 下部仕切りの高さ：20vw
- 下の仕切りの水平方向の繰り返し：0,5x
- 下の仕切りの傾き：水平および垂直
セクションの高さとパディング
このセクションは純粋に仕切りの設計用であるため、高さとパディングを削除して、仕切りのスタイルのみが表示され、XNUMXつのコンテンツセクションの間に不要なスペースが入らないようにすることができます。 以下を更新します。
- 高さ：0px
- パディング：0px high、0px low
セクション区切りのスクロール効果
次に、セクションに次のスクロール効果を与えます。
タブの下 水平移動 ...
- 水平移動を有効化：はい
のビューでこれのデフォルト設定を維持することができます ビューロー .
次に、水平移動パラメータを更新します tablette :
- 開始オフセット：3（ウィンドウの0％）
- 平均オフセット：0（ビューポートの50％）
- 終了オフセット：-3（ビューポートの100％で）
タブの下 効果の拡大と縮小 、次の更新 ビューロー ...
- 開始スケール：200％（ウィンドウの0％）
- 平均スケール：150％（ビューポートの45％-65％）
- 終了スケール：150％（ビューポートの100％で）
次に、スケールアップおよびスケールダウン効果を更新します。 tablette 次のように：
- 開始スケール：400％（ウィンドウの0％）
- 平均スケール：300％（ビューポートの45％-65％）
- 終了スケール：400％（ビューポートの100％で）
タブレット（および電話）のモーション効果を調整する必要がある主な理由は、ピクセル長単位（つまり、3 = 300ピクセル）を使用した水平方向のモーション値によるものです。絶対的であり、ブラウザの幅に合わせて調整しないでください。
次に、スクロールアニメーションのセクション区切りの最終結果を見てみましょう。
最終的な考え
スクロールでセクションの仕切りをアニメーション化することは、Webページに命を吹き込むための楽しく効果的な方法です。 これにより、さらにクリエイティブなデザインを自分で刺激するためのインスピレーションが得られることを願っています。
