Skip to main content

How to create ui design e-commerce use gsap animation ?

 Create ui design e-commerce use gsap animation 



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



SOURCE CODE




HTML SOURCE_CODE:-

<!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'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    
</head>
<body>
    <div class="header">
        <a href="#">
          <img class="logo"   src="img/logo.png" alt="">
        </a>
        <div class="loc">
        <ul>
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">SHOP</a></li>
          <li><a href="#">WATCHS</a></li>
          <li><a href="#">CONTACT</a></li>
          
        </ul>
        
       <div><a href="#"><img class="icon"src="img/icon1.png" alt=""></a></div>
       <div class="log1">1</div>   
       <div class="log"><img src="img/Untitled-1.png" alt=""></div> 
        </div>
      </div>
    
    <div class="conta">
        <div class="watchs">
        <img class="w1" src="img/w1.png" alt="">
        <img class="w2" src="img/w2.png" alt="">
        <img class="w3" src="img/w3.png" alt="">
    </div>
<div class="con1">
    <div class="con1-1">
        <div class="craro"></div>
        <img class="wh" id="wh1" src="img/w1.png" alt="">
        <img class="wh" id="wh2" src="img/w2.png" alt="">
        <img class="wh" id="wh3" src="img/w3.png" alt=""></div>
</div>
<div class="con2">
    <img src="img/backi.png" alt="">
    <div class="cover">
    <div class="text" id="t1">
        <p class="tex1">GET FIT IN STYLE</p><br>
        <p class="tex2">GET FIT IN STYLE GET FIT IN STYLE GET FIT IN STYLE 
            GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.
        </p>
        <br>
      
<div class="cer">
        <span class="c1">i</span>
        <span class="c2">L</span>
        <span class="c3">S</span></div>
        <div class="tex3">$99.56</div>  

        <div class="button" id="butt">
            BUY NOW
        </div>
    </div>
    <div class="text" id="t2">
        <p class="tex1">GET FIT IN STYLE</p><br>
        <p class="tex2">GET FIT IN STYLE GET FIT IN STYLE GET FIT IN STYLE 
            GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.
        </p>
        <br>
      
<div class="cer">
        <span class="c1">i</span>
        <span class="c2">L</span>
        <span class="c3">S</span></div>
        <div class="tex3">$79.56</div>  

        <div class="button" id="butt">
            BUY NOW
        </div>
    </div>  
    <div class="text" id="t3">
        <p class="tex1">GET FIT IN STYLE</p><br>
        <p class="tex2">GET FIT IN STYLE GET FIT IN STYLE GET FIT IN STYLE 
            GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.GET FIT IN STYLEGET FIT IN STYLEGET FIT IN STYLE
            GET FIT IN STYLEGET FIT IN STYLE.
        </p>
        <br>
      
<div class="cer">
        <span class="c1">i</span>
        <span class="c2">L</span>
        <span class="c3">S</span></div>
        <div class="tex3">$89.56</div>  

        <div class="button" id="butt">
            BUY NOW
        </div>
    </div>
</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='main.js'></script>
</html>

                                

CSS SOURCE_CODE:-

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.conta{
display: flex;
justify-content: center;
align-items: center;
}
.con1{
  
    width: 550px;
    height: 100vh;
    background-color: rgb(36, 34, 34);
}
.con2{
  overflow: hidden;
    width: 850px;
    height: 100vh;
    background:linear-gradient(to bottom,#20ba72 0%, #00ade0 100%);
}

 .con1-1{
  
    width:80px;
    height: 100vh;
    background-color: rgb(255, 255, 255);  
}
.con2 img{
    position: absolute;
    width: 570px;
    left: 700px;
    top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
}
.conta .watchs{
    position: absolute;
    height: 500px;
    width: 300px;
    display: inline-block;
    overflow: hidden;
    top: 10%;
    left: 26%;
    
  
}
.conta .w1{
    position: relative;
    z-index: 10;
    height: 450px;
    left: 0%;
}
.conta .w2{
    position: relative;
    z-index: 10;
    height: 450px;
    left: 0%;
}
.conta .w3{
    position: relative;
    z-index: 10;
    height: 450px;
    left: 0%;
}

.craro{
    position: absolute;
  height: 15%;
    width: 6%;
    top: 16%;
    opacity: 0.3;
    background-color:#0159fd ;
    z-index: 100;
   
}
.craro:before{
    content: '';
    position: absolute;
    height: 100%;
    width: 90%;

   
    background-color: rgb(126, 252, 0);
}
.conta .con1 .con1-1 #wh1{
    position: absolute;
    z-index: 10;
    height:15%;
    top: 400px;
    left: 8px;
}
.conta .con1 .con1-1 #wh2{
    position: absolute;
    z-index: 10;
    height:15%;
    top: 250px;
    left: 8px;
   
}

.conta .con1 .con1-1 #wh3{
    position: absolute;
    z-index: 10;
    height:15%;
    top: 100px;
    left: 8px;

}
.cover{
    position: relative;
    top: 20%;
   
}
.text{
    position: absolute;
    color: blanchedalmond;
    top: 20%;
    left: 20%;
   overflow: hidden;
    width: 500px;
    height: 500px;
  display: inline-block;
    letter-spacing: 1px;
    
}
.text .tex1{
    position: relative;
    font-size: 50px;
    font-family: sans-serif;
}
.text .tex2{
    position: relative;
    font-size: 12px;
    font-family: sans-serif;
   
   
}
.text span{
    position: absolute;
    display: inline-block;
    border: solid 2px #ffffff;
    align-items: center;
    justify-content: center;
    padding:5px 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
   top: 170px;
   transition: .5s;
  cursor: pointer;
  
}

.text .c1{
    left: 2%;
    padding:5px 10px;
}
.text .c1:hover{
    padding:5px 12px;
}
.text .c2{
    left: 10%;
}
.text .c3{
    left: 18%;
}
.text .cer{
    margin: 0 5px;
}
.text span:hover{
    width: 33px;
    height: 33px;
    border: solid 2px #c3f61c;
    padding:5px 10px;
    font-size: 18px;
}

.text .tex3{
    position: relative;
    font-size: 45px;
    font-family: sans-serif;
   top: 90px; 
}
 
.text .button{
    position: absolute;;
    padding: 15px 26px;
    background-color: rgb(40, 40, 41);
   transition: 0.5s;
    top: 350px;
    left: 10px;
    font-size: 13px;
    font-family: sans-serif;
    cursor: pointer;
    border-radius: 25px;
}
 
.text .button:hover{
    box-shadow: 0 10px 9px  #000 ;
    top: 348px;
    border-radius: 25px;
    background-color: rgb(0, 0, 0);
    color: #e4f00b;
}
.text .button:active{
    box-shadow: 0 0px 9px  #000 ;
    top: 348px;
}
.header{
    position: absolute;;
    top: 0;
    left: 0;
    width: 100%;
    padding:10px 100px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    z-index: 400;
  
  }
  .logo{
    position: relative;
    max-width: 60px;
   transition: 0.4s;

   left: -90px;
  }
 
  .header ul{
    position: relative;
    display: flex;
  }
  .header ul li{
    list-style: none;
  }
  .header ul li a{
  display: inline-block;
  color: rgb(255, 255, 255);
  font-weight: 400;
  margin-left: 40px;
  text-decoration: none;
  font-size: 12px;
  font-family: sans-serif;
  transition: .5s;
  }
  .header ul li a:hover{
    
    color: rgb(233, 218, 18);
   
    }
    .header .log img{
        position: relative;
        left: 50px;
        height: 40px;
        width: 40px;
        background-color: ivory;
        border-radius: 50%;
    }
    .header .log1{
        position: absolute;
        right:120px;
        top: 18px;
        padding: 2px 5px;
        height: 20px;
        width: 20px;
        background-color: rgb(255, 0, 0);
        border-radius: 50%;
        color: #ffffff;
     visibility: hidden;
     font-family: sans-serif;
    }
    .header .loc{
        display: flex;
        justify-content:center;
        align-items: center;
    }
  .icon{
      position: relative;
      height: 40px;
      left: 20px;
  }
  


Javascript (.js file) SOURCE_CODE:-






$(".wh").click(function() {
    $('.container').attr("color-center", this.id);
    if (this.id == "wh1") watch1();
    if (this.id == "wh2") watch2();
    if (this.id == "wh3") watch3();
   
   
 
 });



 function watch1() { 
    var tl = new TimelineMax()
    .to(".w1",0.8,{yPercent:0},0)
    .to(".w2",0.8,{yPercent:100},0)
    .to(".w3",0.8,{yPercent:100},0)
    .to("#t1",0.8,{xPercent:0},0)
    .to("#t2",0.8,{xPercent:-500},0)
    .to("#t3",0.8,{xPercent:-500},0)
    .to(".craro",0.8,{yPercent:320},0)

 }
 
 function watch2() {
    var tl = new TimelineMax()
    .to(".w1",0.8,{yPercent:200},0)
    .to(".w2",0.8,{yPercent:-100},0)
    .to(".w3",0.8,{yPercent:200},0)
    .to("#t1",0.8,{xPercent:-500},0)
    .to("#t2",0.8,{xPercent:0},0)
    .to("#t3",0.8,{xPercent:-500},0)
    .to(".craro",0.8,{yPercent:160},0)
 }
 
 function watch3() {
    var tl = new TimelineMax()
    .to(".w1",0.8,{yPercent:200},0)
    .to(".w2",0.8,{yPercent:200},0)
    .to(".w3",0.8,{yPercent:-200},0)
    .to("#t1",0.8,{xPercent:-500},0)
    .to("#t2",0.8,{xPercent:-500},0)
    .to("#t3",0.8,{xPercent:0},0)
    .to(".craro",0.8,{yPercent:0},0)
 }
 
 

   

 $(function() {
    watch1();
 })

 $(".button").click(function() {
   $('.container').attr("color-center", this.id);
   if (this.id == "butt") icon1();
   
  
  

});
function icon1() {
   var tl = new TimelineMax()
   .from(".icon",0.5,{rotation:320,xPercent:-50    },0)
   .to(".log1",0.5,{yPercent:10 , visibility: "visible"},0)
}


web design video





















Labels:

Comments

Post a Comment

Popular posts from this blog

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

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