ケケンタJavaScriptでタイプライター効果を実装したい……
ケケンタページ読み込み時に自動で動くタイプライターが欲しい……
今回はこのようなお悩みをお持ちの方へ向けて
Web制作において人気の高いアニメーション効果「JavaScriptタイプライター」
をご紹介します。
ボタンなしで自動開始するシンプルな実装なので、いままさに「タイプライター効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！
- 基本的なJavaScriptタイプライター（自動開始）
- シンプルで分かりやすい実装
- カスタマイズ可能な速度設定
特にページ読み込み時に自動で動くタイプライターの実装は、ユーザビリティを向上させる効果的なアニメーションです。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。
もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！
ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！
ケケンタ無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！
タイマースタート
3:00
【コピペOK】基本的なJavaScriptタイプライター
① デモ
See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.
このタイプライターの特徴
- ページ読み込み時に自動開始
- シンプルな実装
- カスタマイズ可能な速度設定
② HTML
<div id="typewriter-demo" class="typewriter-text"></div>シンプルなdiv要素のみです。IDを指定してJavaScriptから要素を取得できるようにしています。
③ CSS
.typewriter-text {
font-family: 'Courier New', monospace;
font-size: 1.8rem;
font-weight: bold;
color: #2c3e50;
min-height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.4;
}今回はモノスペースフォントを使用することで、タイプライターらしい見た目を実現しています。
④ JavaScript
class Typewriter {
constructor(element, text, speed = 100) {
this.element = element;
this.text = text;
this.speed = speed;
this.currentIndex = 0;
this.isTyping = false;
}
start() {
if (this.isTyping) return;
this.isTyping = true;
this.currentIndex = 0;
this.element.textContent = '';
this.type();
}
type() {
if (this.currentIndex < this.text.length) {
this.element.textContent += this.text.charAt(this.currentIndex);
this.currentIndex++;
setTimeout(() => this.type(), this.speed);
} else {
this.isTyping = false;
}
}
}
// ページ読み込み時に自動開始
document.addEventListener('DOMContentLoaded', function() {
const typewriter = new Typewriter(
document.getElementById('typewriter-demo'),
'Hello, World! これは基本的なJavaScriptタイプライターです。',
100
);
typewriter.start();
});DOMContentLoadedイベントを使用することで、ページの読み込みが完了したタイミングで自動的にタイプライター効果が開始されます。
実装のポイント
1. クラスベースの設計
ES6クラスを使用することで、コードの可読性と保守性が向上します。
2. 自動開始の仕組み
document.addEventListener('DOMContentLoaded', function() {
// タイプライターの初期化と開始
});この部分により、ページ読み込み完了時に自動でタイプライターが開始されます。
3. 速度のカスタマイズ
// 遅い速度（200ms）
const slowTypewriter = new Typewriter(element, text, 200);
// 速い速度（50ms）
const fastTypewriter = new Typewriter(element, text, 50);カスタマイズ例
テキストの変更
const typewriter = new Typewriter(
document.getElementById('typewriter-demo'),
'カスタムテキストをここに入力してください',
100
);複数のタイプライター
document.addEventListener('DOMContentLoaded', function() {
// 1つ目のタイプライター
const typewriter1 = new Typewriter(
document.getElementById('typewriter-1'),
'1つ目のテキスト',
100
);
// 2つ目のタイプライター
const typewriter2 = new Typewriter(
document.getElementById('typewriter-2'),
'2つ目のテキスト',
150
);
typewriter1.start();
typewriter2.start();
});よくある質問
まとめ
今回ご紹介した基本的なJavaScriptタイプライターは、以下の特徴があります：
- シンプルな実装：ブラウザ表示されたら自動開始
- カスタマイズ可能：速度やテキストを簡単に変更
- 軽量：必要最小限のコードで実装
ケケンタWebサイトのトップページやランディングページで使用することで、ユーザーの注目を集める効果的なアニメーションとして活用できます。
実装時の注意点として、アクセシビリティを考慮してprefers-reduced-motionメディアクエリでの制御も検討してみてください。アニメーションが苦手なユーザーへの配慮になります。
この記事が皆様のWeb制作のお役に立てれば幸いです！
ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしていただけるとうれしいです！
コメント