テキストをタイプライター風に1文字ずつ表示
テキストをタイプライター風に1文字ずつ表示するには、次のようは方法で実装することができます。
JavaScript (ES5)
(function() {
window.addEventListener('DOMContentLoaded', function() {
var elem = document.querySelector('.sample');
var chars = elem.textContent.split('');
elem.textContent = '';
var sid = setInterval(function() {
var char = chars.shift();
elem.insertAdjacentText('beforeend', char);
if (!chars.length) clearInterval(sid);
}, 100);
});
})();JavaScript (ES6以降)
(() => {
window.addEventListener('DOMContentLoaded', () => {
const elem = document.querySelector('.sample');
let chars = elem.textContent.split('');
elem.textContent = '';
let sid = setInterval(() => {
const char = chars.shift();
elem.insertAdjacentText('beforeend', char);
if (!chars.length) clearInterval(sid);
}, 100);
});
})();ポイント
4行目のString.splitメソッドで、引数に空を指定することで、1文字ずつに分割し配列にします。
8行目のsetInterval関数で、一定時間おきに文字を表示する処理をします。
9行目のString.shiftメソッドで、最初の1文字を抜き出します。
元の配列は抜き出した文字を除いた配列になります。
11行目のElement.insertAdjacentTextメソッドで、抜き出した1文字を要素に追加挿入します。
デモ
Lorem ipsum dolor sit amet, consectetur adipisicing elit.