Contact

// Select the h1 element inside the .words class var wordElement = document.querySelector('.words h1'); var sentence = wordElement.textContent.split(' '); // Split up words and letters var newSentence = ''; for (var i = 0; i < sentence.length; ++i) { var wordArray = sentence[i].split(''); var letters = ''; for (var x = 0; x < wordArray.length; ++x) { letters += '' + wordArray[x] + ''; } newSentence += '' + letters + ' '; } wordElement.innerHTML = newSentence; // Trigger hover effects on each word document.addEventListener('mouseenter', function(event) { if (event.target.matches('.word')) { animateWord(event.target); } }, true); function animateWord(obj) { var letters = obj.querySelectorAll('.letter'); letters.forEach(function(letter, i) { setTimeout(function() { animateLetter(letter); }, 100 * i); // Small delay for each letter }); } function animateLetter(letter) { var alpha = ['!', '#', '$', '0', '1', '2', '3', '4', '5', '6', 'A', 'G', 'T', 'H', 'Y', 'Z', 'X', 'W', 'O', 'K', 'Q', 'S']; letter.classList.add('changing'); // Change color of letter var original = letter.getAttribute('data-letter'); // Get original letter for use later // Loop through random letters var i = 0; var letterInterval = setInterval(function() { // Get random letter var randomLetter = alpha[Math.floor(Math.random() * alpha.length)]; letter.textContent = randomLetter; if (i === 5) { // If letter has changed 5 times then stop clearInterval(letterInterval); letter.textContent = original; // Set back to original letter letter.classList.remove('changing'); // Reset color } ++i; }, 40); }