Velocity-IIITDWD · r4tnx · Oct 20, 2022 · Oct 20, 2022
diff --git a/r4tnx/hero.jpg b/r4tnx/hero.jpg
diff --git a/r4tnx/index.html b/r4tnx/index.html
@@ -0,0 +1,46 @@
+<!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" />
+    <title>Slide Animation</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <section class="landing">
+        <nav>
+          <h1 id="logo">R4TNX</h1>
+          <ul class="nav-links">
+            <li>Home</li>
+            <li>Contact</li>
+            <li>About</li>
+          </ul>
+        </nav>
+        <h2 class="big-text">IT IS WHAT IT IS</h2>
+      </section>
+    </main>
+    <div class="intro">
+      <div class="intro-text">
+        <h1 class="hide">
+          <span class="text">Knowledge</span>
+        </h1>
+        <h1 class="hide">
+          <span class="text">is a</span>
+        </h1>
+        <h1 class="hide">
+          <span class="text">Curse.</span>
+        </h1>
+      </div>
+    </div>
+    <div class="slider"></div>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"
+      integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/r4tnx/script.js b/r4tnx/script.js
@@ -0,0 +1,11 @@
+const tl = gsap.timeline({ defaults: { ease: "power1.out" } })
+
+tl.to(".text", { y: "0%", duration: 1, stagger: 0.25 })
+
+tl.to(".slider", { y: "-100%", duration: 1.5, delay: 0.5 })
+
+tl.to(".intro", { y: "-100%", duratiion: 1.5 }, "-=1")
+
+tl.fromTo("nav", { opacity: 0 }, { opacity: 1, duration: 1 })
+
+tl.fromTo(".big-text", { opacity: 0 }, { opacity: 1, duration: 1 })
diff --git a/r4tnx/style.css b/r4tnx/style.css
@@ -0,0 +1,85 @@
+@import url("https://fonts.googleapis.com/css2?family=Ranchers&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+main {
+  font-family: "Heebo", sans-serif;
+}
+
+.landing {
+  min-height: 100vh;
+  background: url("hero.jpg");
+  background-size: cover;
+  padding: 0rem 5rem;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 10vh;
+}
+.nav-links {
+  display: flex;
+  list-style: none;
+}
+
+.nav-links li {
+  padding-left: 5rem;
+  font-size: 1.2rem;
+}
+
+#logo {
+  font-family: "Ranchers";
+  font-weight: lighter;
+  font-size: 2rem;
+}
+
+.big-text {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  font-size: 5rem;
+  font-family: "Ranchers";
+  color: rgb(0, 0, 0);
+}
+
+.intro {
+  background-color: black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slider {
+  background-color: rgb(160, 160, 160);
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  transform: translateY(100%);
+}
+
+.intro-text {
+  color: white;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  font-size: 3rem;
+}
+
+.hide {
+  background: black;
+  overflow: hidden;
+}
+.hide span {
+  transform: translateY(100%);
+  display: inline-block;
+}