文字がシャッフルしながら打ち込まれて表示されるエフェクトが実装できるライブラリ「shuffle-letters.js」

どうも上かるびです。

皆さんキーボードとマウス、アルコール消毒してますか。

今回は案件で使用した、テキストをシャッフルしながら表示するエフェクトを実装できるライブラリを紹介します。

Contents

shuffle-letters.js
後日談　シャッフルさせながら表示するライブラリはあまりなかった
他のシャッフル系ライブラリの紹介

shuffle-letters.js

まずはデモから。（閲覧はPC推奨）

DEMO

ダウンロード

こちらからダウンロードします。

Shuffle Letters Effect In Pure JavaScript - shuffle-letters.js | CSS Script

shuffle-letters.js is a lightweight JavaScript library that allows you to print text with a typing animation by shuffling the text letter by letter.

shuffle-lettersで検索すると、下記のjQueryのライブラリがヒットすると思いますが、今回こちらは使いません。

Shuffle Letters Effect: a jQuery Plugin

In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element - an interesting effect that can be used in headi...

ただこちらのライブラリは割と使い勝手が良いので、サイトで一部だけのシャッフルでしたらこちらをおすすめします。

使い方

まずはライブラリを読み込みます。（バンドルツールを使っている方はimportやrequire）

<script src="shuffle-letters.js"></script>

1	<script src="shuffle-letters.js"></script>

あとはJavaSriptファイルで要素を指定してShuffleLettersを実行するだけです。

const shuffleElms = document.querySelectorAll('シャッフルさせたい要素');
shuffleLetters(shuffleElms);

1 2	const shuffleElms = document.querySelectorAll('シャッフルさせたい要素'); shuffleLetters(shuffleElms);

オプションとして、以下の３つが指定できます。

text（HTMLではなくJavaScript側で入力する場合）

step（何文字先までシャッフルさせるか）

fps（表示スピード）

公式ではHTMLに書いたものをシャッフルさせる場合と、JavaScriptに書いたものをシャッフルさせる場合の２通りが紹介されています。

HTMLに書いたものをシャッフルさせる場合

HTML

<p class="demo1">Shuffleシャッフルしゃっふる</p>
<p class="demo1">Shuffleシャッフルしゃっふる</p>
<p class="demo1">Shuffleシャッフルしゃっふる</p>

Shuffleシャッフルしゃっふる

JavaScript（変数名は任意です）

const textTarget = document.querySelectorAll('.demo1');
shuffleLetters(textTarget);

1 2	const textTarget = document.querySelectorAll('.demo1'); shuffleLetters(textTarget);

上かるび

複数の要素をシャッフルさせる場合でも、for文やforEachを使わなくても大丈夫です。

JavaScriptに書いたものをシャッフルさせる場合（textオプションを使用）

HTML

<p class="demo2"></p>
<p class="demo2"></p>
<p class="demo2"></p>

JavaScript

const textTargetJs = document.querySelectorAll('.demo2');
shuffleLetters(textTargetJs,{
  text:'ShuffleシャッフルしゃっふるShuffleシャッフルしゃっふるShuffle'
});

const textTargetJs = document.querySelectorAll('.demo2');

shuffleLetters(textTargetJs,{

text:'ShuffleシャッフルしゃっふるShuffleシャッフルしゃっふるShuffle'

});

公式ではhidden属性を使った書き方も紹介されていたのですが、使いどころが分からなかったのでスルーしました(;^ω^)誰か教えて…

スクロールに合わせてシャッフルさせる場合

今回の案件でやりたかったパターン。

公式で紹介されていたhidden属性をつけて表示させるやり方で試しましたが、hidden属性がついた要素はintersectionObserverの監視に反応しない、ということが判明。

ということで、今回は公式のやり方ではなく、opacity:0にしておいて、交差したらis-showクラスをつけてopacity:1にするというやり方で実装しました。

HTML

<p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p>
<p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p>
<p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p>

Shuffleシャッフルしゃっふる

JavaScript

//（抜粋）

const targets = document.querySelectorAll('.js-shuffleText');

if(targets !==null) {
  shuffleShowScroll();
}

function shuffleShowScroll() {
  function doWhenTargetObserve(entries, observerStop) {
    entries.forEach((entry) => {
      // 監視範囲にないときは何もしない
      if (!entry.isIntersecting) {
        return;
      }      
      // 監視範囲と交差したときの処理（シャッフルさせ、is-showクラス付与）
      shuffleLetters(entry.target, {
        step: 10,
        fps: 60,
      });
      entry.target.classList.add('is-show');
      //一度交差したら監視をやめる
      observerStop.unobserve(entry.target);
    });
  }
  // 監視範囲
  const options = {
    root: null,
    rootMargin: '-10% 0%',
    threshold: 1,
  };
  //IntersectionObseverのインスタンス作成
  const observer = new IntersectionObserver(doWhenTargetObserve, options);
  // ターゲットを監視
  targets.forEach((target) => {
    observer.observe(target);
  });
}

//（抜粋）

const targets = document.querySelectorAll('.js-shuffleText');

if(targets !==null) {

shuffleShowScroll();

}

function shuffleShowScroll() {

function doWhenTargetObserve(entries, observerStop) {

entries.forEach((entry) => {

// 監視範囲にないときは何もしない

if (!entry.isIntersecting) {

return;

}

// 監視範囲と交差したときの処理（シャッフルさせ、is-showクラス付与）

shuffleLetters(entry.target, {

step: 10,

fps: 60,

});

entry.target.classList.add('is-show');

//一度交差したら監視をやめる

observerStop.unobserve(entry.target);

});

}

// 監視範囲

const options = {

root: null,

rootMargin: '-10% 0%',

threshold: 1,

};

//IntersectionObseverのインスタンス作成

const observer = new IntersectionObserver(doWhenTargetObserve, options);

// ターゲットを監視

targets.forEach((target) => {

observer.observe(target);

});

}

CSS

.text{
  opacity:0;}

.text.is-show {
  opacity: 1;}

.text{

opacity:0;}

.text.is-show {

opacity: 1;}

後日談　シャッフルさせながら表示するライブラリはあまりなかった

今回は文字をシャッフルしながら表示させたいというアニメーションの要望があったのでこのライブラリを使用しました。

参考サイトとして提示されたのがこちらのカロリーメイトのサイト。

CalorieMate to Programmer | 大塚製薬

カロリーメイトから、すべてのうちこむ人へ。プログラミング言語で書かれたメッセージを公開中。　#うちこむ人にバランス栄養

すべてのアニメーションがカッコいい。

しかし「シャッフルエフェクト」などでググって出てくるライブラリやスニペットのほとんどは、その場でシャッフルするものだったり、JavaScript側でしか文字を入力できないものだったり。
小一時間調べましたが、最初は「これこれ！」というものが見つかりませんでした。。。

今回使用したライブラリに行きつくまでに、いろんなライブラリを試して時間を溶かしました。。。

そして最終的には先方から「ここのアニメーションはナシで」と告げられ、泣きそうになりました。

他のシャッフル系ライブラリの紹介

調べている途中で試したライブラリを紹介します。

気になる方はいろいろ触ってみてください。

有名制作会社ICSで作られたライブラリ

手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIA

JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリで、SPA（シングル・ページ・アプリケーション）やゲームの演出やスペシャルコンテンツなどの演出に役立ちます。たとえば、ウェブサイトでマウス...

タイピングではなく、その場でシャッフルされるアニメーション箇所にはこちらを使用させていただきました。

書籍も大ヒット中。「動くWebデザインアイディア帳」のサイト。
ICSさんのshuffle-textの活用して紹介されています。スクロールすると発火する記述もありますが、scrollイベントを使っているので負荷は重め。
https://coco-factory.jp/ugokuweb/move02/8-6/

５つのライブラリやスニペットが紹介されています。CodePenなどで調べると出てくるエフェクトもありますね。