今日紹介する[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:公式サイト