old-website/static/js/title.js

34 lines
870 B
JavaScript
Raw Normal View History

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);
});