ディビのスクロール効果で視差の背景画像をアニメーション化する方法

スクロール効果と視差の背景画像を組み合わせると、訪問者にとって非常に魔法のようなデザインを作成できます。 視差効果は、ユーザーがページを下にスクロールするときにすでに画像を動かしているため、スクロール効果（水平方向の動きや回転など）を追加すると、デザインを際立たせ、よりクリエイティブなレイアウトの扉を開くことができます。

このチュートリアルでは、Diviのスクロール効果を使用して視差の背景画像をアニメーション化する方法について説明します。 複数のテキストモジュールで同じ背景画像を使用して、短いテキストブロックを表示するための独自のレイアウトを設計します。

始めましょう。

スニークピーク

アニメーション視差背景画像レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

始めるために必要なもの

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

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

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

Diviのスクロール効果を使用したアニメーション視差背景画像の作成

列の追加

まず、1列の行を作成します。

テキストモジュールの作成

次に、テキストモジュールを列に追加します。

テキストコンテンツ

本文の内容に「p」の文字を追加します。

視差背景画像をテキストモジュールに追加

次に、次のように視差の背景画像をテキストモジュールに追加します。

• 背景画像：画像を挿入
• 視差効果を使用する：はい
• 視差法：CSS

テキストのデザイン

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

• テキストフォント：Montserrat
• テキストフォントスタイル：TT
• テキストテキストの色：#ffffff
• テキストテキストサイズ：100px（デスクトップ）、70px（電話）
• テキスト文字の間隔：5px（電話）
• テキスト行の高さ：1em
• テキストの配置：中央
• パディング：上250px、下250px

パディングは、視差の背景画像を露出するために必要な高さを作成するものです。

行設定

テキストモジュールが完了したので、行設定を開き、以下を更新します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％

列1の設定

次に、をクリックして列設定を開きます。

[詳細設定]タブで、次のスクロール効果を更新します。

[水平モーションエフェクト]タブの下…

• 水平を有効にする：はい
• 開始オフセット：-2（0％ビューポートで）
• ミッドオフセット：0（40％-60％）
• 終了オフセット：-2（100％）

[回転効果]タブの下…

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

列2の作成

1列のレイアウトから始めましたが、合計5列を作成します。 すべてのコンテンツと設定を含む列を複製して、デザインに必要な次の4つを作成する方が簡単です。

最初の列全体を（テキストモジュールを使用して）複製して、2番目の列を作成します。

列2のスクロール効果の更新

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

[回転効果]タブの下…

• 先発投手：-20度
• 終了回転：20度

列3の作成

列3を作成するには、列2を複製します。

列3のスクロール効果の更新

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

[水平モーションエフェクト]タブの下…

• 水平運動を有効にする：いいえ

[回転効果]タブの下…

• 先発投手：20度
• 終了回転：10度

列4の作成

列4を作成するには、列2を複製してから、一番下にドラッグします。

列4のスクロール効果の更新

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

[水平モーションエフェクト]タブの下…

• 開始オフセット：2
• 終了オフセット：2

[回転効果]タブの下で…

• 先発投手：-15度
• 終了回転：20度

列5の作成

最後に、列5を作成するには、列4を複製します。

列5のスクロール効果の更新

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

[回転効果]タブの下で…

• 先発投手：15度
• 終了回転：-15度

テキストモジュールレターの更新

次に、インラインテキストオプションを使用して、各列の文字を変更し、「パワー」という単語をまとめて綴るようにします。

ミドルテキストモジュールデザインの更新

3列目のテキストモジュール設定を開き、以下を更新します。

• テキストフォント：Montserrat Subrayada
• テキストテキストの色：＃e0e722
• テキストテキストサイズ：150px（デスクトップ）
• テキスト行の高さ：100px

モバイル向けの最初のテキストモジュールコンテンツを更新する

モバイルで単一のテキストモジュールを表示するには、タブレットと電話のディスプレイで次のコンテンツで列1のテキストモジュールを更新する必要があります。

タブレットと電話のボディコンテンツ：

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

列1の設定を更新する

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

• 丸みを帯びた角（デスクトップ）：100％左上
• 丸みを帯びた角（タブレットと電話）：左上40％、右下40％

[詳細設定]タブで、次のカスタムCSSをメイン要素のタブレット表示に追加します。

width: 100% !important;

これにより、タブレットと電話のディスプレイで列が行の幅全体に広がるようになります。

タブレットと電話のディスプレイの残りの列を非表示にする

列1がタブレットと電話の行の幅全体に広がるので、タブレットと電話の残りの列を非表示/無効にできます。 これを行うには、列2〜5の設定を開き、電話とタブレットの各列の表示を無効にします。

列5の設定を更新する

次に、列5の設定を開き、次のように補完的な丸い角を追加します。

• 丸みを帯びた角（デスクトップ）：100％右下

セクションに背景デザインを追加する

デザインを完成させるには、次のようにセクション設定を背景デザインで更新します。

• 背景色：＃e0e722

• トップディバイダースタイル：スクリーンショットを参照
• トップディバイダーカラー：＃222222
• トップディバイダーの高さ：650px（デスクトップ）、500px（タブレットと電話）

• ボトムディバイダースタイル：スクリーンショットを参照
• ボトムディバイダーカラー：＃222222
• ボトムディバイダーの高さ：500px（デスクトップ）、400px（タブレットと電話）

最終結果

Hreはデスクトップの最終的なデザインです。

そして、これがタブレットと電話のディスプレイのフォールバックデザインです。

最終的な考え

視差の背景画像は、本当に魔法のようにスクロール効果と組み合わされています。 視差の背景画像を使用することの唯一の欠点は、モバイルがサポートされていないことですが、Diviが提供するレスポンシブ設定を使用すると、フォールバックを簡単に作成できます。 このエレガントなデザインがあなたの一日にインスピレーションを与えてくれることを願っています。

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

乾杯！