doors doors
number

カウンターが理想の形にたどり着くまで

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

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

number

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

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

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

カウントアップ

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

odmeterを使ってみた

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

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

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

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

いくつか巡ってみた

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

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

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

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

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

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

理想の形になりました!

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

関連記事

WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討...

wordpress01

サイト構築でCMSをオススメする理由

WEBサイトの管理、どうしていますか? 今やどの企業でさえもWEBサイトを持っているのが当たり前の時代になっています。 しかしWEBサイトを作っただけで満足する...

【jQuery】slidetoggleの落とし穴

アコーディオンナビが作りやすい、jQueryのslidetoggle。 設定するだけでcssなどのアニメーションをつけなくても自動で動いてくれます。 クリックし...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...