feat: add text rotate animation

Ritika-Agrawal811 · Feb 15, 2024 · 89f1677 · 89f1677
1 parent da38416
commit 89f1677
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/Text Animations/Text_Rotate_Animation/index.html b/Text Animations/Text_Rotate_Animation/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Text Rotate Animation</title>
+</head>
+<body>
+    <div class="text-rotate-container">
+        <h1 class="rotate-text flip">Hello</h1>
+    </div>
+
+    <script src='script.js'></script>
+</body>
+</html>
diff --git a/Text Animations/Text_Rotate_Animation/script.js b/Text Animations/Text_Rotate_Animation/script.js
@@ -0,0 +1,17 @@
+const rotateText = document.querySelector('.rotate-text')
+const headings = ['Hey', 'Hola', 'Yo', 'Hello'];
+let index = 0;
+
+
+function changeRotateText() {
+    rotateText.classList.remove('flip')
+
+    setTimeout(() => {
+        rotateText.innerHTML = headings[index];
+        rotateText.classList.add('flip')
+    }, 850)
+
+    index = (index + 1) % headings.length;
+}
+
+setInterval(changeRotateText, 1700)
diff --git a/Text Animations/Text_Rotate_Animation/style.css b/Text Animations/Text_Rotate_Animation/style.css
@@ -0,0 +1,61 @@
+*,
+::before, 
+::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;  
+    background-color: #BED1CF;
+}
+
+.text-rotate-container {
+    position: relative;
+    width: 200px;
+    height: 50px;
+    perspective: 100px;
+}
+
+h1 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: 3rem;
+    font-family: sans-serif;
+    text-align: center;
+    background-color: inherit;
+    backface-visibility: hidden;    
+}
+
+h1.flip {
+    animation: flip 850ms ease-in 1;
+}
+
+
+@keyframes flip {
+    0% {
+        opacity: 0;
+        transform: rotateX(120deg);
+    }
+
+    40% {
+        opacity: 1;
+    }
+
+    60% {
+        transform: rotateX(0);  
+    }
+
+    80% {
+        transform: rotateX(15deg); 
+    }
+
+    100% {    
+        transform: rotateX(0);   
+    }
+}