Webデザイン参考記事まとめ アプデ(UPDE) - Webデザイナー／クリエイター向けの最新情報まとめアンテナ。

閉じる

2016年11月8日(火)

jQueryで数字をカウントアップしながら表示する方法

Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に
単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることで
ユニークな見た目でのインパクトある演出で数字を印象づけることができます。

そんな数値のカウントアップアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。

jQueryで数字をカウントアップしながら表示する方法

「jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示

Webページ上に配置された数字がページロードと共にカウントアップされ
設定した数値で最終的に止まって表示されます。

数字は開始番号と最終的に表示する値までを指定し、カウントアップアニメーションします。
アニメーションするスピードも設定可能です。

全体構成についてまずはHTMLから。

◆HTML

0

実装させるタグはブロック要素とインライン要素のどちらでも可能です。
タグ自体に動作を実装させることも可能ですが、
サンプルではクラス「.co...

author:

BlackFlag

http://black-flag.net

マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ

今日のwebデザイン記事ランキングを見る

関連記事

Ads

マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『jQueryで数字をカウントアップしながら表示する方法』についてまとめています。

この記事は特にjavascript・アニメーション・jQuery・フォント・ダウンロード・Googleについて書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。

Ads

最近の人気記事

人気のタグ