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){

理想の形になりました!

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

関連記事

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月をもってBracketsサポート終了です。確かにAdobeとしては、Bracket...

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。 要素のアスペクト比(縦横比)を維持する方法 しかしPCとなると話...

【WordPress】投稿者が仲良くなれる管理画面にカスタマイズしてみた

この記事はWordPressを使用しており、複数人の投稿で成り立っています。 投稿の内容も十人十色となるわけで、 「ここのレイアウトこうしたい…」 「新しいレイ...

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

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...