Diviの無料のカラフルなスパッタアニメーションヒーローセクションをダウンロードする

ページのヒーローセクションをデザインする方法は、ページの残りの部分に対する期待を設定します。 記念日であろうとセールであろうと、何かを祝うランディングページをデザインしている場合、それは間違いなくあなたのデザインにお祝いのムードをもたらすのに役立ちます。 これにアプローチする1つの方法は、ヒーローセクションの背景にカラフルなスパッタアニメーションを追加することです。 焦点は、あなたが提供する書面によるコピーとCTAに引き続き焦点を当てます。 このチュートリアルでは、Diviの組み込み設定を使用して美しいカラフルなスパッタアニメーションセクションを作成する方法を示します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

スパッタアニメーションヒーローセクションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、選択したグラデーションの背景を適用します。

• 色1：＃070a49
• 色2：＃6f00f7
• グラデーションタイプ：線形
• グラデーション方向：148度

サイジング

セクションの[デザイン]タブに移動し、サイズ設定に最小の高さを追加します。 これにより、セクションが全画面表示になります。

• 最小高さ：100vh

間隔

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

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

可視性

また、デザインに水平スクロールバーが表示されないようにするために、セクションのオーバーフローを非表示にします。

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

行＃1を追加

カラム構造

セクションの設定が完了したら、次の列構造を使用して最初の行を追加します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、次のようにサイズ設定を変更して、行がセクションコンテナの左側と右側の両方に接触できるようにします。

• 幅：100％
• 最大幅：100％

間隔

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

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

主な要素CSS

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

display: flex;

列1のアニメーション

一般的な行の設定が完了したら、列1の設定を開き、アニメーションを追加します。

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

列2のアニメーション

次の2番目の列にアニメーションを追加します。

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

列3のアニメーション

また、3番目の列にもアニメーションを使用しています。

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

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

スパッタ画像をアップロード

1列目の画像モジュールから始めて、モジュールを追加します。このチュートリアルの最初にダウンロードできたダウンロードフォルダーにあるスパッタ画像をアップロードします。

サイジング

モジュールの[デザイン]タブに移動し、サイズ設定で全幅を強制します。

• 全幅を強制：はい

フィルタ

次に、フィルター設定を使用してモジュールの色を変更します。

• 色相：303度
• 飽和度：200％

変換スケール

変換設定でも画像を拡大縮小しています。

• 下：150％
• 右：150％

垂直モーションスクロール効果

次に、[詳細設定]タブに移動し、垂直方向の動きを有効にします。

• 垂直モーションを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：
  • デスクトップ：0（50％）
  • タブレット：0（70％）
  • 電話番号：0（85％）
• 終了オフセット：2
• モーションエフェクトトリガー：要素の下部

水平モーションスクロール効果

水平方向のモーションも使用しています。

• 水平方向の動きを有効にする：はい
• 開始オフセット：
  • デスクトップ：-10
  • タブレットと電話：0
• ミッドオフセット：0
• 終了オフセット：4
• モーションエフェクトトリガー：要素の下部

上下のスクロール効果のスケーリング

スケールアップとスケールダウンの効果とともに。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：100％
• ミッドスケール：150％
• エンディングスケール：200％
• モーションエフェクトトリガー：要素の下部

画像モジュールのクローンを2回作成し、行の残りの列に複製を配置します

最初のイメージモジュールが完了したら、モジュール全体を2回複製し、行の残りの列に複製を配置できます。

列2のイメージモジュールを変更します

間隔

列2の画像モジュールを開き、タブレットと携帯電話に上部マージンを追加します。

• トップマージン：50％（タブレットと電話のみ）

フィルタ

フィルタ設定でも色相を変更します。

• 色相：55度

列3のイメージモジュールを変更します

フィルタ

次に、3番目の列のイメージモジュールを開き、それに応じてフィルター設定を変更します。

• 色相：309度
• 明るさ：0％

行＃2を追加

カラム構造

次の行に進みます。 次の列構造を使用します。

ポジション

行設定を開き、[詳細設定]タブで行の位置設定を変更します。

• 位置：絶対
• 場所：センター

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

H1コンテンツを追加する

選択したH1コンテンツを含むテキストモジュールから始めて、モジュールを追加します。

H1テキスト設定

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

• 見出しフォント：ルービック
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：80px（デスクトップ）、50px（タブレット）、35px（電話）

• 見出しテキスト影の垂直方向の長さ：0.08em
• 見出しテキストシャドウブラー強度：0em
• 見出しテキストの影の色：＃1a005b

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

コンテンツを追加する

次に、説明コンテンツを含む別のテキストモジュールを追加します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Muli
• テキストの色：#dddddd
• テキストサイズ：15px（デスクトップ）、14px（タブレットと電話）
• テキスト行の高さ：2.1em

• テキストの影の色：＃1a005b

サイジング

次に、モジュールの幅を変更します。

• 幅：60％（デスクトップ）、100％（タブレットと電話）

間隔

そして、さまざまな画面サイズにわたって上下の余白を追加して、モジュール設定を完了します。

• トップマージン：6％（デスクトップ）、10％（タブレット）、14％（電話）
• 下マージン：6％（デスクトップ）、10％（タブレット）、14％（電話）

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

コピーを追加

この列で必要な最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

次に、[デザイン]タブに移動し、次のようにボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：17px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃ea01a6
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px

• ボタンフォント：ルービック
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

間隔

間隔設定にもいくつかのカスタムパディング値を追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：60px
• 右パディング：60px

ボックスシャドウ

そして、ボックスシャドウを追加してモジュール設定を完了します。

• ボックスシャドウの水平位置：5px
• ボックスシャドウの垂直位置：5px
• 影の色：＃30005b

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みアニメーションとスクロール効果を使用してクリエイティブにする方法を紹介しました。 具体的には、特別な日のために設定するランディングページ用にカラフルなスパッタアニメーションのヒーローセクションを作成する方法を示しました。 その機会は、あなたの会社の記念日または特別セールである可能性がありますが、これらに限定されません。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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