Merge pull request #28 from satyam-seth-learnings/scroll-watcher

satyam-seth · web-flow · commit bd6a46ba82b8 · 2023-12-28T00:04:11.000+05:30
Add scroll watcher demo
diff --git a/Scroll Watcher/README.md b/Scroll Watcher/README.md
@@ -0,0 +1,5 @@
+- [Reference Video](https://youtu.be/UmzFk68Bwdk?si=NsQhg4apKcF0rYhs)
+
+- [animation-timeline MDN Link](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline)
+
+- [animation-timeline Polyfill Link](https://github.com/flackr/scroll-timeline)
diff --git a/Scroll Watcher/demo.html b/Scroll Watcher/demo.html
@@ -0,0 +1,32 @@
+<!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>Scroll Watcher</title>
+    <script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
+</head>
+
+<body>
+    <div class="progress"></div>
+    <section>
+        <p>Section 1</p>
+    </section>
+    <section>
+        <p>Section 2</p>
+    </section>
+    <section>
+        <p>Section 3</p>
+    </section>
+    <section>
+        <p>Section 4</p>
+    </section>
+    <section>
+        <p>Section 5</p>
+    </section>
+</body>
+
+</html>
diff --git a/Scroll Watcher/style.css b/Scroll Watcher/style.css
@@ -0,0 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  scroll-behavior: smooth;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+section {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+}
+
+section:nth-child(odd) {
+  background-color: blueviolet;
+}
+
+section:nth-child(even) {
+  background-color: coral;
+}
+
+p {
+  color: #ddd;
+  font-size: 3em;
+  font-weight: bolder;
+}
+
+.progress {
+  width: 100%;
+  height: 10px;
+  position: fixed;
+  top: 0;
+  z-index: 100;
+  background-color: lime;
+  scale: 0 1;
+  animation: scroll-watcher linear;
+  animation-timeline: scroll();
+  transform-origin: left;
+}
+
+@keyframes scroll-watcher {
+  to {
+    scale: 1 1;
+  }
+}
diff --git a/index.html b/index.html
@@ -55,6 +55,7 @@
     <a href="./Image Sprites/demo.html">Image Sprites</a>
     <a href="./BEM(Block, Element Modifier)/demo.html">BEM(Block, Element Modifier)</a>
     <a href="./3D animation/demo.html">3D Animation</a>
+    <a href="./Scroll Watcher/demo.html">Scroll Watcher</a>
 </body>
 
 </html>
