Add files via upload

2023-03-15 17:18:58 +03:00 · 2023-03-15 17:18:58 +03:00 · 048f04d7ad
commit 048f04d7ad
parent 792118d34e
4 changed files with 142 additions and 0 deletions
--- a/100_projects/22-page-transition-with-gsap-animation/index.html
+++ b/100_projects/22-page-transition-with-gsap-animation/index.html
@ -0,0 +1,40 @@
+<!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>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+  <body>
+    <div class="warpper">
+      <div class="nav">
+        <div class="left">
+          <h3>New</h3>
+          <h2>Offers</h2>
+        </div>
+        <div class="right">
+          <h3>Sam</h3>
+          <p>Alread A Member</p>
+        </div>
+      </div>
+
+      <div class="intro">
+        <div class="hero">
+          <div class="left-hero">
+            <h1>Product Designer,<br>
+              maker, brand builder <br>
+              - and type lover.</h1>
+          </div>
+          <div class="right-hero">
+            <img src="woman.jpg" alt="hero">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="slider"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
--- a/100_projects/22-page-transition-with-gsap-animation/main.js
+++ b/100_projects/22-page-transition-with-gsap-animation/main.js
@ -0,0 +1,5 @@
+const tl = gsap.timeline({defaults: {ease: 'power2.out'}});
+
+tl.to('.slider', {y: "-100%", duration:1.2});
+tl.to('.intro .hero', {y: "0%", duration:1.2}, "-=1");
+tl.fromTo('.nav', {opacity:0}, {opacity:1, duration: 1});
--- a/100_projects/22-page-transition-with-gsap-animation/style.css
+++ b/100_projects/22-page-transition-with-gsap-animation/style.css
@ -0,0 +1,97 @@
+*{
+  margin:0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  background-color: #000;
+  color: #fff;
+}
+img{
+  width: 100%;
+  height: 100%;
+}
+.warpper{
+  width: 100%;
+  height: 100%;
+}
+.nav{
+  padding: 20px 40px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+.nav .left{
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;  
+}
+.nav .left h3{
+  font-weight: 400;
+  padding-right: 10px;
+}
+.nav .left h3{
+  font-weight:700;
+  font-style: italic;
+}
+.nav .right h3{
+  font-weight: 400;
+  padding-right: 10px;
+  font-size: 24px;
+}
+.nav .right p{
+  font-size: 14px;
+}
+.intro{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.intro .hero{
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  padding: 130px 40px;
+  transform: translateY(100%);
+}
+.intro .hero .left-hero{
+  width: 55%;
+}
+.intro .hero .left-hero h1{
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 70px;
+}
+@media(max-width:767px){
+  .intro .hero{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .intro .hero .left-hero h1{
+    font-size: 25px;
+  }
+  .intro .hero .right-hero,
+  .intro .hero .left-hero{
+    text-align: center;
+    width: 100% !important
+  }
+}
+.intro .hero .right-hero{
+  width: 40%;
+}
+.slider{
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #18181a;
+  width: 100%;
+  height: 100%;
+  transform: translateY(100%);
+}
--- a/100_projects/22-page-transition-with-gsap-animation/woman.jpg
+++ b/100_projects/22-page-transition-with-gsap-animation/woman.jpg