簡単なカウントアップ動画の作り方

こういうやつね

これはGIFアニメ

作り方

countUp.js というJavaScript ライブラリがあって,それを使って簡単なカウントアップのアニメーションを作ってみた.とは言えコーディグは (基本的に) 不要!countUp.jsデモサイトを使えば簡単.

デモサイトの見た目

このサイトで countUp.js の動作をテストできるんだけど,このテストで好きな範囲の数値を入力したらカウントアップのアニメーションを作ってくれるから,これをそのままスクリーン録画しちゃえばいい.お手軽!

見た目の調整

しかし文字の色とかフォントとか調整したいじゃん?デフォルトだとたぶんこんな感じの設定になってると思う.

font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 12em;
color: #4d63bc;
text-align: left;

まぁこれで問題なければいいけど,好きなフォントにしたい場合は Firefox アドオンの Stylus を使って少しだけ見た目を調整しよう.今回貼ってるサンプルでは,僕はこんな設定をしてアニメーションを作った.右寄せにしてるのは,桁が増えたときに桁がずれないようにするためね.

/*** This is for the demo site of CountUp.js ***/
/*** https://inorganik.github.io/countUp.js/ ***/

h1{
    font-family: "Staatliches" !important;
    font-weight: 900 !important;
    text-align: right !important;
    color: #f83185ff !important;
}
Stylus の設定

ここでは Staatliches というフォントを設定したけど,これは等幅フォントじゃない.等幅フォントを設定すればアニメーションしたときに桁のガタツキをなくせるよ.下のGIF画像は Ubuntu Mono を設定してアニメーションさせた図.

等幅フォントなら桁がガタガタしない

クロマキーで抜いて素材に

背景の白をクロマキーで抜いてやれば,動画内に配置するカウントアップの素材として使えるね.例えば僕は OpenShot というシンプルな動画編集ソフトでクロマキーを設定して素材として使いました.

OpenShot でクロマキーを設定

こうすることで,下の動画にみたいに例えば写真の上にカウントアップアニメーションを載せる,みたいなこともできるね.

Simple Count-up Animation

コメントを残す

Powered by WordPress.com. テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑

%d人のブロガーが「いいね」をつけました。