今日紹介する［chaffle］は超簡単に実装できるjQueryプラグインで、テキストにマウスカーソルを当てると、文字をランダムにシャッフルして表示させることができます。

言葉の説明では難しいので、まずはサンプルをご覧ください。

［chaffle］の実装サンプル：https://on-ze.com/demo/jquery-chaffle/

お試しいただいたように、英語・漢字・ひらがな・カタカナに対応。それぞれの文字をシャッフルさせています。

導入方法は超簡単なのでjQuery初心者にもオススメです。
まずは以下の公式サイトより必要なファイルをダウンロードしてきましょう。

chaffle：公式サイト

いくつかのファイルが一緒にダウンロードされますが、必要なのは「jquery.chaffle.min.js」だけです。
このファイルをサーバーの任意の箇所にアップロードしておきましょう。

jQueryプラグインを動かすためには、他にjQueryのコアファイルが必要になりますが、今回はGoogleのCDNにホストされている最新版の「jquery.js」を使うことにします。

以下のコードをHTMLの <head>〜</head> 内に記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.chaffle.min.js"></script>

また、このコードを記述するとき、同時に［chaffle］の初期設定も済ませてしまえばその後の作業が捗ります。

<script>
$(function(){
	$('.chaffle').chaffle({
		speed:10,
		time:140
	});
});
</script>

上記、「speed」ではテキストの文字をシャッフルさせるスピードを、「time」ではシャッフルし続ける時間を指定できます。

ここまでで準備は終了。
あとは、シャッフルさせたいテキストに任意のクラス名（ここでは「.chaffle」）を追加すればOKです。

<ul>
<li><a class="chaffle" data-lang="en">English</a></li>
<li>>a class="chaffle" data-lang="ja">日本語（漢字）</a></li>
<li>>a class="chaffle" data-lang="ja-hiragana">ひらがな</a></li>
<li>>a class="chaffle" data-lang="ja-katakana">カタカナ</a></li>
</ul>

なお、HTML5から追加されたカスタムデータ属性を利用して、シャッフルさせる文字を「英語」「漢字」「ひらがな」「カナ」から選択することができます。

  • data-lang="en"：英語
  • data-lang="ja"：漢字
  • data-lang="ja-hiragana"：ひらがな
  • data-lang="ja-katakana"：カタカナ

ちょっとしたワンポイントで目を引くことができるので、使いどころを見極めれば非常に効果的かと思います。
是非お試しください。

chaffle：公式サイト