JavaScriptで、画面に入ったらカウントアップする方法
「お客様満足度〇〇％！！」「リピート率〇〇％！！」「おかげさまで累計販売個数〇〇万個達成！！」のような文章があって、数がバーっとカウントされていく。
そんなよく見かける仕組みをJavaScriptで実装してみました。
目標
お客様満足度％！！
スクロールして、画面に入ってきたタイミングで数字のカウントが始まり、決めた数値までカウントする。
コード
<p>お客様満足度<span class="count" id="js-count"></span>％！！</p>.count {
font-size: 24px;
font-weight: bold;
color: red;
padding-left: 10px;
padding-right: 10px;
}const count = document.getElementById('js-count');
const targetNumber = 96;
const countSpeed = 50;
const countPosition = 200;
let number = 0;
// 指定のスピードでカウントをする関数を定義
function countStart(){
setInterval(function(){
if(number <= targetNumber){
count.textContent = number;
number++;
}
}, countSpeed);
}
// 対象が指定の位置に入ったらカウントスタート
window.addEventListener('scroll', function() {
if(count.getBoundingClientRect().top + countPosition < window.screen.height) {
countStart();
}
});解説
targetNumberはカウントの上限、countSpeedはカウントの速さ、countPositionは画面下辺から何px入ってきたところでカウントを始めるか、をそれぞれ定義。
指定のスピードでカウントをする関数を定義しておき、スクロールしたときに指定の位置に入っていれば発火するようにしています。
まとめ
いかがでしたか？
今回は数が増えていくカウントでしたが、少しコードをいじればカウントダウンも同じように実装することができると思います。
ぜひチャレンジしてみてください。
最後までご覧いただきありがとうございました。
