jQueryプラグインのjquery-numerator.jsを利用します。テキストの数値をアニメーションでカウントアップして表示します。
htmlのコードは下記になります。
カウントアップを適用する数値の初期値は0に設定し、spanタグで内包します。spanタグにはカスタムデータ属性でdata-num=”カウントアップする数値”を設定します。
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p><em class="fadein">
<span class="txt">¥</span>
<span class="num" data-num="980">0</span>
<span class="txt">UP</span>
</em></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p><em class="fadein">
<span class="num" data-num="85">0</span>
<span class="txt">%UP</span>
</em></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p><em class="fadein">
<span class="num" data-num="3.6">0</span>
<span class="txt">件</span>
</em></p>続いてCSSのコードです。
左から右へ30px移動しながらフェードインする動作を実装するため、クラス名fadeinに動作前のCSSを記述します。
em {
display: block;
text-align: center;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1;
}
.fadein {
opacity: 0;
transform: translateX(-30px);
transition: all 0.5s ease-out;
}
.num {
font-family: 'Roboto Mono', monospace;
font-size: 750%;
color: #005B98;
}
.txt {
font-size: 389%;
}最後にjQueryのコードです。
フェードインさせる要素が画面サイズの下から1/5までスクロールされた時点でフェードインを実行します。jquery-numerator.jsのオプションでdelimiterを設定すると3桁区切りの記号が表示できますが、今回は使用していません。またroundingを設定すると小数点以下の桁数が表示できます。今回はindexOfを利用して、カウントアップする数値に小数点が含まれている場合のみ小数点以下を1桁表示させています。
$(function() {
$(window).on("load scroll", function() {
$(".fadein").each(function() {
var txtPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > txtPos - windowHeight + windowHeight / 5){
$(this).css({
"opacity": "1",
"transform": "translateX(0)"
});
if($(".num",this).attr("data-num").indexOf('.') > -1 ){
var rounding = 1;
} else {
var rounding = 0;
}
$(".num",this).numerator({
easing: 'linear',
duration: 500, //カウントアップの時間
toValue: $(".num",this).attr("data-num"), //カウントアップする数値
//delimiter: ',', //3桁区切りの記号
rounding: rounding //小数点以下の桁数（初期値：0）
});
}
});
});
});