68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
class Typewriter {
|
|
constructor(el, options) {
|
|
this.el = el;
|
|
this.words = [...this.el.dataset.typewriter.split(",")];
|
|
|
|
this.speed = options?.speed || 100;
|
|
this.delay = options?.delay || 1000;
|
|
this.repeat = options?.repeat || false;
|
|
|
|
this.initTyping();
|
|
}
|
|
|
|
wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
|
toggleTyping = () => this.el.classList.toggle("typing");
|
|
|
|
async typewrite(word) {
|
|
await this.wait(this.delay);
|
|
this.toggleTyping();
|
|
|
|
for (const letter of word.split("")) {
|
|
this.el.textContent += letter;
|
|
await this.wait(this.speed);
|
|
}
|
|
|
|
this.toggleTyping();
|
|
await this.wait(this.delay);
|
|
|
|
this.toggleTyping();
|
|
while (this.el.textContent.length !== 0) {
|
|
this.el.textContent = this.el.textContent.slice(0, -1);
|
|
await this.wait(this.speed);
|
|
}
|
|
|
|
this.toggleTyping();
|
|
}
|
|
|
|
async initTyping() {
|
|
for (const word of this.words) {
|
|
await this.typewrite(word);
|
|
}
|
|
|
|
if (this.repeat) {
|
|
await this.initTyping();
|
|
} else {
|
|
this.el.style.animation = "none";
|
|
}
|
|
|
|
// can't use forEach with await
|
|
// this.words.forEach((word) => {
|
|
// await this.typewrite(word);
|
|
// });
|
|
}
|
|
}
|
|
|
|
// const el1 = new Typewriter(document.querySelector("[data-typewriter]"), {
|
|
// speed: 10,
|
|
// delay: 10,
|
|
// repeat: true,
|
|
// });
|
|
// console.log(el1);
|
|
|
|
document.querySelectorAll("[data-typewriter]").forEach((el) => {
|
|
new Typewriter(el, {
|
|
repeat: true,
|
|
});
|
|
});
|