デザインアクセントに！タイプライターで打っているようなテキスト
Javascript・プラグイン
まるでタイプライターで文字を打っているような表現を実現してくる「t-js」。
軽量で実装も簡単、IE8以降、Android 4以降、その他のモダンブラウザはほぼ対応していますので使い勝手もいいです。
読みやすさなどユーザビリティーは考慮しながらも、デザインのアクセントとして利用してみるのもいいかもしれません。
t-jsをダウンロード
公式サイト、またはGitHubからダウンロードしてください。
t-js実装する
jqueryとダウンロードしたファイルの中の「t.min.js」を読み込みます。
|
1 2 |
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script src="js/t.min.js"></script> |
適応させたい要素に任意のクラス名を付けます。ここでは「type」とします。
そして読み込んだjsの後にメソッドを記述します。下記コードを記述するだけで実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
/* 適応させたい要素に任意のクラス名をつける */ <p class="type">webデザインについて学ぶ</p> … <script> // 実装コード $(document).ready(function(){ $(".type").t() }); </script> |
さまざまなオプションも用意されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $(".type").t({ speed : 75, // スピード デフォルト75 数値が低くなるごとに速くなる speed_vary : true, // スピードがランダムに変化 デフォルト false blink : true, // カーソルが点滅 デフォルト false caret : true, // カーソルを非表示 delay : 200ms, // 開始をずらす デフォルト false mistype 10: , // 打ち間違いの演出 英数字のみ 打ち間違いの確率を数値で指定 デフォルト false repeat : true, // trueで無限リピート デフォルト false tag : p, // テキストを囲むタグを指定 デフォルト span }) }); </script> |
こちらのサイトを参考にさせていただきました。
