文字列をランダムに切り替える演出を行うJSライブラリ「shuffle-text」

2018/06/01 2分

こんにちはタクゾウです。
今回は文字列をランダムに切り替える演出を行うJSライブラリ「shuffle-text」について紹介します。
使い方がとても簡単で、Androud4.4・IEでも使えるため使用させて頂いてます。

Shuffle Text使用した例
コード説明
まとめ

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();