2017年01月17日(火)
jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法
以前に「jQueryで数字をカウントアップしながら表示する方法」と題して、
jQueryで数字をカウントアップさせながら表示する方法を紹介しましたが、
数字を表示する別パターンとして、ランダムにシャッフルしたアニメーションによって
一桁ずつ順々に表示する方法でインパクトを与えることもあります。Webページ上になにかの投票数や実績数またはSNSのシェア数といった数値を掲載する際に
そのようなアニメーション演出を加えることによって目を引かせることもできます。そんな数字をランダムにシャッフルして表示するアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法
「jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法」サンプルを別枠で表示
ページが表示されると画面上に配置された数字が
一桁ずつランダムで切り替わるアニメーションで表示されます。スクリプ...
0
9
5
33
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
Sass：@eachや@forを使って繰り返し記述する手間を省く
NEXT ›
ベクターで使える世界観のある手書きイラストレーションセット「Illusion Hand-Drawn Collection」
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法』についてまとめています。
この記事は特にjavascript・アニメーション・jQuery・フォント・ダウンロード・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
