JSでテキストをシャッフルさせる方法

shuffle-text.jsの読み込み

自作のjsファイルの読み込みの前にshuffle-text.jsを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/shuffle-text@0.3.0/build/shuffle-text.min.js"></script>
<script src="script/script.js"></script>copied!

簡単なやり方

サンプルのテキストを用意する。

<p class="text">sample</p>copied!

Javascriptのコードを書く。

let text = new ShuffleText(document.querySelector('.text'));
text.start();copied!

これで実行していただくとこんな感じの文字ができると思います。

カスタマイズ

次に、少しカスタマイズしていきましょう。

アニメーションの長さ

アニメーションの長さは以下のように指定できます。
初期値は600msです。

text.duration = 1000;copied!

文字

アニメーション中の文字を指定できます。

text.sourceRandomCharacter = "あいうえお0123456789";copied!

最初の文字

「---- → OELB」のように変化する時の「----」の部分です。

text.emptyCharacter = " ";copied!

画面に入った時に実行

Intersection Observerを使って要素が画面に入った時に実行してみるのもいいでしょう。

const text = new ShuffleText(document.querySelector('.text'));

const targetElement = document.querySelector('.text');

const callback = (entries, observer) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			text.start();
		}
	});
};

const options = {
	root: null,
	rootMargin: '0px',
	threshold: 0
};

const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);copied!