衝突するアニメーションをDiviを使用してデザイン要素に適用する方法

ページのデザイン要素にアニメーションを追加すると、エンゲージメントを高めるのに間違いなく役立ちます。 Diviのビジュアルビルダーには多くのアニメーションオプションがあり、それらは非常に簡単に使用できます。 ただし、これらのアニメーションでクリエイティブになり、独自の方法で使用することもできます。 この投稿では、Diviの組み込みオプションのみを使用して、段階的に再作成する衝突アニメーションの3つの例を扱います。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、このチュートリアル内で再現する3つの例を簡単に見てみましょう。

例1：テキストの衝突

例2：ディバイダーの衝突

例3：衝突するグリッド

ホバー

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

例1の再作成：テキストの衝突

専門セクションを追加

構造

最初の例から始めましょう！ 新規または既存のページを開き、次の構造を使用して新しい専門セクションを追加します。

サイジング

モジュールや行を追加せずに、セクション設定を開き、サイズ設定で[このセクションを全幅にする]オプションを有効にします。

行＃1を追加

カラム構造

専門セクションに行を追加して続行します。

サイジング

行設定を開き、サイズ設定にいくつかの変更を加えます。

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

間隔

間隔設定でもカスタムパディング値を変更します。

• トップパディング：44px
• ボトムパディング：0px

列1にテキストモジュールを追加

コンテンツを追加する

行の最初の列にテキストモジュールを追加して続行し、コンテンツを追加します。

見出しテキストの設定

次に、見出しのテキスト設定を変更します。

• 見出しフォント：Montserrat
• 見出しフォントの太さ：軽い
• 見出しのテキストサイズ：4.4vw（デスクトップ）、8.2vw（タブレット）、40px（電話）
• 見出し線の高さ：0.7em

Dividerモジュールを列1に追加します

可視性

列1に必要な2番目のモジュールは、ディバイダーモジュールです。 [仕切りを表示]オプションを有効にして、仕切りが表示されることを確認します。

• 仕切りを表示：はい

色

デザインタブに移動し、仕切りの色を変更します。

• 色：＃000000

サイジング

仕切りの幅も小さくします。

• 幅：91％

間隔

また、上部マージンを追加して、ディバイダーモジュールとテキストモジュールの間にスペースを作成します。

• トップマージン：30px

アニメーション

最後に、Dividerモジュールに微妙なアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左

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

コンテンツを追加する

2番目の列に移動し、選択したコンテンツを含む2番目のテキストモジュールを追加します。

見出しテキストの設定

次に、見出しのテキスト設定を変更します。

• 見出しフォント：Montserrat
• 見出しフォントの太さ：軽い
• 見出しのテキストの色：＃3f46ff
• 見出しのテキストサイズ：3.8vw（デスクトップ）、6.5vw（タブレット）、40px（電話）
• 見出し線の高さ：0.8em

アニメーション

また、このモジュールにもアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：600ms
• アニメーション強度：10％

行＃2を追加

カラム構造

次の列構造を使用して、セクションに別の行を追加して続行します。

残りのモジュールを追加する

この新しい行に表示する他のモジュールを追加し、必要に応じて変更します。

例2の再作成：ディバイダーの衝突

専門セクションを追加

構造

次の例に移りましょう！ 次の構造を使用して、新しい専門セクションを追加します。

サイジング

行やモジュールを追加せずに、セクション設定を開き、[このセクションを全幅にする]オプションを有効にします。

• このセクションを全幅にする：はい

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

間隔

行設定を開き、カスタムパディング設定を変更します。

• トップパディング：44px
• ボトムパディング：0px

テキストモジュールを追加

コンテンツを追加する

次に、選択したコンテンツを含むテキストモジュールを行に追加します。

見出しテキストの設定

[デザイン]タブに移動し、見出しのテキスト設定を変更します。

• 見出しフォント：Montserrat
• 見出しフォントの太さ：軽い
• 見出しのテキストサイズ：70px（デスクトップ）、50px（タブレット）、40px（電話）
• 見出し線の高さ：0.8em

行＃2を追加

カラム構造

次の列構造を使用して、別の行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：53％（デスクトップ）、100％（タブレットと電話）

間隔

カスタムパディング値も変更します。

• トップパディング：50px
• ボトムパディング：0px

Dividerモジュールを列1に追加します

可視性

行設定の変更が完了したら、先に進んでディバイダーモジュールを最初の列に追加し、[ディバイダーを表示]オプションを有効にしてディバイダーが表示されることを確認します。

• 仕切りを表示：はい

色

次に仕切りの色を変更します。

• 仕切りの色：＃3f46ff

スタイル

そして、スタイル設定で仕切りスタイルを変更します。

• 仕切りスタイル：ダブル

サイジング

サイズ設定でも仕切りの重量を増やします。

• 仕切りの重量：8px

アニメーション

最後に、Dividerモジュールにアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右

クローンディバイダーモジュールと2列目に配置

Divider Module設定の変更が完了したら、先に進んでモジュールのクローンを作成します。 行の2番目の列に複製を配置します。

アニメーションの変更

衝突効果を作成するには、複製したDividerModuleのアニメーションの方向を変更します。

• アニメーションスタイル：スライド
• アニメーションの方向：左

行＃3を追加

カラム構造

次の列構造を使用して、別の行を追加して続行します。

残りのモジュールを追加する

そして、セクションの設計を完了するために必要な数のモジュールを追加します。

例3の再作成：衝突するグリッド

新しいセクションを追加

間隔

次の最後の例に移りましょう！ 通常のセクションを追加し、設定を開きます。 間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：300px
• ボトムパディング：200px

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

画像モジュールを列に追加

シェイプされた画像オーバーレイをアップロードする

右クリックして、次の形状の画像オーバーレイをデスクトップに保存します。

整形された画像オーバーレイを保存したら、Divi Webサイトに戻り、画像モジュールを行に追加します。 ダウンロードフォルダにある整形画像オーバーレイファイルをアップロードします。

グラデーションの背景

次に、グラデーションの背景をモジュールに追加します。

• 色1：＃aa2bff
• カラー2：＃09f7eb

配置

画像の配置も変更します。

• 画像の配置：中央

サイジング

また、サイズ設定で[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

モジュールにもカスタムマージンを追加します。

• 左マージン：200px
• 右マージン：200px

アニメーション

最後に、モジュールにアニメーションを追加します。

• アニメーションスタイル：ズーム
• アニメーションの方向性：中央
• アニメーション時間：3000ms
• アニメーション強度：100％

行＃2を追加

カラム構造

2行目に。 次の列構造を使用します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。

• カスタム幅を使用：はい
• ユニット：PX
• カスタム幅：944px
• カスタムガター幅を使用：はい
• 側溝幅：1

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

コンテンツを追加する

最初の列に宣伝文モジュールを追加して続行します。 選択したコンテンツを入力します。

アイコン

次にアイコンを選択します。

背景色

また、モジュールに背景色も追加します。

• 背景色：rgba（255,255,255,0.83）

アイコン設定

デザインタブに移動し、アイコンの設定を変更します。

• アイコンの色：＃000000
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：73px

タイトルテキスト設定

タイトルテキストの設定も変更します。

• タイトルフォント：Open Sans
• タイトルフォントの太さ：半太字
• タイトルテキストの配置：中央
• タイトルテキストサイズ：15px
• タイトル文字の間隔：-1px
• タイトルラインの高さ：1.8em

サイジング

また、サイズ設定でコンテンツの幅を狭くします。

• コンテンツの幅：183px

間隔

カスタムの上部と下部のパディングも追加します。

• トップパディング：50px
• ボトムパディング：50px

ボックスシャドウ

宣伝文句モジュールに微妙なボックスシャドウを付けて続行します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

トランジション

また、[詳細設定]タブで移行期間を長くします。

• 移行時間：600ms

宣伝文句モジュールを8回クローンし、残りの各列に3つの複製を配置します

これで、最初の宣伝文句モジュールの変更が完了したら、先に進んで8回クローンを作成できます。 2番目の列に3つ、3番目の列に3つの複製を配置します。 このチュートリアルの次のパートでは、各宣伝文モジュールに固有の変更を加えます。 そのために、以下の番号に従います。

宣伝文モジュール＃1を変更する

間隔

最初の宣伝文句モジュールを開き、負の上部マージンを追加します。

• 上マージン：-340px（デスクトップ）、0px（タブレットと電話）

ホバー間隔

ホバー時にマージン値を変更します。

• 上マージン：-380px
• 下マージン：40px
• 左マージン：-40px
• 右マージン：40px

丸い角

モジュールの左上隅に「30px」を追加して続行します。

アニメーション

そして、アニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：200ms

宣伝文モジュール＃2を変更する

背景色

2番目の宣伝文モジュールを開き、背景色を変更します。

• 背景色：rgba（255,255,255,0.93）

間隔

モジュールに負の上部マージンを追加して続行します。

• 上マージン：-340px（デスクトップ）、0px（タブレットと電話）

ホバー間隔

ホバー時にこれらのマージン値を変更します。

• 上マージン：-380px
• 下マージン：40px

アニメーション

そして、モジュールにアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：400ms

宣伝文モジュール＃3を変更する

間隔

3番目の宣伝文モジュールに移ります。 負の上部マージンを追加します。

• 上マージン：-340px（デスクトップ）、0px（タブレットと電話）

ホバー間隔

ホバー時にマージン値を変更します。

• 上マージン：-380px
• 下マージン：40px
• 左マージン：40px
• 右マージン：-40px

丸い角

モジュールの右上隅にも「30px」を追加します。

アニメーション

そして、アニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：600ms

宣伝文モジュール＃4を変更する

背景色

4番目のモジュールに移ります。 設定を開き、背景色を変更します。

• 背景色：rgba（255,255,255,0.93）

ホバー間隔

次に、いくつかのホバーマージン値を追加します。

• 左マージン：-40px
• 右マージン：40px

アニメーション

また、アニメーションも追加します。

• アニメーションスタイル：フェード
• アニメーションの遅延：800ms

宣伝文モジュール＃5を変更する

アニメーション

5番目のモジュールに進みます。 ここで行う必要があるのは、アニメーションを追加することだけです。

• アニメーションスタイル：フェード
• アニメーションの遅延：1000ms

宣伝文モジュール＃6を変更する

背景色

6番目のモジュールを開いて続行し、背景色を変更します。

• 背景色：rgba（255,255,255,0.93）

ホバー間隔

ホバー時に間隔の値も変更します。

• 左マージン：40px
• 右マージン：-40px

アニメーション

そして、アニメーションを追加します。

• アニメーションスタイル：フェード
• アニメーションの遅延：1200ms

宣伝文モジュール＃7を変更する

ホバー間隔

7番目のモジュールに移ります。 間隔設定にいくつかのホバーマージン値を追加します。

• トップマージン：40px
• 左マージン：-40px
• 右マージン：40px

丸い角

モジュールの左下隅に境界半径の「30px」を追加して続行します。

アニメーション

そして、アニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：1400ms

宣伝文モジュール＃8を変更する

背景色

8番目のモジュールを開いて続行し、背景色を変更します。

• 背景色：rgba（255,255,255,0.93）

ホバー間隔

次に、ホバー時にカスタムマージンをモジュールに追加します。

• トップマージン：40px

アニメーション

この宣伝文モジュールにもアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：1600ms

宣伝文モジュール＃9を変更する

ホバー間隔

9番目で最後のモジュールへ！ 間隔設定に移動し、いくつかのカスタムホバーマージン値を追加します。

• トップマージン：40px
• 左マージン：40px
• 右マージン：-40px

丸い角

右下隅にも境界半径の「30px」を追加します。

アニメーション

そして、アニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーションの遅延：1800ms

行＃1の画像モジュールに負の下部マージンを追加します

ここで、この例の最初の部分で作成した円とグリッドを衝突させるために、画像モジュール（整形された画像オーバーレイを含む）に負の下部マージンを与えます。

• 下マージン：-520px

プレビュー

すべての手順を完了したので、達成した結果を最後に見てみましょう。

例1：ディバイダーの衝突

例2：テキストの衝突

例3：衝突するグリッド

ホバー

最終的な考え

あなたのページにアニメーションを追加することはあなたの訪問者とあなたの間のより多くの相互作用を作成するのを助けることができます。 もちろん、Visual Builder内にあるアニメーション設定を使用することもできますが、衝突するアニメーションをデザイン要素に適用することでさらに一歩進めて、すばらしい結果を得ることができます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！