x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-15 17:18:58 +03:00 committed by GitHub
parent 792118d34e
commit 048f04d7ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
100_projects/22-page-transition-with-gsap-animation/index.html Normal file
View File

@ -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>

5
100_projects/22-page-transition-with-gsap-animation/main.js Normal file
View File

@ -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});

97
100_projects/22-page-transition-with-gsap-animation/style.css Normal file
View File

@ -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%);
}

BIN
100_projects/22-page-transition-with-gsap-animation/woman.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB