回転スクロール効果をDiviの円形要素と組み合わせる創造的な方法

新しいウェブサイトをデザインするとき、私たちは常に注目のアイテム（製品やサービスなど）を紹介するための新しく創造的な方法を探しています。 また、Diviのスクロール効果により、宣伝文句のレイアウトをまったく新しいレベルに引き上げるための新しいドアが開かれました。 このチュートリアルでは、スクロール時に円形要素を回転させて宣伝文句モジュールのレイアウトを作成する方法を示します。 このユニークなレイアウトは、ユーザーがページを下にスクロールしたときに宣伝文の後ろで回転する複数の円形要素との色の組み合わせの巧妙な使用を特徴としています。 間違いなく、このデザインには、ほぼすべてのコンテンツに多くのアプリケーションが含まれます。

楽しみ！

スニークピーク

このチュートリアルで作成している回転する円形要素を使用した宣伝文のレイアウトを簡単に見てみましょう。

回転する円形要素の宣伝文句のレイアウトを無料でダウンロードする

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

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

無料でダウンロード

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

ダウンロード

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

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

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

始めるために必要なもの

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

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviのスクロールで円形要素を回転させて宣伝文句を作成する

行の追加

まず、セクションに3列の行を追加します。

一時的なセクションマージン

次に、スクロールするスペースを作成するために、セクションに上下の余白を追加します。

回転する円形要素の宣伝文句のデザイン＃1を作成する

最初のデザインでは、宣伝文の後ろに配置され、ユーザーがスクロールすると回転する3つのカラフルな仕切りモジュールを備えた宣伝文モジュールを作成します。 この最初のデザインは、他の列に追加する次の2つのデザインの優れたテンプレートとして機能します。

作成方法は次のとおりです。

宣伝文モジュールを追加する

列1に、宣伝文モジュールを追加します。

ぼかし1コンテンツ

宣伝文モジュールの設定を開き、本文の内容を次のように更新します。

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

次に、選択したアイコンを追加して、デフォルトの画像を置き換えます。

ぼかし1のデザイン設定

[デザイン]タブで、以下を更新します。

• 背景色：＃121212
• アイコンの色：＃41828d
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：75px
• テキストの配置：中央
• タイトルフォント：Oswald
• タイトルフォントスタイル：TT
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：22px
• 本文の色：#ffffff

宣伝文を円形にするには、次のようにサイズと丸みを帯びた角を更新します。

• 幅：300px
• 最大幅：300px
• パディング：上25px、下25px、左25px、右25px
• 丸みを帯びた角：50％

等しい幅と高さの組み合わせと丸みを帯びた角が、宣伝文句を円形にします。

次に、オフセットで位置を更新します。

• 位置：相対
• 垂直オフセット：25px
• 水平オフセット：25px
• Zインデックス：1

これにより、後で追加する仕切り内の宣伝文句が中央に配置されます。 Zインデックスは、宣伝文が他の仕切りの上にもあることを確認します。

次に、宣伝文に回転スクロール効果を追加します。

[回転効果]タブの下…

• 回転を有効にする：はい
• 先発投手：45度（0％ビューポート）
• 中間回転：0度（40％〜60％のビューポートで）
• 終了回転：-45度（100％ビューポートで）

これにより、宣伝文がページの中央に向かってわずかに直立した位置に回転し、ページの上部を離れるときにさらに45度回転します。

サーキュラーディバイダー＃1を追加

次に、回転する円形要素の設計を構成する3つの仕切りモジュールのうちの最初のモジュールを追加します。

宣伝文モジュールの下に仕切りモジュールを追加します。

仕切り1の設定

仕切りの設定を開き、以下を更新します。

• 仕切りを表示：いいえ
• 背景のグラデーションの左の色：＃311847
• 背景のグラデーションの正しい色：＃ec4067
• 開始位置：50％
• 終了位置：50％

そして今、私たちはそれを次のように円形にします：

• 幅：350px
• 最大幅：350px
• 高さ：350px
• 丸みを帯びた角：50％

仕切りが宣伝文モジュールよりわずかに大きいことに注意してください。これにより、宣伝文の後ろに配置された仕切りの外側の縁を見ることができます。
ここで、仕切りの位置を絶対に更新するだけで、宣伝文句の後ろに完全に配置されます。

• 位置：絶対

仕切りが宣伝文の上にある場合は、宣伝文のzインデックスを1に更新したことを確認してください。

次に、次のスクロール効果を仕切りに追加します。

[回転効果]タブの下…

• 回転を有効にする：はい
• 先発投手：0度（0％ビューポート）
• 中間回転：45度（50％ビューポートで）
• 終了回転：-180度（100％ビューポートで）

Circular Divider2を追加します

2番目の円形の仕切りを作成するには、設定メニューのレイヤーアイコンをクリックしてレイヤーボックスを開きます。 次に、仕切りモジュールを複製して新しいモジュールを作成します。

ディバイダー2のデザイン設定を更新する

この仕切りには、次のように異なるグラデーションの背景色を付けましょう。

• 背景グラデーションの左の色：rgba（160,26,125,0.5）
• 背景グラデーションの右の色：rgba（255,255,255,0）

注：背後の背景を露出させるために、ここでは半透明の色を使用することが重要です。 これにより、美しい色の組み合わせが作成されます。

次に、スクロール効果を次のように更新します。

[回転効果]タブの下…

• 中間回転：90度（50％ビューポートで）
• 終了回転：180度（100％ビューポートで）

Circular Divider3を追加します

同じプロセスを続けて、仕切り2を複製して、3番目の最後の仕切りを作成します。

ディバイダー3のデザイン設定を更新する

この仕切りには、次のように異なるグラデーションの背景色を付けましょう。

• 背景グラデーションの左の色：rgba（255,255,255,0）
• 背景グラデーションの正しい色：rgba（41,196,169,0.5）

次に、スクロール効果を次のように更新します。

[回転効果]タブの下…

• 中間回転：180度（50％ビューポートで）
• 終了回転：360度（100％ビューポートで）

[スケールアップとスケールダウン]タブの下…

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：110％（0％ビューポートで）
• ミッドスケール：110％（50％ビューポート）
• 終了スケール：100％（100％ビューポートで）

回転する円形要素の宣伝文句のデザイン＃2の作成

列1にはすでに完成したデザインがあるので、最初の列全体を複製して2番目のデザインをジャンプスタートしましょう。 これにより、4つのモジュールも引き継がれます。 3列のレイアウトを維持するには、空の列の1つを削除する必要があります。

宣伝文モジュールの設計を更新する

このデザインでは、白い宣伝文の背景を使用して、画面フィルター効果を使用して宣伝文の背後にある移動する色を表示できるようにします。 また、後ろの仕切りを大きくするために、スケーリングスクロール効果を追加します。

これがその方法です。

列2の宣伝文モジュールの設定を開き、以下を更新します。

• 背景：#ffffff

次に、タイトルと本文の色を黒に変更します。

• タイトルテキストの色：＃000000
• 本文の色：＃000000

次に、次のブレンドモードを追加します。

• ブレンドモード：画面

Divider1のスクロール効果を更新する

列2の宣伝文モジュールのすぐ下にある仕切りモジュールの設定を開き、次のスクロール効果を更新します。
[スケールアップおよびスケールダウン効果]タブの下…

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：100％（0％ビューポートで）
• ミッドスケール：120％（40％-60％ビューポート）
• 終了スケール：100％（100％ビューポートで）

これにより、ユーザーがページを下にスクロールすると、仕切りが元のサイズの20％大きくなります。

回転する円形要素の宣伝文句のデザイン＃3の作成

この最後のデザインでは、列1と同様の回転する円形の宣伝文を作成します。ただし、暗い背景の白いテキストに色を表示するために、別のブレンドモードを追加します。

これがその方法です。

重複する列1

列1にはすでに完成したデザインがあるので、最初の列全体を複製して3番目のデザインをジャンプスタートし、レイヤーボックスを使用して3番目の列の配置に移動しましょう。 次に、余分な空の列を削除します。

宣伝文モジュールの設定を更新する

まず、次のように、白いテキストに仕切りの色を表示するために、乗算ブレンドモードを追加しましょう。

• ブレンドモード：複数

次に、アイコンの色も白に更新します。

• アイコンの色：#ffffff

Divider3の設定を更新する

次に、列3の最後（3番目）の仕切りのスケーリングスクロール効果を取り出します。
3番目の仕切りの設定を開き、以下を更新します。

[スケールアップおよびダウンエフェクト]タブの下…

• スケールアップとスケールダウンを有効にする：いいえ

モバイルで列2の位置を調整する

現在、3つの宣伝文のデザインは、タブレットと電話のディスプレイの画面の左側に配置されます。 デザインのバランスをとるために、変換スケールを使用して中央の列を右に簡単に移動できます。

列2の設定を開き、以下を更新します。

変換スケールX軸：40％（タブレットの場合）、15％（電話の場合）

最終結果

それでおしまい！ ライブページで最終結果を確認してみましょう。

これは、ユーザーがレイアウトをスクロールするときのデスクトップ上のデザインです。

こちらがタブレットのデザインです。

そして、ここでそれは電話です。

最終的な考え

このレイアウトの最も優れた機能の1つは、スクロール効果と色の組み合わせで創造性を発揮できることです。これらはそれぞれ、Diviの組み込みオプションを使用して簡単に調整できます。 そして、フィルター効果を組み込む方法をよりよく理解すると、物事は本当に飛び出し始めます。 うまくいけば、これはあなたが作成する次の宣伝文句のレイアウトのためのいくつかのインスピレーションをあなたに与えるでしょう。

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

乾杯！