I need to make animation like on this website in menu:
https://displaay.net/typefaces/retail/
Is there an existing solutions? I’ve tried to make it with copilot, but didn’t succeed.
<script>
document.addEventListener('DOMContentLoaded', function() {
var titles = [
'Text1',
'Text12',
'Text3'
];
var currentIndex = 0;
function changeTitle() {
// Select the _H1 element
var element = document.querySelector('._H1');
if (element) {
// Split the current title into characters and wrap each character in a span
var chars = element.textContent.split('');
element.innerHTML = chars.map(char => `<span>${char}</span>`).join('');
// Function to change a character to a random one
function changeChar(index) {
if (index < chars.length) {
var randomChar = String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33);
chars[index] = `<span class="animate">${randomChar}</span>`;
element.innerHTML = chars.join('');
setTimeout(() => changeChar(index + 1), 20); // Adjust the delay as needed
} else {
// After all characters have changed, change the text to the next title
setTimeout(() => {
element.innerHTML = titles[currentIndex];
currentIndex = (currentIndex + 1) % titles.length; // Loop through the titles
}, 2000); // Wait for 2 seconds before changing the text
}
}
// Start changing the characters
changeChar(0);
}
}
// Change the title immediately and then every 5 seconds
changeTitle();
setInterval(changeTitle, 5000); // 5000 milliseconds = 5 seconds
});
