4月22日 html続き カウントアップ

htmlの続き

昨日の作った箇所の下から作成。

ここに関しては昨日の書いたコードのカラムを左右入れ替えるだけでいけたので簡単

見本サイトのカウントアップはどう書いてるのか見てたら、googlefontの表記が書いている、、、。ちょっと拝借。cdnはまだやっていない。

<link href="https://fonts.googleapis.com/css?family=Montserrat:700%2C500" rel="stylesheet" property="stylesheet"

media="all" type="text/css">

カウントアップのscriptがどこに書いてあるかわからず。

サイトで調べて記述。

簡単！数字のカウントアップ表示で動きのあるサイトに | エムトラッドブログ

表記できたが、それぞれ数字の数が違うので、カウントするまでの各自スピード設定をして同じタイミングでカウントを終われるように一括にサクッとできないものか。

<p class="count" data-num="300">0</p><span></span>

<!-- countup -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>//count up

$(function () {

var countElm = $('.count'),

countSpeed = 1;

countElm.each(function () {

var self = $(this),

countMax = self.attr('data-num'),

thisCount = self.text(),

countTimer;

function timer() {

countTimer = setInterval(function () {

var countNext = thisCount++;

self.text(countNext);

if (countNext == countMax) {

clearInterval(countTimer);

}

}, countSpeed);

}

timer();

});

});

</script>

125右部分に謎のポジションが。明日修正しよう。