企業サイトを制作していると、「数字で見る◯◯」というページを作ることがあります。JavaScriptでアニメーションを効かせてグラフを描画したり、テキストを表示させたりしています。下記のようなサイトですね。数字で見るマイナビワークス駆け出しコーダーがいきなりこのような案件を任されてしまうと、テンパってしまうかもしれませんが、、JavaScriptライブラリを使えば簡単にイケてるアニメーションを実装することができます。ScrollMagicでスクロール連動させる「数字で見る」を実装するライブラリまずはデモをご覧ください。DEMOすみません、デザインは適当です。アニメーションの雰囲気は伝わったかと思います。難しそうに感じますが、下記のライブラリを使えば簡単に実装できますよ。Chart.js(アニメーションつきのグラフを描画する)odometer(文字をクルクル回転させる)ScrollMagic(アニメーションをスクロールと連動させる)Chart.jsでグラフ描画する今回は円グラフを描画しましたが、Chart.jsを使えばどんなグラフでも簡単にアニメーションさせることができます。公式ドキュメントを見れば、詳しく実装方法が書かれていますので、いろんなグラフを実装したい方は色々みてみてください。});odometerでテキストを回転させる公式サイトodometerで必要ファイルをダウンロードします。cssファイルとjsファイルを読み込みましょう。src="/js/odometer.min.js"></script>単純にodometerを使ってアニメーションさせるには、HTMLにクラスを付与し、JavaScriptで実行するだけ。class="odometer"></div>JavaScript$('.odometer').html(123)//123は最終的に表示したい数字を入れるこれだけで数字をアニメーションさせることが可能ですが、このままではページが読み込まれたときに実行されてしまいます。スクロールに連動してアニメーションさせる簡単な方法が、ScrollMagicです。ScrollMagicでスクロール連動させるスクロール連動させるには、ScrolMagicを使うのが簡単です。アニメーション用のクラス名を作成トリガーの要素がある位置に到達したら発火するこんな感じです。0);}.animatedというクラスでアニメーションの制御をする感じです。アニメーションさせたい要素に上記のクラス名をつけ、以下のようにJSを記載します。.8の地点に到達したときにアニメーションが発火します。そこで、odometerをスクロール発火したい場合は、以下のようにするとオッケーですね。.addTo(controller);});こんな感じで、odometerやChart.jsとScrollMagicを組み合わせることで、簡単にアニメーションを実装することが可能です。今回は、限定的な機能しか紹介していませんが、もっと詳しく知りたい人は、公式サイトをご覧ください。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。