Added text-changing animations (#103)

Co-authored-by: Harshit Shukla <[email protected]>
pulkit-30 · Oct 29, 2022 · dbc12d3 · dbc12d3
1 parent 6748916
commit dbc12d3
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 0 deletions.
diff --git a/Text-chanaging Animation/READme.md b/Text-chanaging Animation/READme.md
@@ -0,0 +1,2 @@
+# Text Animation Effect
+<img src="./image.mp4" height="412px"/>
diff --git a/Text-chanaging Animation/image.mp4 b/Text-chanaging Animation/image.mp4
diff --git a/Text-chanaging Animation/index.html b/Text-chanaging Animation/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Text-animation</title>
+</head>
+<body>
+    <div id="container">
+        <span id="text1"></span>
+        <span id="text2"></span>
+    </div>
+
+    <svg id="filters">
+        <defs>
+            <filter id="threshold">
+                <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -140" />
+            </filter>
+        </defs>
+    </svg>
+    <div class="footer">
+
+    <footer>
+        <div>Credit:- <a href="https://github.com/hs-07">Harshit Shukla</a></div>
+        <div>Date:- 18-10-2022</div>
+      </footer>
+    </div>
+
+<script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Text-chanaging Animation/script.js b/Text-chanaging Animation/script.js
@@ -0,0 +1,86 @@
+const elts = {
+    text1: document.getElementById("text1"),
+    text2: document.getElementById("text2")
+};
+
+const texts = [
+    "If",
+    "You",
+    "Like",
+    "It",
+    "Please",
+    "Give",
+    "a Love",
+    "❤️",
+    "by @Harshit"
+];
+
+const morphTime = 1;
+const cooldownTime = 0.25;
+
+let textIndex = texts.length - 1;
+let time = new Date();
+let morph = 0;
+let cooldown = cooldownTime;
+
+elts.text1.textContent = texts[textIndex % texts.length];
+elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+
+function doMorph() {
+    morph -= cooldown;
+    cooldown = 0;
+
+    let fraction = morph / morphTime;
+
+    if (fraction > 1) {
+        cooldown = cooldownTime;
+        fraction = 1;
+    }
+
+    setMorph(fraction);
+}
+
+function setMorph(fraction) {
+    elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+    elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+
+    fraction = 1 - fraction;
+    elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+    elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+
+    elts.text1.textContent = texts[textIndex % texts.length];
+    elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+}
+
+function doCooldown() {
+    morph = 0;
+
+    elts.text2.style.filter = "";
+    elts.text2.style.opacity = "100%";
+
+    elts.text1.style.filter = "";
+    elts.text1.style.opacity = "0%";
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    let newTime = new Date();
+    let shouldIncrementIndex = cooldown > 0;
+    let dt = (newTime - time) / 1000;
+    time = newTime;
+
+    cooldown -= dt;
+
+    if (cooldown <= 0) {
+        if (shouldIncrementIndex) {
+            textIndex++;
+        }
+
+        doMorph();
+    } else {
+        doCooldown();
+    }
+}
+
+animate();
diff --git a/Text-chanaging Animation/style.css b/Text-chanaging Animation/style.css
@@ -0,0 +1,37 @@
+@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");
+
+body {
+    margin: 0px;
+}
+
+#container {
+    position: absolute;
+    margin: auto;
+    width: 100vw;
+    height: 80pt;
+    top: 0;
+    bottom: 0;
+
+    filter: url(#threshold) blur(0.6px);
+}
+
+#text1,
+#text2 {
+    position: absolute;
+    width: 100%;
+    display: inline-block;
+
+    font-family: "Raleway", sans-serif;
+    font-size: 80pt;
+
+    text-align: center;
+
+    user-select: none;
+}
+footer {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    font-size: 15px;
+  }
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Text Animation Effect
		<img src="./image.mp4" height="412px"/>