タイプライターのようにテキストを1文字ずつ表示「typist」
当ページのリンクには広告が含まれています。
スポンサーリンク
タイプライターのようにテキストを1文字ずつ表示するプラグイン「typist」を紹介します。
jQueryプラグイン「typist」
このプラグインを使えば、指定したテキストを1文字ずつ表示してくれます。
1文字ずつ表示するので、タイプライターで入力しているようなテキスト・アニメーションを実装することができます。
また、改行にも対応しているので、サイトにおもしろい効果を加えることができます。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（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>
スポンサーリンク