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

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

2017年5月18日公開

JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル(文字列がランダムで切り替わる演出)の表現を行うためのライブラリで、使用することでSPA（シングル・ページ・アプリケーション）やゲームの演出やスペシャルコンテンツなどの表現を強化できます。

例えば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。

JSライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントは全てGitHubにて公開していますので参照ください。

shuffle-text: JavaScript Text Effect library.

shuffle-text を使ってみよう

本記事では、JSライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作成するもののサンプルとなります。

GitHubからダウンロードして、buildフォルダー内の「shuffle-text.js」を次のようにファイルを配置します。プレーンなJavaScriptで作成しているので、ライブラリの依存関係はありません。

shuffle-text.jsの使い方は至ってシンプルで、HTML要素の中のテキストに対してエフェクトを適用するだけです。HTMLの適用したい要素に対して、document.querySelector()メソッドなどで参照をとり、ShuffleTextクラス(shuffle-text.jsの中身)のコンストラクタの引数として渡します。エフェクトを開始したいタイミングで start() メソッドを呼び出します。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8"/>
</head>
<body>
<h1 id="myText">This is a shuffle-text.js example.</h1>
<script src="shuffle-text.js"></script>
<script>
 var text = new ShuffleText(document.querySelector('#myText'));
 text.start();
</script>
</body>
</html>

これで以上です。ブラウザでエフェクトが再生されるのを確認ください。

詳しい仕様は、APIドキュメントとして公開しています。いろいろカスタマイズできるようになっているので参考ください。

APIドキュメント

こだわったポイント

例えば、文字がシャカシャカ切り替わりながら揃うだけという設計目標だと、次のように前方から文字が出現する演出になります。これはこれでいいのですが、機械的な単調な雰囲気を感じます。

shuffle-textでは文字の出現やエフェクトの終了タイミングが不揃いになるように設計しています。乱数のコクと言いますか、あえて不完全なほうがノスタルジックな雰囲気を醸し出せます。

shuffle-textの事例を紹介

shuffle-textは私が制作に携わったいくつかのプロジェクトで利用しています。事例として紹介します。

▲ ClockMaker Labs – Interaction Design × Web Technology

筆者の個人サイト。2008年頃から制作してきた実験的なインタラクションコンテンツを掲載しています。サイトはAngular 4で構築しており、その中でshuffle-textを利用しています。サイトのソースコードはGitHubで公開しています。

▲ Beautifl – Flash Gallery of wonderfl

Beautiflはwonderflに投稿されたFlash作品を独自にピックアップしたギャラリーサイト。画面左側のナビゲーションにshuffle-textを利用しています。このサイトに関する技術的なことは記事「脱jQueryのためにしたこと」や「CSS Grid Layoutをガッツリ使った所感」にまとめていますので、あわせてご覧ください。