feat(web): add poc

xmaxcooking · Dec 18, 2023 · 6649473 · 6649473
1 parent bd14076
commit 6649473
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link defer rel="stylesheet" href="style.css">
+    <script defer src="script.js"></script>
+</head>
+<body>
+
+<section class="hidden left">
+    <h1>Hi Mom!</h1>
+    <p>The quick brown fox jumps over the lazy dog.</p>
+</section>
+
+<hr class="solid">
+
+<section class="hidden right">
+    <h1>Hi Dad!</h1>
+    <p>It's a beautiful day in the neighborhood.</p>
+</section> 
+
+<hr class="solid">
+
+<section class="hidden left"> 
+    <p>It's really good!</p>
+    <div class="logos">
+        <div class="logo hidden left">
+            <img src="https://placehold.it/100x100" alt="">
+        </div>
+        <div class="logo hidden left">
+            <img src="https://placehold.it/100x100" alt="">
+        </div>
+        <div class="logo hidden left">
+            <img src="https://placehold.it/100x100" alt="">
+        </div>
+    </div>
+</section>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('show');
+        }
+        else {
+            entry.target.classList.remove('show');
+        }
+    });
+});
+const hiddenElements = document.querySelectorAll('.hidden');
+hiddenElements.forEach(el =>  observer.observe(el));
diff --git a/style.css b/style.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
+
+        body {
+            background-color: #131316;
+            font-family: 'Poppins', sans-serif;
+            color: #ffffff;
+            padding: 0;
+            margin: 0;
+            overflow-x: hidden;
+        }
+
+        section {
+            display: grid;
+            place-items: center;
+            align-content: center;
+            min-height: 100dvh; 
+        }
+
+        .hidden {
+            opacity: 0; 
+            filter: blur(1rem);
+            transition: all 1s;
+        }
+
+        .left {
+            transform: translateX(-100%); 
+        }
+
+        .right {
+            transform: translateX(100%); 
+        }
+
+        .show {
+            opacity: 1;
+            filter: blur(0);
+            transform: translateX(0);
+        }
+
+        .logos {
+            display: flex;
+        }
+
+        .logo:nth-child(1) {
+            transition-delay: 200ms;
+            margin-right: 20px;
+        }
+
+        .logo:nth-child(2) {
+            transition-delay: 400ms;
+            margin-right: 20px;
+        }
+
+        .logo:nth-child(3) {
+            transition-delay: 600ms;
+        }