From 1661e6b8bc0be78eb4c48c76cf888a51ba1ed80f Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Fri, 6 Oct 2023 21:06:56 +0800 Subject: typing animation for index page --- src/js/hacktype.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/js/hacktype.js (limited to 'src') diff --git a/src/js/hacktype.js b/src/js/hacktype.js new file mode 100644 index 00000000..932e4c78 --- /dev/null +++ b/src/js/hacktype.js @@ -0,0 +1,45 @@ +const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +const numbers = "1234567890"; +const special = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"; + +let interval = null; + +document.addEventListener("DOMContentLoaded", () => { + const elements = document.querySelectorAll(".hacktype"); + let intervals = []; + + function hackType() { + elements.forEach((element) => { + let iteration = 0; + + intervals.push( + setInterval(() => { + element.innerText = element.innerText + .split("") + .map((letter, index) => { + if (index < iteration) { + return element.dataset.value[index]; + } + + return letters[Math.floor(Math.random() * 26)]; + }) + .join(""); + + if (iteration >= element.dataset.value.length) { + clearInterval(intervals.shift()); + } + + iteration += 1 / 3; + }, 30) + ); + }); + } + + hackType(); // Call hackType initially + + setInterval(() => { + intervals.forEach((interval) => clearInterval(interval)); // Clear existing intervals + intervals = []; // Reset intervals array + hackType(); // Call hackType again + }, 15000); // Repeat every 5 seconds +}); -- cgit v1.2.3