Skip to main content

Create A Pizza Website Using HTML And CSS and GSAP| Page transition animation by gsap. Artspider


https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js



SOURCE CODE




HTML SOURCE_CODE:-
index .html

👇

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>home page transion</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
</head>
<body >
   
    <div class="cover">
        <img src="img/logo.png" alt="" class="logo">
       <div class="loader"></div>
    <div class="up_div">
       
    </div>
   
    <div class="lo_div"></div>
    <div class="maindiv">
        <div class="header" id="hd">
           
            <div class="loc">
            <ul>
              <li><a href="index.html"  class="butt">Home</a></li>
              <li><a href="about.html" class="butt">about</a></li>
              
             
              
            </ul>
          
          </div>
        </div>
        <a href="index.html">
            <img src="img/logo.png" alt="" class="logo2">
        </a>
        <div class="topi">
            <img src="img/28212924.png" alt="" class="tomato tom1">
            <img src="img/28212924.png" alt="" class="tomato tom2">
            <img src="img/clipart1068857.png" alt="" class="mus mu1">
            <img src="img/clipart1068857.png" alt="" class="mus mu2">
            <img src="img/onion-22153.png" alt="" class="onion oni1">
            <img src="img/onion-22153.png" alt="" class="onion oni2">
           
        </div>
        <div class="text">
            <h2> MAD pizza</h2>
            <p>Pizza buffalo wing chicken
             tikka shawarma italian pizza</p><br>
            <button>buy now</button></div>
<div class="bak1"></div>
<div class="bak2"></div>
<div class="bak3">
    <div class="inbak1 in"><img src="img/kisspng-hamburger-sushi-california-style-pizza-sicilian-pi-pizza-5a7934a49e7189.498662081517892772649.png" alt="" class="img2"></div>
    <div class="inbak2 in"><img src="img/kisspng-pizza-buffalo-wing-chicken-tikka-shawarma-italian-pizza-5ab4e8fd3a3848.5478652615218055652385 (1).png" alt="" class="img3"></div>
    <div class="inbak3 in"><img src="img/kisspng-sicilian-pizza-fajita-shawarma-fast-food-pizza-5acf77ee6f16b6.627157011523546094455.png" alt="" class="img4"></div>
</div>
<img src="img/kisspng-pizza-buffalo-wing-chicken-tikka-shawarma-italian-pizza-5ab4e8fd3a3848.5478652615218055652385 (1).png" alt="" class="img1">
    </div>

</div>


</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src='main.js'></script>
</html>

about.html

👇

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>about page</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
</head>
<body >
   
    <div class="cover">
        <img src="img/logo.png" alt="" class="logo">
       <div class="loader"></div>
    <div class="up_div"></div>
   
    <div class="lo_div"></div>
    <div class="maindiv2">
        <div class="header" id="hd2">
           
            <div class="loc">
            <ul>
              <li><a href="index.html"  class="butt">Home</a></li>
              <li><a href="about.html"  class="butt">about</a></li>
              
             
              
            </ul>
          
          </div>
        </div>
        <div class="about">
          <p class="about_text">about</p>
          
                </div>
        <a href="index.html">
            <img src="img/logo.png" alt="" class="logo3">
        </a>
        <div class="topi">
          <img src="img/28212924.png" alt="" class="tomato tom1">
          <img src="img/28212924.png" alt="" class="tomato tom2">
          <img src="img/clipart1068857.png" alt="" class="mus mu1">
          <img src="img/clipart1068857.png" alt="" class="mus mu2">
          <img src="img/onion-22153.png" alt="" class="onion oni1">
          <img src="img/onion-22153.png" alt="" class="onion oni2">
         
      </div>
        <div class="text2 ">
          <h2> MAD pizza</h2>
          <p>Best Pizza in Kolkata, Kolkata District: Find Tripadvisor traveller reviews of Kolkata Pizza places and search by price, ... “Awasome place for pizza lovers!!!”.
            Best Pizza in Kolkata, Kolkata District: Find Tripadvisor traveller reviews of Kolkata Pizza places and search by price, ... “Awasome place for pizza lovers!!!”.
            Best Pizza in Kolkata, Kolkata District: Find Tripadvisor traveller reviews of Kolkata Pizza places and search by price, ... “Awasome place for pizza lovers!!!”.
            Best Pizza in Kolkata, Kolkata District: Find Tripadvisor traveller reviews of Kolkata Pizza places and search by price, ... “Awasome place for pizza lovers!!!”.Best Pizza in Kolkata, Kolkata District: Find Tripadvisor traveller reviews of Kolkata Pizza places and search by price, ... “Awasome place for pizza lovers!!!”.

          </p></div>
          
          <img src="img/res.jfif" alt="" class="img5">
         </div></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src='main.js'></script>
</html>



CSS SOURCE_CODE:-



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header{
    position: absolute;
    top: -20%;
    left: 3%;
 width: 100%;
    padding:10px 100px;
   
    z-index: 40;
    background-color:transparent;
    
   
  
  }
 
 
  .header ul{
    position: relative;
    display: flex;
  }
  .header ul li{
    list-style: none;
  }
  .header ul li a{
  display: inline-block;
  color: rgb(148, 9, 9);
  font-weight: 400;
  margin-left: 40px;
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  transition: .5s;

  }
  .header ul li a:hover{
    
    color: rgb(233, 164, 15);
   
    }
.cover{
  overflow: hidden;
 position: relative;
 height: 100%;
 width: 100%;
}
.maindiv{
background-color:rgb(248, 240, 240);
height:100vh;
width: 100vw;
}

.up_div{
    position: absolute;
    background-color: rgb(240, 236, 231);
    height:50vh;
    top: -500px;
width: 100vw;
z-index: 50;
}
.lo_div{
    position: absolute;
    background-color:rgb(223, 219, 215);
    height:50vh;
    bottom: -500px;
width: 100vw;
z-index: 50;
}

.loader{
position: absolute;
height: 4px ;
width: 0vw;
top: 50%;

border-radius: 25px;
background-color: rgb(255, 0, 0);
z-index: 60;
}

.logo{
    position: absolute;
    height: 180px;
    width: 150px;
    top: -20%;
    left:43%;
    z-index: 10;
    opacity: 0;
    z-index: 60;
}
.logo2{
    position: absolute;
    height: 90px;
    width: 70px;
    top: -20%;
    left:4%;
    opacity: 0;
    z-index: 50;
   
}
.bak1{
    position: absolute;
    width: 0vw;
    height: 100vh;
    background-color: rgb(241, 216, 160);
    
}
.bak2{
    position: absolute;
    width: 0vw;
    height: 100vh;
    background-color: rgb(255, 51, 0);
  right: 0;
}
.bak3{
    position: absolute;
    width: 40vw;
    height: 30vh;
    background-color: rgb(251, 178, 61);
left: 0;
bottom: -200px;
border-radius: 0px 40px 0px 0px;
z-index: 30;
}
.img1{
    z-index: 2;
    position: absolute;
    height: 500px;
    width: 500px;
    right: -100%;
    top: 50px;
    opacity: 0;
}

  

.in img{
    position: absolute;
    height: 150px;
    width: 150px;
    top: 15%;
   
   
}
.inbak1 img {
left: 6%;
height: 140px;
    width: 140px;
    top: 18%;
}
.inbak2 img{
    left: 38%;   
}
.inbak3 img{
    left: 70%;
}

.text{
    position: absolute;
    z-index: 30;
    width: 450px;
    top: 60%;
    left: 10%;
    opacity: 0;
}

.text p{
   font-size: 30px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
top:50%;
color:rgb(255, 166, 0);
}
.text h2{
    font-size: 70px;
 color:rgb(253, 57, 57);
    font-family:Segoe Print;
 }
 
 .text button{
     padding: 12px 50px;
     background-color: rgb(235, 35, 35);
     border: none;
      color: floralwhite;
      border-radius: 25px;
      transition: .5s;

 }
 .text button:hover{
    padding: 12px 50px;
    background-color: rgb(243, 172, 41);
    border: none;
     color: rgb(0, 0, 0);
     border-radius: 25px;

}
 .tomato{
     width: 80px;
     height: 80px;
     position: absolute;
     z-index: 30;
     opacity: 0;
    
 }
 .tom1{
    right: 50%;
    top: 20%;
   
 }
 .tom2{
    right: 20%;
    top: 90%;
    width: 90px;
     height: 90px;

 }

 .mus{
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 30;
    opacity: 0;
    
}
.mu1{
    right: 20%;
    top: 0%;
   
}
.mu2{
    right: 45%;
    top: 90%;
   width: 60px;
   height: 60px;
  
}
.onion{
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 1; 
    opacity: 0; 
}
.oni1{
    right: 90%;
    top: 15%; 
   
}
.oni2{
    right: 50%;
    top: 60%; 
    width: 110px;
    height:100px;
}


.about{
    top: -20%;
left: 30%;
    width: 500px;
    height: 100px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    text-transform: uppercase;
    -webkit-text-stroke: 2px rgb(246, 171, 31);
 
    -webkit-text-fill-color: transparent;
    
    color: transparent;

  }
  .about_text{
opacity: 1;
  }



.maindiv2{
    background-color: rgb(248, 240, 240);
    height:100vh;
    width: 100vw;
    }

    .logo3{
        position: absolute;
        height: 90px;
        width: 70px;
        top: -20%;
        left:4%;
        opacity: 0;
        z-index: 50;
       
    }
.text2{
    position: absolute;
    z-index: 30;
    width: 500px;
    top: 60%;
    left: 10%;
    opacity: 0;
}
.text2 p{
    font-size: 20px;
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 top:50%;
 color:rgb(255, 166, 0);
 }

 .text2 h2{
    font-size: 70px;
 color:rgb(253, 57, 57);
    font-family:Segoe Print;
 }
 .img5{
     position: absolute;
 
     z-index: 2;
border-radius: 25px;
    height: 300px;
    width: 400px;
    right: -70%;
    top: 30%;
    opacity: 0;
 }


Javascript (.js file) SOURCE_CODE:-






 function page1() { 
    var tl = new TimelineMax()
    .to(".up_div",0.5,{top: '0%',ease: Power2.easeOut},'close',)
    .to(".lo_div",0.5,{bottom: '0%',ease: Power2.easeOut},'close',)
    .to($(".logo"),2,{ opacity: 1 ,top: '20%',  height:'180px',width:'150px', ease: Power2.easeOut},'close',1)
    .to($('.loader'), 5.2, {opacity: 1 ,width:'100vw'})
    .to($('.loader'), -10, {opacity: 0},'-=0',)
    .to($(".logo"),2,{ opacity: 0,top: '-20%',  height:'110px',width:'90px', left:'43%',ease: Power2.easeOut},'open',1)
    .to(".up_div",3,{top: '-80%',ease: Power2.easeOut,  },'open',)
    .to(".lo_div",3,{bottom: '-80%',ease: Power2.easeOut, },'open',)
  

    .to(".bak1",1,{ opacity: 1 ,width: '70vw'},8,)
    .to(".bak2",1,{ opacity: 1 ,width: '30vw'},9,)
    
    .to(".tomato",1,{ opacity: 0.5 ,},10,)
    .to(".mus",1,{ opacity: .5 ,},11,)
    .to(".onion",1,{ opacity: .5 ,},12,)
    .to(".logo2",3,{ opacity: 1 ,top: '0%', ease: Power2.easeOut},13,)
    .to(".logo3",3,{ opacity: 1 ,top: '0%', ease: Power2.easeOut},8,)
    .to("#hd",3,{ opacity: 1 ,top: '5%', ease: Power2.easeOut},13,)
    .to("#hd2",3,{ opacity: 1 ,top: '5%', ease: Power2.easeOut},8,)
    .to(".about",3,{ opacity: 1 ,top: '5%', ease: Power2.easeOut},9,)
    .to(".text",1.2,{ opacity: 1 ,top: '20%', ease: Power2.easeOut},14,)
    .to(".text2",1.2,{ opacity: 1 ,top: '20%', ease: Power2.easeOut},12,)
    .to(".img1",2,{ opacity: 1 ,right: '10%',  ease: "back.inOut(1.7)", rotate:'360deg'},14,)
    .to(".img5",2,{ opacity: 1 ,right: '10%', ease: "back.inOut(1.7)", rotate:'360deg'},13,)
    .to(".bak3",1.2,{ opacity: 1 ,bottom:'0', ease: Power2.easeOut},16,)
 }
 
 
 
 

   

 $(function() {
  page1();
 })

web design video My YOUTUBE channel





Labels:

Comments

Post a Comment

Popular posts from this blog

How To Make A Website Using HTML CSS & Bootstrap | Personal Portfolio Website Design Tutorial

How To Make A Website Using HTML CSS & Bootstrap | Personal Portfolio Website Design Tutorial SOURCE CODE HTML  SOURCE_CODE:- index .html 👇 <!DOCTYPE html> <html> <head>     <meta charset='utf-8'>     <meta http-equiv='X-UA-Compatible' content='IE=edge'>     <title>Page Title</title>     <meta name='viewport' content='width=device-width, initial-scale=1'>     <!-- Google Fonts -->   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">   <!-- Vendor CSS Files -->   <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">   <link href="assets/v...
Post a Comment
Read more

How to create Page transition animation by Greensock (gsap)?

 Create Page transition animation by Greensock (gsap) https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js SOURCE CODE HTML  SOURCE_CODE:- index .html 👇 <! DOCTYPE   html > < html > < head >      < meta   charset = 'utf-8' >      < meta   http-equiv = 'X-UA-Compatible'   content = 'IE=edge' >      < title >  index Page  </ title >      < meta   name = 'viewport'   content = 'width=device-width, initial-scale=1' >      < link   rel = 'stylesheet'   type = 'text/css'   media = 'screen'   href = 'main.css' >      </ head > < body >      < div   class = "header" >          < a   href = "#" >         ...
Post a Comment
Read more