数字を表示する方法として、アニメーション付きの数字カウンターが Web で人気があります。 données サービス、ケーススタディなどの価値を強調するため。 Divi には、アニメーション化された数値カウンターを簡単に生成するために使用できる専用の数値カウンター モジュールがあります。
ただし、このチュートリアルでは、スクロール時にアニメーション化する数値カウンターを作成する方法を紹介します。 Divi。 位置オプションとスクロール効果の使用 Diviでは、日付をスクロール番号で表示するシンプルなレイアウトを設計します。
パート1：タイトルセクションの作成
この最初のパートでは、レイアウトの簡単なタイトルを作成します。
まず、セクションにXNUMX列の行を追加します。
次に、新しいテキストモジュールを行に追加します。
を更新します コンテンツ 次の要素を含むテキスト モジュールの。
日付を保存
次に、ヘッダーテキストスタイルを次のように更新します。
- 見出し2フォント：プラタ
- アイテム2テキストサイズ：130ピクセル（デスクトップ）、70ピクセル（タブレット）、40ピクセル（電話）
パート2：スクロールアニメーションによるカウンターの作成
この次のパートでは、日付（月、日、年）の表示が停止するまでスクロール番号をアニメーション化する5つのカウンターを作成します。 各カウンターは、合計XNUMXつのテキストモジュールとセパレーターモジュールを使用して構築されます。 最初のテキストモジュールは、カウンターのラベルとして機能します（つまり、月、日、年）。 次のXNUMXつのテキストモジュールには、それぞれ異なる番号（進行中）が含まれ、Diviの垂直移動オフセットを使用してスクロールするとアニメーション化されます。 下部の分離モジュールは、数値のオーバーフローを隠すのに役立ちます。
方法は次のとおりです。
XNUMX行目を追加する
既存の行の下で、列に別の行を追加します。
ライン設定
モジュールを追加する前に、次のように行パラメーターを更新します。
- 側溝幅：1
- パディング：0px high、0px low
列パラメーター
次に、列の設定を開き、次のように塗りつぶしを更新します。
- パディング（デスク）：100px低
- パディング（タブレットとスマートフォン）：0px低
テキストモジュールを追加する
次に、テキストモジュールを列に追加します。
内容・ラベル
以下のために コンテンツ テキストモジュールから「月」という単語を追加します。
テキストのデザイン設定
一度 コンテンツ 追加した場合は、次のようにデザイン設定を更新します。
- 背景色：#ffffff
- テキストのフォント：トーク
- テキストサイズ：40px
- テキスト行の高さ：2em
- 幅：100％
- パディング：上部20ピクセル、下部20ピクセル、左側20ピクセル、右側20ピクセル
- 下罫線の幅：5px
- 下の境界線の色：#eeeeee
役職
次に、[詳細設定]タブで、位置オプションを次のように更新します。
- 位置：相対
- Zインデックス1
創刊号にテキストモジュールを追加
最初のテキストモジュールが配置されたら、スクロール上を移動する番号の追加を開始できます。 最初の番号を追加するには、既存の「月」テキストモジュールの下に新しいテキストモジュールを追加します。
番号/コンテンツを追加
次に、参照しやすいように、テキストモジュールラベルを「num1」に読み替えます。 次に、コンテンツを番号「01」で更新します。
番号のデザイン設定
[デザイン]タブで、以下を更新します。
- 文字フォント：プラタ
- テキストテキストの色：＃8ab2d3
- テキストテキストサイズ：70px
- テキストの文字間隔：4px
- テキスト行の高さ：1.5em
- パディング：残り20ピクセル
注：数値のテキストサイズは70pxで、行の高さは1.5emです。つまり、テキストモジュールの全高は100pxに近くなります。 これは、垂直モーションオフセットの追加を開始するときはいつでも覚えておくことが重要です。 たとえば、テキストモジュールに「1」の垂直オフセットを追加すると、テキストモジュールはテキストモジュールの高さである正確に100px移動します。
最初の番号のスクロール効果
次のスクロール効果をテキストモジュールに追加します。
[Vertical Motion]タブで、次を更新します。
- 垂直運動を有効にする：はい
- 開始オフセット：1（10％）
- 平均オフセット：0（20％で）
- 終了オフセット：-1（30％）
[フェードイン]タブと[フェードアウト]タブで、以下を更新します。
- フェードインとフェードアウトを有効化：はい
- 初期不透明度：0％（10％で）
- 平均不透明度：100％（20％で）
- 不透明度の終了：0％（30％まで）
クリップの上部でモーションエフェクトのトリガーを設定してください。
- モーションエフェクトトリガー：エレメントトップ
XNUMX番目の数値のテキストモジュールを作成する
最初の番号を複製
最初の番号が作成されたら、それを複製してXNUMX番目の番号テキストモジュールを作成します。 次に、参照しやすいようにレイヤービューのラベルを更新します。
更新番号/内容
02番目のデジタルテキストモジュールのパラメーターを開き、コンテンツを番号「XNUMX」で更新します。
位置を更新
次に、次のように位置オプションを更新します。
- ポジション：絶対
- 垂直オフセット：126px
スクロール効果を更新する
次に、スクロール効果を次のように更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（20％）
- 平均オフセット：0（30％で）
- 終了オフセット：-1（40％）
[フェードイン]タブと[フェードアウト]タブで、以下を更新します。
- 初期不透明度：0％（20％で）
- 平均不透明度：100％（30％で）
- 不透明度の終了：0％（40％まで）
XNUMX番目の問題のテキストモジュールを作成する
XNUMX番目の数値を複製する
XNUMX番目の数値のテキストモジュールを作成するには、XNUMX番目の数値のテキストモジュールを複製します。
更新番号/内容
「03」という番号のコンテンツを更新します。
スクロール効果を更新する
次に、スクロール効果を更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（30％）
- 平均オフセット：0（40％で）
- 終了オフセット：-1（50％）
[フェードイン]タブと[フェードアウト]タブで、以下を更新します。
- 初期不透明度：0％（30％で）
- 平均不透明度：100％（40％で）
- 不透明度の終了：0％（50％まで）
XNUMX番目の問題のテキストモジュールを作成する
XNUMX番目の重複する問題
スクロールカウンターのXNUMX番目の数値を作成するには、XNUMX番目の数値のテキストモジュールを複製します。
更新番号/内容
「04」という番号のコンテンツを更新します。
スクロール効果を更新する
次に、スクロール効果を更新します。
[垂直モーション]タブで、以下を更新します。
- 開始オフセット：1（40％）
- 平均オフセット：0（50％で）
- 終了オフセット：0（60％）
[フェードイン]タブと[フェードアウト]タブで、以下を更新します。
- 初期不透明度：0％（40％で）
- 平均不透明度：100％（50％で）
- 不透明度の終了：100％（60％まで）
下セパレーターを追加する
最後のテキストモジュールの下に、新しいセパレータモジュールを追加します。 これは、ビュー内のスクロールテキストの下部オーバーフローを非表示にするために使用されます。
次に、[いいえ]を選択してセパレータを表示します。
スタイルと位置の設定
セパレータのデザインを次のように更新します。
- 背景色：#ffffff
- 幅：100％
- 高さ：100px
- 上ボーダーの幅：5px
[詳細設定]タブで、以下を更新します。
- 無効化：スマートフォンとタブレット
- ポジション：絶対
- 場所：左下
重要：セパレーターが占めるスペースは、100ピクセルの下部の塗りつぶしを列に追加することによって以前に作成されました。 このパディングを追加しない場合、セパレータは数字と重なります。
追加のカウンターと列の作成
列1を複製して内容を更新する
新しいカウンターを作成するには、列1を複製します。これにより、すべての要素が自動的に配置されたXNUMX番目の列が作成されます。
次に、すべてのテキストモジュールのコンテンツを新しいテキストと数値で更新するだけです。
列2を複製して内容を更新する
すべてのテキストモジュールの内容が列2で更新されたら、列2を複製して、その年のXNUMX番目のカウンターを作成します。 次に、必要に応じて各テキストモジュールのコンテンツを更新します。
最終結果
これが最終結果です。
その他のリソース
最終的な考え
アニメーション化された数値カウンターをスクロールするこの単純なレイアウトは、表示に役立ちます。 données 新しくユニークな方法でデジタル化します。 気軽に日付の概念を捨てて、思いつくものなら何でもカウンターを使ってください!
