github · gogoraz · May 19, 2023 · May 19, 2023 · May 19, 2023 · May 19, 2023
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Random-appearing-letters
+
+Randomly created positions of text and their addition afterwards.
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Animated Text</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="text-container">
+    <span id="hidden-text">30% off now from aw22 with code30 at checkout</span>
+  </div>
+
+  <button id="start-button">Start Animation</button>
+  <h1>Test text here!</h1>
+  <p>1</p>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,60 @@
+const textContainer = document.getElementById('text-container');
+const hiddenTextElement = document.getElementById('hidden-text');
+const startButton = document.getElementById('start-button');
+let animationStarted = false;
+
+function getRandomPosition(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function revealText() {
+  const hiddenText = hiddenTextElement.textContent;
+  const textLength = hiddenText.length;
+  const textDiv = document.createElement('div');
+  textDiv.className = 'generated-text';
+
+  // Create span elements for each letter and set initial styles
+  for (let i = 0; i < textLength; i++) {
+    const span = document.createElement('span');
+    span.textContent = hiddenText[i];
+    span.style.top = getRandomPosition(0, textContainer.clientHeight - 20) + 'px';
+    span.style.left = getRandomPosition(0, textContainer.clientWidth - 20) + 'px';
+    textDiv.appendChild(span);
+  }
+
+  textContainer.appendChild(textDiv);
+
+  // Animate the appearance of the span elements
+  const spanElements = textDiv.querySelectorAll('span');
+  spanElements.forEach((span) => {
+    setTimeout(() => {
+      span.style.opacity = 1;
+    }, Math.random() * 1000);
+  });
+
+  // Animate the movement of the span elements to their correct positions
+  setTimeout(() => {
+    spanElements.forEach((span) => {
+      const index = Array.prototype.indexOf.call(span.parentNode.children, span);
+      span.style.transition = 'all 1s';
+      span.style.top = '0';
+      span.style.left = (index * 20) + 'px';
+    });
+  }, 1500);
+
+  animationStarted = false;
+}
+
+startButton.addEventListener('click', function() {
+  if (!animationStarted) {
+    animationStarted = true;
+
+    // Remove any previously generated text
+    const previousTextDiv = textContainer.querySelector('.generated-text');
+    if (previousTextDiv) {
+      textContainer.removeChild(previousTextDiv);
+    }
+
+    revealText();
+  }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,22 @@
+#text-container {
+    width: 900px;
+    height: 160px;
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+  }
+
+  #text-container span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.5s;
+    font-size: 28px;
+    color: #000000;
+    text-align: center;
+  }
+
+  #hidden-text {
+    display: none;
+  }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Random-appearing-letters

		Randomly created positions of text and their addition afterwards.