Diviでスクロールアニメーションの数値カウンターを作成する方法
公開: 2020-04-17アニメーションの数値カウンターは、サービスの価値やケーススタディなどを強調するために数値データを表示する手段として、Web全体で人気があります。 Diviには、アニメーション化された番号カウンターを簡単に生成するために使用できる専用の番号カウンターモジュールがあります。
ただし、このチュートリアルでは、Diviを使用してスクロールでアニメーション化する数値カウンターを作成する方法を示します。 Diviの位置オプションとスクロール効果を使用して、スクロールする数字で日付を表示する簡単なレイアウトを設計します。
見てみな！
スニークピーク
これは、Diviで設計するスクロールアニメーションカウンターの概要です。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
パート1：タイトルセクションの作成
この最初の部分では、レイアウトの簡単なタイトルを作成します。
まず、セクションに1列の行を追加します。
次に、新しいテキストモジュールを行に追加します。
テキストモジュールの内容を次のように更新します。
<h2>Save The Date<h2>
次に、見出しのテキストスタイルを次のように更新します。
- 見出し2フォント：プラタ
- 見出し2テキストサイズ：130px（デスクトップ）、70px（タブレット）、40px（電話）
パート2：スクロールアニメーションを使用したカウンターの作成
この次のパートでは、日付（月、日、年）を表示するために静止するまでスクロールで数字をアニメーション化する3つのカウンターを作成します。 各カウンターは、合計5つのテキストモジュールと仕切りモジュールを使用して構築されます。 最初のテキストモジュールは、カウンターのラベル（つまり、月、日、年）として機能します。 次の4つのテキストモジュールはそれぞれ異なる番号（進行中）を保持し、Diviの垂直モーションオフセットを使用してスクロールでアニメーション化されます。 下部の仕切りモジュールは、数値のオーバーフローを隠すのに役立ちます。
これがその方法です。
2行目を追加
既存の行の下に、別の1列の行を追加します。
行設定
モジュールを追加する前に、次のように行設定を更新します。
- 側溝幅：1
- パディング：0px上、0px下
列の設定
次に、列の設定を開き、次のようにパディングを更新します。
- パディング（デスクトップ）：100px下
- パディング（タブレットと電話）：0px下
テキストモジュールを追加
次に、テキストモジュールを列に追加します。
コンテンツ/ラベル
テキストモジュールのコンテンツには、「Month」という単語を追加します。
テキストデザイン設定
コンテンツが追加されたら、次のようにデザイン設定を更新します。
- 背景色：#ffffff
- テキストフォント：プラタ
- テキストテキストサイズ：40px
- テキスト行の高さ：2em
- 幅：100％
- パディング：上20px、下20px、左20px、右20px
- 下の境界線の幅：5px
- 下の境界線の色：#eeeeee
ポジション
次に、[詳細設定]タブで、位置オプションを次のように更新します。
- 位置：相対
- Zインデックス1
最初の番号のテキストモジュールを追加する
最初のテキストモジュールが配置されたら、スクロールで移動する数字の追加を開始できます。 最初の番号を追加するには、既存の「月」テキストモジュールの下に新しいテキストモジュールを追加します。
番号/コンテンツを追加
次に、テキストモジュールのラベルを更新して「num1」と読み、参照しやすくします。 次に、コンテンツを番号「01」で更新します。
番号の設計設定
[デザイン]タブで、以下を更新します。
- テキストフォント：プラタ
- テキストテキストの色：＃8ab2d3
- テキストテキストサイズ：70px
- テキスト文字の間隔：4px
- テキスト行の高さ：1.5em
- パディング：残り20px
注：数値のテキストサイズは70px、行の高さは1.5emです。これは、テキストモジュールの合計の高さが100pxに近くなることを意味します。 これは、垂直モーションオフセットの追加を開始するときは常に覚えておくことが重要です。 たとえば、テキストモジュールに「1」の垂直オフセットを追加すると、テキストモジュールはテキストモジュールの高さである正確に100px移動します。
最初の数字のスクロール効果
次のスクロール効果をテキストモジュールに追加します。
[垂直モーション]タブで、以下を更新します。
- 垂直モーションを有効にする：はい
- 開始オフセット：1（10％）
- ミッドオフセット：0（20％）
- 終了オフセット：-1（30％）
[フェードインとフェードアウト]タブで、以下を更新します。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％（10％）
- 中程度の不透明度：100％（20％）
- 終了不透明度：0％（30％）
モーションエフェクトトリガーを要素の上部に設定してください。
- モーションエフェクトトリガー：要素の上部
2番目の番号のテキストモジュールを作成する
最初の番号が重複しています
最初の番号が作成されたら、それを複製して2番目の番号のテキストモジュールを作成します。 次に、参照しやすいようにレイヤービューのラベルを更新します。
番号/コンテンツの更新
2番目の番号テキストモジュールの設定を開き、番号「02」でコンテンツを更新します。
位置を更新
次に、位置オプションを次のように更新します。
- 位置：絶対
- 垂直オフセット：126px
スクロール効果を更新する
次に、スクロール効果を次のように更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（20％）
- ミッドオフセット：0（30％）
- 終了オフセット：-1（40％）
[フェードインとフェードアウト]タブで、以下を更新します。
- 開始時の不透明度：0％（20％）
- 中程度の不透明度：100％（30％）
- 終了不透明度：0％（40％）
3番目の番号のテキストモジュールを作成する
2番目の番号が重複しています
3番目の番号のテキストモジュールを作成するには、2番目の番号のテキストモジュールを複製します。
番号/コンテンツの更新
番号「03」でコンテンツを更新します。
スクロール効果を更新する
次に、スクロール効果を更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（30％）
- ミッドオフセット：0（40％）
- 終了オフセット：-1（50％）
[フェードインとフェードアウト]タブで、以下を更新します。
- 開始時の不透明度：0％（30％）
- 中程度の不透明度：100％（40％）
- 終了不透明度：0％（50％）
4番目の番号のテキストモジュールを作成する
重複する3番目の番号
スクロールカウンターの4番目の番号を作成するには、3番目の番号のテキストモジュールを複製します。
番号/コンテンツの更新
番号「04」でコンテンツを更新します。
スクロール効果を更新する
次に、スクロール効果を更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（40％）
- ミッドオフセット：0（50％）
- 終了オフセット：0（60％）
[フェードインとフェードアウト]タブで、以下を更新します。
- 開始時の不透明度：0％（40％）
- 中程度の不透明度：100％（50％）
- 終了不透明度：100％（60％）
ボトムディバイダーを追加
最後のテキストモジュールの下に、新しい仕切りモジュールを追加します。 これは、スクロールして表示されるテキストの下部オーバーフローを非表示にするために使用されます。
次に、[NOT]を選択して仕切りを表示します。
スタイルと位置の設定
次のように仕切りのデザインを更新します。
- 背景色：#ffffff
- 幅：100％
- 高さ：100px
- 上枠幅：5px
[詳細設定]タブで、以下を更新します。
- 無効にする：電話とタブレット
- 位置：絶対
- 場所：左下
重要：仕切りが占めるスペースは、列に100pxの下部パディングを追加することによって以前に作成されました。 そのパディングを追加しない場合、仕切りは数値と重なります。
より多くのカウンターと列を作成する
列1を複製し、コンテンツを更新する
新しいカウンターを作成するには、列1を複製します。これにより、すべての要素が自動的に配置された2番目の列が作成されます。
次に、すべてのテキストモジュールのコンテンツを新しいテキストと番号で更新するだけです。
列2を複製し、コンテンツを更新する
すべてのテキストモジュールのコンテンツが列2で更新されたら、列2を複製して、その年の3番目のカウンターを作成します。 次に、必要に応じて各テキストモジュールのコンテンツを更新します。
最終結果
これが最終結果です。
最終的な考え
スクロールアニメーションの数値カウンターを備えたこのシンプルなレイアウトは、数値データを新鮮でユニークな方法で表示するのに役立ちます。 日付の概念を放棄して、思いつく限りのカウンターを使用してください。
コメントでお返事をお待ちしております。
乾杯！