Diviのスクロールで背景アニメーションを使用してテキストマスクをデザインする方法

テキストマスクのデザインは、Diviの組み込みオプションを使用して驚くほど簡単に作成できます。 ビルダーには、テキストスタイル、背景、ブレンドモードのオプションなど、テキストマスク効果を作成するためのすべての要素があります。 実際、以前はブレンドモードを使用してテキストマスクデザインを作成しました。 しかし、スクロール効果を使用すると、テキストマスクのデザインをまったく新しいレベルに引き上げることができます。

このチュートリアルでは、Diviのスクロールで背景アニメーションを使用してテキストマスクをデザインする方法を紹介します。 デザインはユニークで、スクロール効果は本当にそれを生き生きとさせます。

始めましょう！

スニークピーク

このチュートリアルで作成するデザインを簡単に見てみましょう。

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

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

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

始めるために必要なもの

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

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

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

Diviで背景アニメーションを使用したテキストマスクの設計

行を追加する

開始するには、デフォルトの通常のセクションに2列の行を追加します。

セクション設定の更新

モジュールを追加する前に、セクション設定を開き、次のように背景色とパディングを更新します。

• 背景色：＃750046

• パディング：0px上、0px下

行設定を更新する

セクションの設定が完了したら、行の設定を開き、次の設計設定を更新します。

• 側溝幅：1
• 幅：100％
• 最大幅：100％
• パディング：0px上、0px下

テキストマスクデザインを作成するときにテキストにvwの長さの単位を使用するため、ガターの幅を1に、幅を100％に設定することが重要です。 vwの長さの単位はブラウザーの幅に基づいているため、親コンテナー（セクションと行）がブラウザーと同じ幅である100％であることが重要です。

列1の設定を更新する

テキストマスクと画像が左側の列（列1）に追加されます。 画像とテキストに追加するブレンドモードがこの色をブレンド/表示するように、列に背景色を追加する必要があります。 また、スクロールで画像をアニメーション化するときに、列の外側にオーバーフローした画像が表示されないように、オーバーフローを非表示に設定する必要があります。

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

• 背景色：＃750046
• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

テキストマスクの作成

テキストマスクを作成するには、テキストモジュールを列1に追加します。

テキストコンテンツ

次に、本文のコンテンツに「divi」という単語を追加します。 正方形のデザインで均等に積み重ねられるように、4文字の単語を使用しています。

テキストの背景

次に、テキストモジュールに白い背景色を追加します。

• 背景色：#ffffff

テキストデザイン

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

• テキストフォント：ルービックモノワン
• テキストフォントスタイル：TT
• テキストテキストの色：＃000000
• テキストテキストサイズ：25vw（デスクトップ）、50vw（タブレットと電話）
• テキスト行の高さ：0.8em
• テキストの配置：中央

• パディング：8vw上部、8vw下部

テキストブレンドモード

テキストマスクのデザインを完了するには、次のブレンドモードを追加します。

• ブレンドモード：画面

これまでのところ、このテキストマスク効果の4つの重要な要素は次のとおりです。

1. 列の背景
2. 白いテキストの背景
3. 黒のテキスト
4. テキストモジュールの画面ブレンドモード

スクリーンブレンドモードはレイヤーを増やし、ミックスのより軽いバージョンを生成します。 画面ブレンドモードでは、黒いテキストが完全に透明になり、その背後にあるもの（この場合は背景色）が明らかになります。

背景画像を追加する

テキストマスクに背景画像を追加するには、新しい画像モジュールを作成し、約1700px x2500pxの画像をアップロードします。 画像が列の高さと幅をカバーするように、画像のサイズは重要です。

画像デザイン

次に、次の設計設定を更新します。

• 全幅を強制：はい
• ブレンドモード：画面

このブレンドモードは、テキストマスク効果には必要ありませんが、デザインによく一致するように画像を背景色とブレンドします。

画像の位置

次に、画像に絶対位置を指定し、テキストモジュールの後ろに配置されるようにZインデックスを更新します。

• 位置：絶対
• Zインデックス：-1

画像スクロール効果

画像デザインの準備ができたら、[詳細設定]タブに移動し、次のようにスクロール効果オプションを更新します。

[垂直モーション]タブで、

• 開始オフセット：-1（0％）
• ミッドオフセット：0（50％）
• 終了オフセット：1（100％）

[水平方向のモーション]タブで、

• 開始オフセット：-0.5（0％）
• ミッドオフセット：0（50％）
• 終了オフセット：0.5（100％）

[スケールアップとスケールダウン]タブで、

• 開始スケール：110％（0％）
• ミッドスケール：125％（50％）
• 終了スケール：140％（100％）

結果

セクションに上下の余白を追加して、これまでの結果を確認できるようにすることができます。

モックテキストの作成

右側の列に、新しいテキストモジュールを追加します。

次のように本文の内容を更新します。

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

次に、テキストデザイン設定広告を更新します。

• テキストの色：明るい
• 見出し2フォント：ルービック
• 見出し2テキストサイズ：4vw
• パディング（デスクトップ）：16vw上部、5vw左、5vw右
• パディング（タブレット）：上16vw、下16vw、左5vw、右5vw

結果

オプションの調整

黒の背景/白のテキスト

テキストマスクに黒い背景を使用する場合は、テキストマスキング効果を構成する3つの主要なオプションを更新するだけです。

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

• 背景色：＃000000（黒）
• テキストテキストの色：#ffffff（白）
• ブレンドモード：乗算

そしてここに結果があります…

PNG画像の回転

また、アニメーション画像を背景が透明な画像（PNG）に変更して、別のクールな効果を得ることができます。 これは、回転スクロール効果を追加して使用したPNG画像の例です。

最終結果

これがすべてのデザインの別の見方です。

最終的な考え

うまくいけば、スクロールの背景アニメーションを備えたこれらのテキストマスクデザインは、あなたのサイトが必要としていた創造的なエッジを与えるでしょう。 テキストマスキング効果を作成するための基本的な要素がわかれば、ニーズに合わせてこのデザインの無数のバージョンを作成するのに問題はありません。

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

乾杯！