Skip to main content

Page transition animation by javascript | JavaScript animation .

 

Page transition animation by javascript | JavaScript animation .







SOURCE CODE



HTML SOURCE_CODE:-


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Hover animation</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="main-container">
        <button class="button">Hover over</button>
    </div>
</body>
</html>


CSS SOURCE_CODE:-



* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
  }
  
  html,
  body {  
      width: 100%;
      height: 100%;
  } 
  
  .main-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #3091ec;
      color: #070606;
  }
  
  .button {
    position: relative;
    background-color: transparent;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    font-size: 1.9em;
    transform: none;
    cursor: pointer;
  }
  
  .button:after {
    content: "";
    height: 100%;
    width: calc(100% + 20px);
    position: absolute;
    top: -2px;
    left: -10px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: 2s;
  }
  
  .button:before {
    content:"";
    height: calc(100% + 20px);
    width: 100%;
    position: absolute; 
    top: -10px;
    left: -2px;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: 3s;
  }
  
  .button:hover:before {
    transform: rotateY(180deg);
  }
  
  .button:hover:after {
    transform: rotateX(180deg);
  }





web design video My YOUTUBE channel




































Tags:  javascript,css,HTML,page transition,page transition tutorial,javascript tutorial,javascript page transition,smooth page transition,js page transition,js transition,smooth transition tutorial,page transition javascript,page transition css,gsap page transition,gsap animation,page transition effect,page transitions,javascript tutorials,Page transition animation by gsap,web designer,learn javascript,javascript for beginners,gsap

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