Diviでスクロールアニメーションバーカウンターを設計する方法
公開: 2020-04-16バーカウンターは、特定の値を表す微妙なカラーアニメーションでデータまたはメトリックを効果的に示すために、Web全体で使用されます。 Diviには、アニメーション化されたバーカウンターを簡単に生成するために使用できる専用のバーカウンターモジュールがあります。 それらは、aboutページ、サービスページ、およびケーススタディへの人気のある追加です。
ほとんどのバーカウンターは、表示されるとアニメーション化するように見え、カスタマイズが難しい場合があります。 ただし、このチュートリアルでは、Diviを使用してスクロールでアニメーション化する完全にカスタマイズ可能なバーカウンターを（最初から）作成する方法を示します。 これを行うために、Diviの位置オプションとスクロール効果を利用し、それらを独自の正確な方法で使用します。
始めましょう。
スニークピーク
これは、このチュートリアルで作成するバーカウンターの概要です。
レイアウトを無料でダウンロード
このチュートリアルのスクロール効果レイアウトのバーカウンターに手を置くには、最初に下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、DiviライブラリからJSONファイルをインポートするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
パート1：セクション、行、および列の最適化
行を追加する
T0開始、セクションに2列の行を追加します。
セクション設定
次に、セクション設定を開き、次のように背景色を追加します。
- 背景Col0r：＃000545
次に、次のように、セクションに一時的なマージンを与えて、スクロール効果とパディングをテストします。
- マージン：上80vh、下80vh
- 10vw上部、10vw下部のパディング
行幅
次に、行設定を開き、次の幅を追加します。
- 幅：90％
- 最大幅：700px
カラムオーバーフロー
行内の2つの列のオーバーフローを必ず非表示にしてください。 これを行うには、各列の設定を開き、以下を更新します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
パート2：スクロール効果のあるバーカウンターの作成
バーカウンターは、バーの背景（仕切りモジュール）、カラーバー（仕切りモジュール）、およびバーの内容（宣伝文モジュール）の3つの要素で構成されます。 色付きのバー要素は、水平方向のモーションスクロール効果のオフセットでアニメーション化されるものです。
バーの背景から始めましょう。
バーの背景を作成する
仕切りモジュールを追加
列1に新しい仕切りモジュールを追加します。
仕切りの設定
仕切りを表示：いいえ
- 背景色：rgba（255,255,255,0.1）
- 幅：300px
- 高さ：70px
バーカウンターバーを作成する
重複ディバイダーモジュール
バーカウンターの色付きバーを作成するには、バーの背景を作成するために使用した前の仕切りモジュールを複製します。
仕切りの背景
次に、次のように新しいグラデーションの背景色で背景を更新します。
- グラデーションの背景左の色：＃fe7e1f
- グラデーションの背景の正しい色：＃ffbc48
- グラデーション方向：90度
仕切りの位置
色付きのバーをバーの背景の上に配置するには、Zインデックスが1の絶対位置を指定する必要があります。
- 位置：絶対
- Zインデックス：1
仕切りのスクロール効果
これで、モーションをバーカウンターバーに追加する準備が整いました。 これを行うには、仕切りモジュールを左から右に移動する水平スクロール効果を使用します。 列のオーバーフローが非表示になっているため、バーが列の左側を超えて伸びているため、バーは表示されません。 しかし、右に移動すると表示されます。
オフセット値を使用してバーカウンターのパーセンテージ値を決定する
仕切り/バーに水平方向の動きを追加する前に、バーカウンターに表示されるパーセンテージ値を決定する方法を理解する必要があります。 つまり、バーカウンターで25％を表す場合、どの水平モーションオフセットがバーをバーの背景幅のちょうど25％右に移動するかを知る必要があります。
これを理解するために、いくつかの簡単な計算を行うことができます。
バーの全幅は300pxです。
各水平オフセット値は100pxを基準にしています（1は100px、-2は-200pxなど）
バーを左（ビューの外側）に移動するには、開始オフセット-3（-300px）を追加する必要があります。 これにより、300px左に移動して表示されなくなります。
次に、スクロールアニメーションを完了するために、バーを300px（75px）の25％以上移動する必要があります。
バーがページの垂直方向の中央に到達したときにバーを75pxを超えて右に移動するには、中間オフセットを-2.25にする必要があります（-300 + 75は-225に等しいため）。 これはおそらく、私たちが小学校で使用した数直線を思い出させます。
水平方向の動きで25％を表示
水平方向の動きで25％を表示するには、[水平方向の動き]タブを選択し、以下を更新します。
- 水平モーションを有効にする：はい
- 開始オフセット：-3
- ミッドオフセット：-2.25
- 終了オフセット：-2.25
バーカウンターコンテンツの作成
バーのコンテンツを作成するには、宣伝文句モジュールを使用します。 宣伝文句を使用すると、バーカウンターに最適なタイトルと本文のテキストとともに、左揃えのアイコンを簡単に追加できます。
色付きのバーディバイダーモジュールの下に、宣伝文モジュールを追加します。
宣伝文の内容
次に、コンテンツを次のように更新します。
- タイトル：25％
- 本文：最適化
- アイコン：スクリーンショットを参照
宣伝文句のデザイン
[デザイン]タブで、以下を更新します。
- アイコンの色：#ffffff
- 画像/アイコンの配置：左
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：40px
- テキストの色：明るい
- ボディフォント：ルービック
- ボディフォントスタイル：TT
- 本文の文字間隔：0.2em
- ボディラインの高さ：1em
- コンテンツの幅：100％
- 幅：300px
- 高さ：70px
- パディング：上15px、左15px
- 位置：絶対
- Zインデックス：2
パート3：追加のバーカウンターの作成
この次のパートでは、同じ手法を使用してさらに多くのバーカウンターを作成し続けます。 レイアウトのデザインを完成させるために、50％、75％、および100％のバーカウンターを作成します。 これはあなた自身でより多くを作るためにあなたに良い実用的な例を与えるはずです。
50％バーカウンターの作成
バーカウンター付きの重複カラム
列1に最初のバーカウンターを作成したら、列全体を複製するか、バーカウンターを構成する3つのモジュールをコピーして列2に貼り付けることができます。これで、それぞれ同じバーカウンターを持つ2つの列ができました。
バーディバイダー設定の更新
バックグラウンド
列2内で、色付きのバーの仕切り設定を開き、グラデーションの背景色を更新します。
- グラデーションの背景左の色：＃4c75f8
- グラデーションの背景の正しい色：＃57a1ff
スクロール効果
次に、水平方向のモーションスクロール効果を更新して、スクロールのバーの50％を埋めるようにします。
- ミッドオフセット：-1.5
- 終了オフセット：-1.5
宣伝文の内容を更新する
次に、列2の宣伝文の設定を開き、コンテンツを更新します。
- タイトル：50％
- アイコン：スクリーンショットを参照
75％バーカウンターの作成
行を複製する
次の2つのバーカウンターの設計をすぐに開始するには、行全体を複製して、その下に別の同じ行を作成します。
バーの背景とスクロール効果を更新する
色付きのバーディバイダーモジュールの設定を開き、次の背景色を更新します。
- グラデーションの背景左の色：＃4c75f8
- グラデーションの背景の正しい色：＃57a1ff
次に、水平モーションオフセットを次のように更新します。
- ミッドオフセット：-。075
- 終了オフセット：-0.75
宣伝文の内容
宣伝文の設定を開き、次のようにコンテンツを更新します。
- タイトル：75％
- アイコン：スクリーンショットを参照
100％バーカウンターの作成
バーの色とスクロール効果を更新する
100％バーカウンターを作成するには、列2に移動し、色付きのバーディバイダーモジュールの背景色を次のように更新します。
- グラデーションの背景左の色：＃f449b4
- グラデーションの背景の正しい色：＃fc845b
次に、水平モーションオフセットを次のように更新します。
- ミッドオフセット：0
- 終了オフセット：0
宣伝文の内容を更新する
最後に、宣伝文の内容を更新します。
- タイトル：100％
- アイコン：スクリーンショットを参照
最終結果
これが最終結果のスクリーンショットです。 最後の仕上げとして、5番目のテーマビルダーパックからカスタム背景画像を追加しました。
さて、実際のスクロール動作は何ですか。
最終的な考え
うまくいけば、これらのスクロールアニメーションバーカウンターは、将来のプロジェクトに役立つでしょう。 このようなカスタムデザインを使用することの欠点は、色付きのバーを特定の割合で移動する距離を計算するために、少し計算を行う必要があることです。 しかし、利点は、さらにユニークでクリエイティブなデザインの機会が増えることです。
興味がある場合は、スクロールでアニメーション化するカスタムサークルカウンターの作成に関する投稿を確認してください。
コメントでお返事をお待ちしております。
乾杯！