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

こんにちはタクゾウです。
今回は文字列をランダムに切り替える演出を行う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();

まとめ

実装タイミングを変更すれば、スクロールアニメーションとして見せることもできます。
なにより、下位端末でも問題なく動き、使用方法も簡単なのでとにかく使いやすいです。
細かくカスタマイズしたい人はこちらを参考にしてください。

参考 ShuffleText | shuffle-text

Web制作を勉強している人の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »