こんにちはタクゾウです。
今回は文字列をランダムに切り替える演出を行うJSライブラリ「shuffle-text」について紹介します。
使い方がとても簡単で、Androud4.4・IEでも使えるため使用させて頂いてます。
Shuffle Text使用した例
実際にshuffle_textの処理をかけたDEMOがこちらになります。
参考 shuffle_textshuffle_textプラグインの公式サイトはこちらです。
参考 手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIAコード説明
html記述例
テキストをランダムで切り替える要素に「my-effect」クラスを指定しています。
html
<h1 class="ttl">TEXT SAMPLE</h1>
<p class="txt my-effect">shuffle shuffle shuffle</p>
<p class="txt my-effect">shuffle shuffle shuffle</p>
<p class="txt my-effect">shuffle shuffle shuffle</p>
<p class="txt my-effect">shuffle shuffle shuffle</p>
<p class="txt my-effect">shuffle shuffle shuffle</p>
実行タイミングを調節する記述例
「my-effect」が指定してある要すべてでインスタンスを作成し、ブラウザロード時とhover時にシャッフルがおこる実装にしてあります。
javascript
window.addEventListener('load', init);
function init() {
var effectList = [];
var elementList = document.querySelectorAll('.my-effect');
for (var i = 0; i < elementList.length; i++) {
var element = elementList[i];
element.dataset.index = i;
// インスタンスを取得する
effectList[i] = new ShuffleText(element);
// マウスオーバー時に再生する
element.addEventListener('mouseenter', function () {
effectList[+this.dataset.index].start();
});
// マウスアウト時に再生する
element.addEventListener('mouseleave', function () {
effectList[+this.dataset.index].start();
});
// 初回を再生する
effectList[i].start();
}
}
MEMO
基本的に使用したい要素を取得し、インスタンスを作成後、start()メソッドで動かすことができます。var text01 = new ShuffleText(document.querySelector('#shuffleTex01'));
text01.start();
まとめ
実装タイミングを変更すれば、スクロールアニメーションとして見せることもできます。
なにより、下位端末でも問題なく動き、使用方法も簡単なのでとにかく使いやすいです。
細かくカスタマイズしたい人はこちらを参考にしてください。
Web制作を勉強している人の参考になれば幸いです。
コメントを残す