Diviのスクロール効果を使用してエンベロープアニメーションを作成する方法

新しいDivi機能が登場するたびに、私たちはあなたが箱の外で考え、Diviで創造的になるのを助けるいくつかのクールで便利なチュートリアルを共有しようとします。 今日のチュートリアルはまさにそれを行います。 Diviのスクロール効果を使用してレスポンシブエンベロープアニメーションを作成する方法を紹介します。 これは、たとえば、行動ブロックの呼び出しを強調するための優れた方法ですが、他の目的にも使用できます。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

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

エンベロープアニメーションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

要素構造を再作成する

ページの中央または下部に新しいセクションを追加

背景色

ページの中央または下部に新しいセクションを追加することから始めます。 セクション設定を開き、背景色を白に変更します。

• 背景色：#FFFFFF

間隔

次に間隔設定を変更します。

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

オーバーフロー

そして、セクションオーバーフローを非表示にします。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

行＃1を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：#FFFFFF

サイジング

次に行のデザインタブに移動し、次のようにサイズ設定を変更します。

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

間隔

次に、さまざまな画面サイズにカスタムパディング値を追加します。

• トップパディング：14vw（デスクトップ）、11vw（タブレットと電話）
• 下部のパディング：14vw（デスクトップ）、11vw（タブレットと電話）
• 左パディング：20vw（デスクトップ）、10vw（タブレットと電話）
• 右パディング：20vw（デスクトップ）、10vw（タブレットと電話）

国境

境界線の半径も追加します。

• すべてのコーナー：20px

ボックスシャドウ

微妙なボックスシャドウも使用しています。

• ボックスシャドウの垂直位置：38px
• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.08）

Zインデックス

[詳細設定]タブでzインデックスを増やして、行の設定を完了します。

• Zインデックス：11

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

H2コンテンツを追加する

最初のテキストモジュールから始めて、モジュールを追加します。 お好みのH2コンテンツを入力してください。

H2テキスト設定

モジュールのH2テキスト設定を次のように変更します。

• 見出し2フォント：ポピンズ
• 見出し2テキストサイズ：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）

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

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した説明コンテンツを挿入します。

テキスト設定

モジュールの[デザイン]タブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• テキスト行の高さ：2.6em

間隔

さまざまな画面サイズにわたって、カスタムの上部と下部の値も追加します。

• トップパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• 下部のパディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）

ボタンモジュールを列に追加

コピーを追加

この行に配置する次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃0f33ff
• ボタンの境界線の幅：0px

• ボタンの境界線半径：100px
• ボタンフォント：ポピン

間隔

そして、さまざまな画面サイズにカスタムパディング値を追加して、モジュールの設定を完了します。

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 右パディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）

行＃2を追加

カラム構造

召喚状の行が配置されたので、エンベロープシェイプの作成を開始します。 これを行うには、次の列構造を使用して新しい行を追加します。

サイジング

次のようにサイズ設定を変更して、行がセクションの幅全体を占めるようにします。

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

間隔

デフォルトの上下のパディングもすべて削除します。

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

画面

また、小さい画面サイズで列が隣り合って表示されるようにするために、1行のCSSコードを行のメイン要素に追加します。

display: flex;

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

画像ボックスを空のままにします

画像モジュールを列1に追加し、画像ボックスを空のままにします。

グラデーションの背景

代わりに、グラデーションの背景を使用しています。

• 色1：rgba（255,255,255,0）
• 色2：＃e8e8e8
• グラデーションタイプ：線形
• グラデーション方向：150度
• 開始位置：50％
• 終了位置：50％

間隔

それに応じてモジュールのパディング値を変更します。

• トップパディング：15vw
• ボトムパディング：15vw

列1にイメージモジュールをクローンし、列2に複製を配置します

列1のイメージモジュールを完了したら、モジュール全体のクローンを作成し、複製を列2に配置できます。

グラデーションの背景を変更する

グラデーションの背景を次のように変更します。

• 色1：rgba（255,255,255,0）
• 色2：#efefef
• グラデーションタイプ：線形
• グラデーション方向：210度
• 開始位置：50％
• 終了位置：50％

行＃3を追加

カラム構造

エンベロープの下部を作成するには、次の列構造を持つ別の行が必要です。

サイジング

行設定を開き、次のようにサイズ設定を変更します。

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

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

画面

また、行のメイン要素に1行のCSSコードを追加して、両方の列を並べて表示できるようにします。

display: flex;

Zインデックス

[詳細設定]タブでzインデックスを増やして、行の設定を完了します。

• Zインデックス：12

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

画像ボックスを空のままにします

画像モジュールを列1に追加し、ここでも画像ボックスを空のままにします。

グラデーションの背景

代わりにグラデーションの背景を使用してください。

• 色1：rgba（255,255,255,0）
• 色2：#efefef
• グラデーションタイプ：線形
• 勾配方向：213度
• 開始位置：40％
• 終了位置：40％

間隔

また、上部と下部のパディングを追加して、モジュールのサイズを大きくします。

• トップパディング：20vw
• ボトムパディング：20vw

列1にイメージモジュールをクローンし、列2に複製を配置します

列1のイメージモジュールを完了したら、それを複製して列2に複製を配置できます。

グラデーションの背景を変更する

複製のグラデーションの背景を必ず変更してください。

• 色1：rgba（255,255,255,0）
• 色2：＃e8e8e8
• グラデーションタイプ：線形
• グラデーション方向：147度
• 開始位置：40％
• 終了位置：40％

行＃1に垂直モーションを追加

これで、エンベロープアニメーションを機能させるための最後の部分は、セクションの最初の行にレスポンシブ垂直モーションスクロール効果を追加することです。これで完了です。

• 垂直モーションを有効にする：はい
• 開始オフセット：
  • デスクトップ：0（68％）
  • タブレット：0.5（61％）
  • 電話番号：0.5（43％）
• ミッドオフセット：
  • デスクトップ：6.5（81％）
  • タブレットと電話：21.5（82％）
• 終了オフセット：
  • デスクトップ：16（95％）
  • タブレットと電話：21.5（82％）

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスクロール効果を使ってクリエイティブになる方法を紹介しました。 具体的には、エンベロープアニメーションを作成する方法を示しました。 このアニメーションは、たとえばCTAブロックを強調表示するなど、さまざまな用途に使用できます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。