今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. 横方向のスライダー「Scrollyeah」
  3. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  4. 画像を非同期に遅延読み込み「Deferred Image」
  5. 文字数に応じてテキストエリア高さを自動調節「autoexpand」

タイプライターのようにテキストを1文字ずつ表示「typist」

スポンサーリンク

タイプライターのようにテキストを1文字ずつ表示するプラグイン「typist」を紹介します。

jQueryプラグイン「typist」

このプラグインを使えば、指定したテキストを1文字ずつ表示してくれます。

1文字ずつ表示するので、タイプライターで入力しているようなテキスト・アニメーションを実装することができます。

また、改行にも対応しているので、サイトにおもしろい効果を加えることができます。

スポンサーリンク

それではデモページをご覧ください。

「typist」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="typist のデモでーす。">
<title>typist - jQueryプラグイン</title>
</head>
<body>
<h1>typist のデモでーす。</h1>
<p class="typist"></p>

<script charset="utf-8" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.typist.js"></script>
<script>
jQuery(function($){
  $('.typist')
    .typist({ speed: 12 })
    .typistAdd('A「こんにちは」\n')
    .typistPause(1000)
    .typistAdd('B「こんにちは。今日はいい天気ですね。」\n')
    .typistPause(1000)
    .typistAdd('A「そうですね……」');
  });
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)