どうも上かるびです。
皆さんキーボードとマウス、アルコール消毒してますか。
今回は案件で使用した、テキストをシャッフルしながら表示するエフェクトを実装できるライブラリを紹介します。
shuffle-letters.js
まずはデモから。(閲覧はPC推奨)
ダウンロード
こちらからダウンロードします。

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

ただこちらのライブラリは割と使い勝手が良いので、サイトで一部だけのシャッフルでしたらこちらをおすすめします。
使い方
まずはライブラリを読み込みます。(バンドルツールを使っている方はimportやrequire)
1 |
<script src="shuffle-letters.js"></script> |
あとはJavaSriptファイルで要素を指定してShuffleLettersを実行するだけです。
1 2 |
const shuffleElms = document.querySelectorAll('シャッフルさせたい要素'); shuffleLetters(shuffleElms); |
オプションとして、以下の3つが指定できます。
公式ではHTMLに書いたものをシャッフルさせる場合と、JavaScriptに書いたものをシャッフルさせる場合の2通りが紹介されています。
HTMLに書いたものをシャッフルさせる場合
HTML
1 2 3 |
<p class="demo1">Shuffleシャッフルしゃっふる</p> <p class="demo1">Shuffleシャッフルしゃっふる</p> <p class="demo1">Shuffleシャッフルしゃっふる</p> |
JavaScript(変数名は任意です)
1 2 |
const textTarget = document.querySelectorAll('.demo1'); shuffleLetters(textTarget); |

複数の要素をシャッフルさせる場合でも、for文やforEachを使わなくても大丈夫です。
JavaScriptに書いたものをシャッフルさせる場合(textオプションを使用)
HTML
1 2 3 |
<p class="demo2"></p> <p class="demo2"></p> <p class="demo2"></p> |
JavaScript
1 2 3 4 |
const textTargetJs = document.querySelectorAll('.demo2'); shuffleLetters(textTargetJs,{ text:'ShuffleシャッフルしゃっふるShuffleシャッフルしゃっふるShuffle' }); |
公式ではhidden属性を使った書き方も紹介されていたのですが、使いどころが分からなかったのでスルーしました(;^ω^)誰か教えて…
スクロールに合わせてシャッフルさせる場合
今回の案件でやりたかったパターン。
公式で紹介されていたhidden属性をつけて表示させるやり方で試しましたが、hidden属性がついた要素はintersectionObserverの監視に反応しない、ということが判明。
ということで、今回は公式のやり方ではなく、opacity:0にしておいて、交差したらis-showクラスをつけてopacity:1にするというやり方で実装しました。
HTML
1 2 3 |
<p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p> <p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p> <p class="text js-shuffleText">Shuffleシャッフルしゃっふる</p> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
//(抜粋) 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
1 2 3 4 5 |
.text{ opacity:0;} .text.is-show { opacity: 1;} |
後日談 シャッフルさせながら表示するライブラリはあまりなかった
今回は文字をシャッフルしながら表示させたいというアニメーションの要望があったのでこのライブラリを使用しました。
参考サイトとして提示されたのがこちらのカロリーメイトのサイト。

すべてのアニメーションがカッコいい。
しかし「シャッフルエフェクト」などでググって出てくるライブラリやスニペットのほとんどは、その場でシャッフルするものだったり、JavaScript側でしか文字を入力できないものだったり。
小一時間調べましたが、最初は「これこれ!」というものが見つかりませんでした。。。
他のシャッフル系ライブラリの紹介
調べている途中で試したライブラリを紹介します。
気になる方はいろいろ触ってみてください。
有名制作会社ICSで作られたライブラリ

タイピングではなく、その場でシャッフルされるアニメーション箇所にはこちらを使用させていただきました。
書籍も大ヒット中。「動くWebデザインアイディア帳」のサイト。
ICSさんのshuffle-textの活用して紹介されています。スクロールすると発火する記述もありますが、scrollイベントを使っているので負荷は重め。
https://coco-factory.jp/ugokuweb/move02/8-6/
5つのライブラリやスニペットが紹介されています。CodePenなどで調べると出てくるエフェクトもありますね。

jQueryのプラグインが紹介されているサイト

コメント