【Javascript・JQuery】カウントアップを複数動かしながら画面内でスタートさせるためには

「カウントアップ」
数字がくるくるして表示されるアレです。
プラグイン入れてちょちょいとやってしまえばいいやー！と思っていましたが意外と遠回りしました。

• スクロールして画面内に入ったら動かす
• なるべく数の始まりと終わりをデータ属性で指定できるようにする
• 画面内に複数個ある

これを全て同時に叶えてくれるコードは探しても見つかりませんでした。
結果自分なりにカスタマイズしまして、結果思い通りの動きのものができました！

理想にたどり着くまでの経緯

odmeterを使ってみた

odmeterはカウントアップのプラグインとしては有名ではないでしょうか。

Odometer — Transition numbers with ease

Odometer is a Javascript and CSS library for smoothly transi…

https://github.hubspot.com/odometer/docs/welcome/

文字もくるくる可能です。
数字をカウントアップさせるというより、ランダムな文字の中から正確な文字が現れるといった感じでしょうか。

一応作ってみました。
サンプル

しかしこのままDLして取り入れても、スクロールしたときに反応しません。
そのようにカスタマイズはしてあるのですが、私の書き方も悪いせいか数ある分だけjsを書き込まなければならず……
それと言葉にしづらいのですが動き的にも違和感があったのでで一旦見送りました。

いくつか巡ってみた

数字のカウントアップを良い感じのアニメーションで実装したい - Qiita

インフォグラフィックなどで、数字をカウントアップしたくなったときに役に立つかもしれないメモです。↓こんな感じにしたい。サ…

https://qiita.com/nishinoshake/items/b91236c77b1987036656

Javascriptで数値のカウントアップ - Qiita

Web開発用メモ。数値のカウントアップ。See the Pen CountUp by snst.lab (@snst-l…

https://qiita.com/snst-lab/items/3687439e04ebcc74eb94

結果たどり着いた先がこちらでした

ページスクロールで要素が近くに来たらカウントアップさせたい

ページ内にある複数の要素を、カウントアップして指定の数値に来たらストップさせるものを作ったのですが、 ページスクロールで…

https://teratail.com/questions/157023

ただ私はfromとtoを設定したいんじゃ……！！

ということで自ら変更しちゃいました。
HTMLで data-from=””を追加し、
jsではthisCountでdata属性を読み込ませます。

var thisCount = $count.attr('data-from');

それとスクロールで読み込ませる際、もう少し画面の中央寄りで動いて欲しいので

if(scrollTop < offset.top && offset.top < scrollTop + windowHeight * 0.5){

理想の形になりました！

次回はアニメーションをつけてみようと思います。
今回はこのへんで。