【jQuery】ランダムカウンタープラグインTF Numbers

jQuery

August 1, 2015

TF Numbersはスクロールするとランダムな動きをするカウントプラグインです。
最近のWebサイトなどでもたまに使われていたりするので似たものを見かけた事がある方も多いのではないでしょうか。

jQuery

<script src="path/to/jquery.js"></script>
<script src="path/to/tf-numbers.js"></script>

jQuery本体とtf-numbers.jsを読み込みます。

CSS

<link rel="stylesheet" type="text/css" href="path/to/style.css" />
<link rel="stylesheet" type="text/css" href="path/to/font-awesome.min.css" />

font-awesome.min.cssはWeb icon用のcssです。

HTML Markup

<section class="statistics" data-background="linear-gradient(#333, #599)" data-title-color="#fafafa" data-icons-color="#ddd" data-numbers-color="palegoldenrod" data-count-titles="#ddd">

    <div class="sec-title"><h2>Some Random Numbers</h2></div>

    <div class="statistics-inner">
                   
        <div class="stat" data-count="560">
            <span class="fa fa-area-chart fa-4x stat-icon"></span>
            <span class="number"></span>
            <span class="count-title">Downoads</span>
        </div><!-- .stat -->    
                   
        <div class="stat" data-count="1200">
            <span class="fa fa-clock-o fa-4x stat-icon"></span>
            <span class="number"></span>
            <span class="count-title">Hours Working</span>
        </div><!-- .stat -->    
                   
        <div class="stat" data-count="5600">
            <span class="fa fa-code fa-4x stat-icon"></span>
            <span class="number"></span>
            <span class="count-title">Lines Written</span>
        </div><!-- .stat -->    

        <div class="stat" data-count="2300">
            <span class="fa fa-home fa-4x stat-icon"></span>
            <span class="number"></span>
            <span class="count-title">Another Number</span>
        </div><!-- .stat --> 
              

    </div><!-- .statistics-inner -->

 </section>

data-countの数が表示されます。

Latest Posts

Related Posts