ShuffleText.js - マウスオーバーでテキストシャッフル // MOONGIFT Archived

映画などでよく見られるテキストがシャッフルされて徐々に表示されていくアニメーション。単純に文字を表示するよりもインパクトがあって思わず目を引きつけられることでしょう。そんな演出が簡単にできるライブラリがShuffleText.jsになります。

ShuffleText.jsの使い方

アニメーションGIFではちょっとしたアニメーションしていないように見えますが実際にはもっと激しいです。

DOMではなくCanvasを使った版もあります。

実践的なデモ。

ShuffleText.jsを使うとテキストが格好良くシャッフルされた後、元のテキストに再現されます。思わずマウスを動かしてみたくなるのではないでしょうか。あまり使いすぎると邪魔くさく感じますので、ポイントを見極めて使うのが良いでしょう。

ShuffleText.jsはTypeScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。