今回はランダムな文字列から任意の文字列に変化させるエフェクトを実装できるChaffle.jsを紹介しようと思います。
AEなどでの文字シャッフルインや単語シャッフルインと同じようなものです。
用意するもの
まずはこちらのGitHubからファイル一式をダウンロードしましょう。最低限必要なものはchaffle.jsだけです。
<script src="chaffle.min.js"></script>
基本的な使い方
使い方もそんなに難しくありません。htmlタグにdata-chaffle属性を記述することによってエフェクトを付与するようになっています。
data-chaffle属性はjaなどの言語を指定することによってランダムで出現する言語を選んでおり、複数選択は出来ないようです。ちなみに指定しなければ英語になるっぽい。
<p data-chaffle="en">English</p> <p data-chaffle="ja">日本語</p> <p data-chaffle="ja-hiragana">ひらがな</p> <p data-chaffle="ja-katakana">カタカナ</p> <!-- 言語、切り替え速度、正しい文字が表示されるまでの時間といったオプションも設定できます。 --> <p data-chaffle="en" data-chaffle-speed="100" data-chaffle-delay="200">Data options</p>
jsの記述は下記のようになります。
//querySelectorAllでdata-chaffle属性を持っているDOMを全て取得
const elements = document.querySelectorAll('[data-chaffle]');
//取得したDOMに対してそれぞれエフェクトを付与
Array.prototype.forEach.call(elements, function (el) {
//取得したDOMのひとつずつ（el）に対してエフェクトを付与。
//先ほどhtmlでも指定できたオプションはここで付与することも出来ます。
const chaffle = new Chaffle(el, {
lang: 'en’,
speed: 20,
delay: 100
});
//マウスオーバーした時にエフェクトが実行されるようにイベントを設定しておきます。
el.addEventListener('mouseover', function () {
chaffle.init();
});
});
このようにちょっと個性的なエフェクトを比較的簡単に実装出来ます。
このエフェクトだったらデジタル系のデザインやビビットな表現をしているミュージシャンなんかのサイトが合うかもしれませんね。
