2023-07-21 12:25:33 +00:00
|
|
|
const title = document.querySelector('h1');
|
|
|
|
const titleHeight = title.offsetHeight;
|
|
|
|
let titleText = title.textContent;
|
|
|
|
let letterOffset = 0;
|
|
|
|
let timeOffset = 10;
|
|
|
|
|
|
|
|
title.textContent = '';
|
|
|
|
title.style.height = titleHeight + 'px';
|
|
|
|
title.style.opacity = "1";
|
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
titleText.split('').forEach((letter) => {
|
|
|
|
let span = document.createElement('span');
|
2023-07-21 12:25:33 +00:00
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
span.textContent = letter;
|
|
|
|
span.style.left = letterOffset + 'px';
|
|
|
|
span.style.transform = 'translateY(100%)';
|
2023-07-21 12:25:33 +00:00
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
title.append(span);
|
2023-07-21 12:25:33 +00:00
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
span.style.transform = '';
|
|
|
|
}, timeOffset);
|
2023-07-21 12:25:33 +00:00
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
letterOffset += span.offsetWidth + 2.5;
|
|
|
|
timeOffset += 100;
|
|
|
|
});
|
2023-07-21 12:25:33 +00:00
|
|
|
|
2023-09-08 13:08:29 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
title.textContent = '';
|
|
|
|
title.textContent = titleText;
|
|
|
|
}, timeOffset + 500);
|
|
|
|
});
|