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

こういうやつね

作り方

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;
}

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

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

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

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