Skip to main content

Car Website Design Using HTML , 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>page demo</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style2.css'>
  
</head>
<body>
    <div class="logo"><p id="logoT">CARO</p></div>
    <div class="cover">
<div class="maindiv">
    <nav id="nav">
       
        <ul class="nav-links">
            <li>
                <a href="#">new cars</a>
            </li>
            <li>
                <a href="#">used cars</a>
            </li>
            
        </ul>
    </nav>
    <div class="maintext">
        <p id="cartext">CAR0</p>
        <p>web design 2020</p>
        <p id="nor_text">
         Search secure for Cars For Sales Online. Search with Visymo.com. Results & Answers. Privacy Friendly. The Best Resources. Always Facts. 100% Secure. Unlimited Access. Services: Best Results, Explore Now, New Sources, Best in Search.
        </p><br>
        <button>buy now</button>
    </div>
    <div class="bigtext">
        <p id="p2">BUYING</p>
        <p id="p1">CAR</p>
                   </div>
                   <img src="img/cadillac_PNG15.png" alt="" class="img1">
              <img src="img/cadillac_PNG19.png" alt="" class="img2"></div>
              <img src="img/cadillac_PNG75.png" alt="" class="img3"></div>
</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='main2.js'></script>
</html>


CSS SOURCE_CODE:-

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");


* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
  }
  
  #nav {
    position: relative;
  display: flex;
  justify-content:flex-end;
  align-items: center;
  height: 55px;
 
}

.nav-links {
    display: flex;
   
     width: 30%;
   }


   .nav-links li {
    list-style-type: none;
  }
  .nav-links a {
    padding: 30px;
  text-decoration: none;
  color: rgba(69, 78, 95, 0.59);
  transition: 0.3s ease;
}

.nav-links a:hover {
    color: rgb(60, 63, 255);
  }

  .cover{
    overflow: hidden;
   position: relative;
   height: 100%;
   width: 100%;
  }
  
  .maindiv{
    background-color:rgb(248, 240, 240);
    height:100vh;
    width: 100vw;
    }
    
    .img1{
        position: absolute;
        width: 50%;
        top: 15%;
        right: 8%;
    }
    .bigtext{
        position: absolute;
        right: 42%;
        top: 10%;
        width: 100px;
        height: 500px;
    }
    .bigtext p{
        font-size: 100px;
        color: rgb(36, 36, 114);
        transform: rotate(-90deg);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }
    
    #p1{
        position: absolute;
        top: -10%;
        font-size: 100px;
        color: rgb(36, 36, 114);
    }
    
    #p2{
        position: absolute;
        font-size: 100px;
        color: rgba(210, 210, 211, 0.74);
        right: -10%;
    }
    
    .maintext{
        position: absolute;
        top: 27%;
        left: 3%;
    }
    .maintext p{
        font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
    }
    #cartext{
        font-size: 80px;
        color: rgb(39, 38, 73);
        font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    
    #nor_text{
        width: 350px;
        font-size: 10px;
        color: rgba(116, 116, 136, 0.74);
    }
    button{
        padding: 15px 40px;
        background-color: rgb(67, 67, 161);
        border: none;
        font-size: 15px;
        color: aliceblue;
        border-radius: 25px;
    }
    button:hover{
        background-color: rgb(49, 49, 255);
    }
    
    .logo{
        width: 7vw;
        height: 12vh;
        background-color:rgb(255, 255, 255);
        z-index: 100;
        font-family: Arial, Helvetica, sans-serif;
        position: absolute;
        left: 3%;
    
    
        
    }
    #logoT{
        position: absolute;
        color: rgb(87, 81, 255);
        font-size: 55px;
        top: 30%;
        left: 700px;
        opacity:0;
        
    }
    .img2{
        width: 100px;
        position: absolute;
        top: 35%;
        right: -1%;
    }
    
    .img3{
        width: 100px;
        position: absolute;
        top: 35%;
        right: -9%;
    }

Javascript (.js file) SOURCE_CODE:-

function page1() { 
    var tl = new TimelineMax()
    .to(".logo",0.8,{width:"100vw ",left: '0%',height:"100vh ",ease: Power2.easeOut},'close')
    .to("#logoT",1,{opacity: '0'},1,'close')
    .to("#logoT",1,{opacity: '1',fontSize:"55px",left:"600px",color:"rgba(116, 116, 136, 0.74)",ease: Power2.easeOut},2,'close')
    .to("#logoT",1,{opacity: '1',fontSize:"20px",left:"15%",top:"30%",color:" rgb(60, 63, 255)",ease: Power2.easeOut},3,'open')
    .to(".logo",1,{width:"6vw ",left: '3%',ease: Power2.easeOut},3,'open')
    .to(".logo",1,{height:"12vh ",ease: Power2.easeOut},4,'open')
    .from("#p1",1,{top:"-100%",ease: Power2.easeOut},6,'open')
    .from("#p2",1,{top:"-100%",ease: Power2.easeOut},5,'open')
    .from(".maintext",1,{left:"-50%",ease: Power2.easeOut},7,'open')
    .from(".img1",1,{right:"-50%",width:"0%",ease: Power2.easeOut},8,'open') 
    .from(".img2",1,{right:"-50%",width:"0%",ease: Power2.easeOut},8,'open') 
    .from("#nav",1,{top:"-100%",ease: Power2.easeOut},9,'open') 


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






web design video My YOUTUBE channel











Labels:

Comments

Post a Comment

Popular posts from this blog

GreenSock Tutorial - How To Create A Simple Image Slideshow ?

 GreenSock Tutorial - How To Create A Simple Image Slideshow  https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js SOURCE CODE HTML  SOURCE_CODE:- <! DOCTYPE   html > < html   lang = "en"   class = "no-js" >      < head >          < meta   charset = "UTF-8"   />          < meta   name = "viewport"   content = "width=device-width, initial-scale=1" >          < title > Crossroads Slideshow | Codrops </ title >                   < link   rel = "stylesheet"   type = "text/css"   href = "css/base.css"   />          < script > document . documentElement . className = "js" ; var   su...
Post a Comment
Read more

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" >      ...
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