以前に「jQueryで数字をカウントアップしながら表示する方法」と題して、
jQueryで数字をカウントアップさせながら表示する方法を紹介しましたが、
数字を表示する別パターンとして、ランダムにシャッフルしたアニメーションによって
一桁ずつ順々に表示する方法でインパクトを与えることもあります。
Webページ上になにかの投票数や実績数またはSNSのシェア数といった数値を掲載する際に
そのようなアニメーション演出を加えることによって目を引かせることもできます。
そんな数字をランダムにシャッフルして表示するアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。
jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法
「jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法」サンプルを別枠で表示
ページが表示されると画面上に配置された数字が
一桁ずつランダムで切り替わるアニメーションで表示されます。
スクリプトから指定する時間が経過すると
一桁ずつランダムアニメーションがストップし、実際の数値が表示されます。
表示する数字はHTML側で値を指定し、
ランダムで切り替わるアニメーションスピードや
一桁ずつ表示される際の遅延時間の設定も可能です。
全体構成についてまずはHTMLから。
◆HTML <p class="shuffle">1000</p>
実装させるタグは、ブロック要素とインライン要素のどちらでも可能です。
タグ自体に動作を実装させることも可能ですが、
サンプルではクラス「.shuffle」をつけたものに対して実装する構成にしています。
このHTMLで指定した桁数分、数値がそれぞれランダムアニメーションします。
このサンプルではCSSの指定は特に動作に影響しないので割愛しますが、
フォントの種類やサイズ等をCSSで調整することで
見た目を装飾させることができます。
そして実際のランダムでのシャッフルアニメーション動作スクリプトは
以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var shuffleElm = $('.shuffle'),
shuffleSpeed = 40,
shuffleAnimation = 3000,
shuffleDelay = 1000;
shuffleElm.each(function(){
var self = $(this);
self.wrapInner('<span class="shuffleWrap"></span>');
var shuffleWrap = self.find('.shuffleWrap');
shuffleWrap.replaceWith(shuffleWrap.text().replace(/(\S)/g, '<span class="shuffleNum">$&</span>'));
var shuffleNum = self.find('.shuffleNum'),
numLength = shuffleNum.length;
shuffleNum.each(function(i){
var selfNum = $(this),
thisNum = selfNum.text(),
shuffleTimer;
function timer(){
shuffleTimer = setInterval(function(){
rdm = Math.floor(Math.random()*(9))+1;
selfNum.text(rdm);
},shuffleSpeed);
}
timer();
var i = -i + numLength;
setTimeout(function(){
clearInterval(shuffleTimer);
selfNum.text(thisNum);
},shuffleAnimation + (i*shuffleDelay));
});
self.css({visibility:'visible'});
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| shuffleElm = $(‘.shuffle’) | シャッフルアニメーション動作させる要素 |
|---|---|
| shuffleSpeed = 40 | シャッフルアニメーションするスピード |
| shuffleAnimation = 3000 | シャッフルアニメーションの停止処理が開始されるまでの時間 |
| shuffleDelay = 1000 | 1桁ごとにシャッフルアニメーションが停止するまでの遅延時間 |
「shuffleElm」が動作対象の要素の指定になり、
CSSクラスやIDまたはタグ自体を指定させることができます。
「shuffleSpeed」は数値がランダムで切り替わる際のスピードになり、
この値を小さくすればランダムで切り替わる速度が速くなり、大きくするとゆっくりになります。
「shuffleAnimation」はシャッフルアニメーションの停止処理が開始されるまでの時間になり、
この値を小さくすればシャッフルアニメーションの停止が開始されるまでの時間が短くなり、
大きくすると長くなります。
「shuffleDelay」はシャッフルアニメーションの停止処理が開始された後、
一桁ごとに停止するまで遅延時間になります。
スクリプト構成はタグで囲われた数値を取得して、
数値一桁ごとに＜span＞で囲い、自身の値を取得した後に
その＜span＞タグの中で数値をランダムに表示させるアニメーションを実行させます。
「shuffleAnimation」で設定した時間が経過した後は
＜span＞タグの最後の桁の方からアニメーションをストップさせ、
最初に取得していた元の数値を表示させています。
数値は画像を使わないシステムフォントで構成しているので
GoogleフォントなどのWebフォントを使用することで
簡単に飾り気のあるフォントでシャッフルアニメーションの動作を実装させることも可能になります。
「GoogleFontパターン：jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法」サンプルを別枠で表示
以上が数字をランダムにシャッフルアニメーションさせて表示する方法でした。
なにかの投票数やランキング発表などといった注目させたい数字に対して
インパクトある目を引くアニメーション演出をつけることができるかと思います。
jQueryで数字にシャッフルアニメーションをつける際に是非。。