initial commit

raiyanu · Apr 7, 2024 · 3b30ac5 · 3b30ac5
commit 3b30ac5
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 0 deletions.
diff --git a/assets/bg-1.jpg b/assets/bg-1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FOODIE | Home</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header>
+    <div class="logo">
+      <h2>FOODIE</h2>
+      <h4>MENU</h4>
+    </div>
+    <nav>
+      <a href="#" class="active_tab">home</a>
+      <a href="#">Help</a>
+      <a href="#">About</a>
+      <a href="#">FAQs</a>
+    </nav>
+  </header>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
+  <script>
+    let items = document.getElementsByClassName("ani")[0];
+    console.log("hello");
+
+    gsap.registerPlugin(ScrollTrigger);
+
+    let viewport = document.querySelector(".viewport"),
+      box = document.querySelector(".ani");
+
+    ScrollTrigger.create({
+      start: 0,
+      end: "max",
+      onUpdate: updateValues,
+    });
+
+    function updateValues() {
+      if (ScrollTrigger.isInViewport(box)) {
+        setTimeout(() => {
+          ScrollTrigger.isInViewport(box)
+            ? (items.style.scale = "1")
+            : (items.style.scale = ".5");
+        }, 500);
+      } else {
+        ScrollTrigger.isInViewport(box)
+          ? (items.style.scale = "1")
+          : (items.style.scale = ".5");
+      }
+    }
+    updateValues();
+  </script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,78 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-decoration: none;
+}
+:root {
+  --primary-clr: #212429;
+  --seconday-clr: #7dc257;
+  --primary-accent: #383b40;
+  --seconday-accent: #38f160;
+  --numb-white: #f5f5f5;
+}
+body {
+  /* background-color: var(--primary-clr); */
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url("./assets/bg-1.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+
+  color: var(--numb-white);
+}
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3rem 1.5rem;
+  flex-wrap: wrap;
+  gap: 2rem 4rem;
+}
+.logo {
+  font-size: 3rem;
+  font-family: "Courier New", Courier, monospace;
+}
+header nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  gap: 1rem;
+  padding-right: 1rem;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: bolder;
+
+  width: clamp(100px, 400px, 100%);
+}
+header nav a {
+  color: var(--numb-white);
+}
+
+@media (max-width: 655px) {
+  header {
+    flex-direction: column;
+  }
+  header nav ul {
+    padding-right: 0;
+  }
+}
+
+.logo h2 {
+  color: var(--numb-white);
+  font-size: 4.5rem;
+  line-height: 3rem;
+}
+.logo h4 {
+  color: var(--seconday-clr);
+  font-size: 3rem;
+  line-height: 2.2rem;
+  /* letter-spacing: 29px; */
+}
+.active_tab {
+  background-color: var(--seconday-accent);
+  border-radius: 5px;
+  padding: 5px 15px;
+  color: var(--numb-white);
+}
diff --git a/temp.js b/temp.js
@@ -0,0 +1,20 @@
+let items = document.getElementsByClassName("ani")[0];
+console.log("hello");
+ScrollTrigger.create({
+  trigger: "#ani",
+  start: "top-300px top",
+  endTrigger: "#ani2",
+  end: "bottom bottom",
+  onToggle: (self) =>
+    self.isActive ? (items.style.scale = "1") : (items.style.scale = ".9"),
+  onUpdate: (self) => {
+    console.log(
+      "progress:",
+      self.progress.toFixed(3),
+      "direction:",
+      self.direction,
+      "velocity",
+      self.getVelocity()
+    );
+  },
+});