Merge pull request #478 from ArjunCodess/add-scroll-text-video-animat…

…ions Add Scroll-Unblur-Text-Effect and Scroll-Video-Animation components. …
you-dont-need · Oct 4, 2024 · 444cf88 · 444cf88
2 parents 82265b3 + 351dd39
commit 444cf88
Show file tree

Hide file tree

Showing 4 changed files with 458 additions and 0 deletions.
diff --git a/Scroll-Unblur-Text-Effect/index.html b/Scroll-Unblur-Text-Effect/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scroll Unblur Text Effect</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="scroll-container">
+        <section class="text-section">
+            <h1>
+                <span class="word" style="--i: 0;">This</span>
+                <span class="word" style="--i: 1;">is</span>
+                <span class="word" style="--i: 2;">so</span>
+                <span class="word" style="--i: 3;">good</span>
+                <span class="word" style="--i: 4;">✨</span>
+            </h1>
+        </section>
+    </div>
+
+    <hr />
+
+    <div class="container">
+        <h2>your content goes here :)</h2>
+        <p>credits: <a href="https://arjuncodess.vercel.app/">@arjuncodess</a></p>
+    </div>
+</body>
+
+</html>
diff --git a/Scroll-Unblur-Text-Effect/style.css b/Scroll-Unblur-Text-Effect/style.css
@@ -0,0 +1,56 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+}
+
+.scroll-container {
+    height: 200vh;
+    scroll-timeline: --section block;
+}
+
+.container {
+    height: 50vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.text-section {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: sticky;
+    top: 0;
+}
+
+h1 {
+    font-size: 4rem;
+    text-align: center;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+.word {
+    --pxPerWord: 20vh;
+    --start: calc(var(--i) * var(--pxPerWord));
+    --end: calc((var(--i) + 1) * var(--pxPerWord));
+    display: inline-block;
+    filter: blur(20px);
+    opacity: 0;
+    animation: fx linear both;
+    animation-timeline: scroll(root);
+    animation-range: var(--start) var(--end);
+}
+
+@keyframes fx {
+    to {
+        filter: blur(0);
+        opacity: 1;
+    }
+}
diff --git a/Scroll-Video-Animation/index.html b/Scroll-Video-Animation/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scroll Drive Video Masking</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <header>
+        <h1 class="fluid">Scroll Drive Video Masking</h1>
+        <h2 class="fluid">credits: <a href="https://arjuncodess.vercel.app/">@arjuncodess</a></h2>
+    </header>
+    <main>
+        <section>
+            <div class="section__content">
+                <svg viewBox="0 0 1025 437" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M779.402 65.498c-194-9-503 52-503 83s387-53 387-10-523 31-523 101c0 53 784-128 784-54 0 59-937.4 72.7-937.4 141.3 0 45.7 1011.4-124.3 1011.4-75.3s-1029 83-1029 140 1158.998-162.7 1077.998-83c-65.998 65-1099.998 90-1090.998 139 8.7 47.5 1090.998-121 1090.998-53s-1067.998 21-1067.998 110c0 57 919-27 1073.998-33"
+                        stroke="#000" stroke-width="80" stroke-linecap="round" stroke-linejoin="round" pathLength="1" />
+                </svg>
+                <div class="section__text">
+                    <p class="fluid">
+                        <span>gotcha! You just got rickrolled!</span>
+                        <span>now, back to scrolling!</span>
+                        <span>hope you enjoyed the surprise!</span>
+                    </p>
+                </div>
+                <svg viewBox="0 0 1025 370" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M-24 22.001c0 29 1075-54 1075-15s-1073 37-1073 76 1068-53 1068-14-1071 39-1071 77 1069-33 1069 5-890 23-890 63 718.5-9.9 716 30c-2 32-65 16-274 54"
+                        stroke="#000" stroke-width="80" stroke-linecap="round" stroke-linejoin="round" pathLength="1" />
+                </svg>
+                <div class="section__buffer"></div>
+            </div>
+            <div class="section__stick">
+                <video autoplay muted loop>
+                    <source src="https://assets.codepen.io/605876/astley-short.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <h2 class="fluid">lol. you got rickrolled.</h2>
+    </footer>
+</body>
+
+</html>