Diviの組み込みアニメーション設定を使用して、訪問者を説得力のある方法でページに誘導する方法

ヒーローセクションの主な目的の1つは、ページを下にスクロールし続け、共有したコンテンツや情報をさらに見つけるように人々を説得することです。 Diviの組み込みアニメーションオプションを使用すると、インタラクティブアニメーションをページに追加して、訪問者を説得力を持ってページに誘導することができます。 このチュートリアルでは、訪問者がサービスセクションに移動するための矢印アイコンを使用して、サービスセクションまでスクロールダウンするように動機付けます。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

作り始めましょう！

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

セクション＃1を追加

背景色

新しいページを作成し、それに通常のセクションを追加します。 セクション設定を開き、背景色を変更します。

• 背景色：＃0f0f0f

ボトムディバイダー

セクションに下部仕切りを追加して続行します。

• 仕切りスタイル：リストで検索
• 仕切りの色：#ffffff
• 仕切りの高さ：30px
• ディバイダー水平リピート：10x（デスクトップ）、4x（タブレットと電話）

間隔

いくつかのカスタムパディング値も追加します。

• トップパディング：269px（デスクトップ）、100px（タブレットと電話）
• 下部のパディング：674px（デスクトップ）、200px（タブレットと電話）

行を追加する

カラム構造

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

サイジング

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

• この行を全幅にする：はい

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

コンテンツを追加する

この行に必要なモジュールはテキストモジュールだけです。 先に進み、選択したH1コンテンツをいくつか追加します。

見出しテキストの設定

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

• 見出しフォント：Didact Gothic
• 見出しフォントの太さ：太字
• 見出しテキストの配置：中央
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：170px（デスクトップ）、50px（タブレットと電話）
• 見出し線の高さ：0.8em

• 見出しテキストシャドウ垂直長：1.5em
• 見出しテキストの影の色：rgba（0,0,0,0.11）

セクション＃2を追加

背景色

ページに2番目のセクションを追加して続行します。 セクション設定で背景色を変更します。

• 背景色：＃0f0f0f

トップディバイダー

セクションにも上部仕切りを追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：#ffffff
• 仕切りの高さ：30px
• ディバイダー水平リピート：10x（デスクトップ）、4x（タブレットと電話）

間隔

そして、間隔設定で間隔値を増やします。

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

行を追加する

カラム構造

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

サイジング

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

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2

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

アイコンを選択

最初の列で必要になる最初のモジュールは、宣伝文句モジュールです。 必要な宣伝文モジュールの要素の唯一の部分はアイコンです。 下向きの矢印アイコンを選択します。

アイコン設定

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

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

間隔

アイコンのリーチを拡大するには、負の上部マージンを追加する必要があります。 これにより、宣伝文モジュールが前のセクションとオーバーラップし、2つのセクション間のアニメーションがスムーズに行われるようになります。 カスタムマージンを補うために、カスタムトップパディングも追加します。 これにより、アイコンが以前とまったく同じ位置にとどまるようになります。 変更されるのは、モジュール全体のサイズとリーチだけです。

• 上マージン：-550px
• トップパディング：550px

アニメーション

最後になりましたが、次の設定を使用して、Blurbモジュールにアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーション時間：3000ms
• アニメーションの遅延：1200ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• 画像/アイコンアニメーション：アニメーションなし

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

コンテンツを追加する

最初の列に必要な次のモジュールはテキストモジュールです。 選択したコンテンツをいくつか追加します。

テキスト設定

テキスト設定を変更して続行します。

• テキストフォント：Didact Gothic
• テキストフォントの太さ：太字
• テキストの色：rgba（255,255,255,0.03）
• テキストサイズ：350px
• テキストの向き：中央

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

コンテンツを追加する

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

見出しテキストの設定

また、デザインタブで見出しのテキスト設定を変更します。

• 見出し3フォント：Didact Gothic
• 見出し3テキストの配置：中央
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：40px（デスクトップ）、30px（タブレットと電話）
• 見出し3文字の間隔：-1px

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

可視性

最初の列で必要な次のモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

デザインタブで仕切りの色を変更して続行します。

• 色：#ffffff

サイジング

サイズ設定にもいくつか変更を加えます。

• 幅：59％
• モジュールの配置：中央

アニメーション

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

• アニメーションスタイル：スライド
• アニメーションの方向性：中央
• アニメーション時間：2000ms
• アニメーション強度：10％
• アニメーション速度曲線：イーズインアウト

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

コンテンツを追加する

1列目に必要な次の最後のモジュールは別のテキストモジュールです。 選択したコンテンツをいくつか追加します。

テキスト設定

テキスト設定を変更して続行します。

• テキストフォントの太さ：軽い
• テキストの色：＃b7b7b7
• テキストサイズ：18px
• テキスト行の高さ：1.8em
• テキストの向き：中央

アニメーション

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

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーション強度：20％
• アニメーション速度曲線：イーズインアウト

モジュールを3回クローンし、残りの列に重複を配置します

列1のすべてのモジュールの変更が完了したので、列1のすべてのモジュールのクローンを3回作成し、残りの列に複製を配置できます。

モジュールの内容を変更する

重複の内容を変更します。

複製のディバイダーモジュールにアニメーション遅延を追加する

DividerModuleの複製のそれぞれにもアニメーションの遅延を追加します。

• 列2の分周器モジュール：400ms
• 列3の分周器モジュール：800ms
• 列4の分周器モジュール：1200ms

テキストモジュール＃3の複製にアニメーション遅延を追加する

各列の最後のテキストモジュールに対して同じことを行います。

• 列2の最後のテキストモジュール：400ms
• 列3の最後のテキストモジュール：800ms
• 列4の最後のテキストモジュール：1200ms

宣伝文のアイコン＃2をカスタマイズする

アイコンの色

また、複製ごとに宣伝文のアイコンの色とアニメーションを変更しています。 列2の宣伝文モジュールを開き、アイコンの色を変更します。

• アイコンの色：＃ff6b86

アニメーション

アニメーションの設定も変更します。

• アニメーションタイプ：スライド
• アニメーションの方向：下
• アニメーション時間：2000ms
• アニメーションの遅延：800ms
• アニメーション強度：62％
• アニメーションの開始不透明度：100％
• 画像/アイコンアニメーション：アニメーションなし

宣伝文アイコン＃3をカスタマイズする

アイコンの色

3列目の宣伝文モジュールを開いてアイコンの色を変更します。

• アイコンの色：＃ffe500

アニメーション

アニメーション設定も変更します。

• アニメーションタイプ：スライド
• アニメーションの方向：下
• アニメーション時間：1000ms
• アニメーションの遅延：600ms
• アニメーション強度：69％
• アニメーションの開始不透明度：100％
• 画像/アイコンアニメーション：アニメーションなし

宣伝文のアイコン＃4をカスタマイズする

アイコンの色

列4の最後の宣伝文モジュールを開き、アイコンの色を変更します。

• アイコンの色：＃00ff9d

アニメーション

そして、デザインタブのアニメーション設定を変更してデザインを完成させます。

• アニメーションタイプ：スライド
• アニメーションの方向：下
• アニメーション時間：3000ms
• アニメーションの遅延：400ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• 画像/アイコンアニメーション：アニメーションなし

最終的な考え

この投稿では、Diviのアニメーション設定を使用して、訪問者を説得力のある方法でページに誘導する方法を紹介しました。 基本的な考え方は、アイコンに宣伝文モジュールを使用し、ヒーローセクションへのアニメーションのリーチを増やすことです。 このアプローチは、構築するあらゆる種類のWebサイトで使用でき、必要に応じてクリエイティブになります。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！