今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. テーブルをレスポンシブ対応に「rt Responsive Tables」
  3. 背景画像や色をランダムに変更「RandomBackground」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

タイプライターのようにテキストを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>
スポンサーリンク

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