Animated Text Revealer


Here's the code snippet:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Text Revealer by roundCube</title>

 
 </head>
   
<body onload="animate()">
    <a href="http://www.facebook.com/roundCubeInc">
    <div id="textForRevealing">
        roundCube
        <div id="maskRight"></div>
        <div id="maskLeft"></div>
        <Div id="floater"></Div>
    </div></a>
   
</body>
   
<style>
  #textForRevealing{
      position: absolute;
      top:20%;
      left:30%;
      width:40%;
      height:77px;
      background-color: orange;
      font-size: 70px;
      text-align: center;
      font-family: sans-serif;
      text-decoration: none;
      color: black;
  }
   
#floater{
    position: absolute;
    left:0%;
    height:100%;
    top:0px;
    width:77px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQyqsRQVxBjwUZmGSyODbsImNL91tAd4IaqUD5FC-kzf5D8FCluzQNqd68bhyphenhyphenF8-HZL6f6KuA8j825ytDeVdGP4l1d9brkLgN77VRvzFw252osN-LB1-_UP2ibw1RpZhJisy2PQ8z6T7Y/s1600/floater.png);
    background-size: 100% 100%;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;

}  
#maskRight{
    position: absolute;
    right:0px;
    width:85.8%;
    top:0px;
    height:100%;
    background-color: white;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;
}
   
#maskLeft{
    position: absolute;
    left:0px;
    width:0%;
    top:0px;
    height:100%;
    background-color: white;
        -webkit-transition: all 1.75s ease;
        -moz-transition : all 1.75s ease 0s;
}
   
   
</style>
   
<script>
   function animate(){
            var ml= document.getElementById("maskLeft");
            var mr= document.getElementById("maskRight");
            var floater= document.getElementById("floater");
     
       if(ml.style.width!="85.8%")
       {
           ml.style.width="85.8%";
           mr.style.width="0%";
           floater.style.left="85.8%";

       }
       else{
           ml.style.width="0%";
           mr.style.width="85.8%";
           floater.style.left="0%";  
       }
           setTimeout("animate()",1790);
   }
   
</script>
   
</html>



If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Modal V3.0



Have a look at template by us:  METROCITY


Here's the code snippet:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal V3.0 By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="container">
    
        <div id="button" onclick="openModal()">
        <h2>Open Modal</h2></div>
        <Div id="modal">
            <Div id="closeButton"  onclick="closeModal()">
                <div id="cross1"></div>
                <div id="cross2"></div>
            </Div>
            <div id="modalText"><h1>Hey There!</h1>
                <p>Type Random Stuff here</p>
            </div>
            <div id="modalButton"><h3>Enter The Website</h3></div>
        </Div>
    
    </div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>    
</body>
<style>
   #container{
       position: absolute;
       top:0px;
       left:0px;
       height:100%;
       width: 100%;
       background-image: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);
       background-size: 100% 100%;
   }
    
    #button{
        position: absolute;
        top:27%;
        left:43%;
        height:50px;
        width:200px;
        font-family: sans-serif;
        -webkit-transition:all 0.7s ease;
        color: white;
        border-style: solid;
        border-color: white;
        border-width: 5px;
        text-align: center;
        
    }
    #copyright{
        position: absolute;
        top:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
    
    #copyright a{
        color:white;
        text-decoration: none;
    }
    

    
    #button:hover{
        background-color: white;
        color: black;
        cursor: pointer;
    }
    
    #modal{
        position: absolute;
        top:10%;
        height:400px;
        width:500px;
        background-color: rgba(235, 235, 235, 0.9);
        left:35%;
        visibility: hidden;
        opacity:0;
        border-radius: 5px;
        box-shadow: 1px 1px black;
        -webkit-transition:all 0.7s ease;
        
    }
    
    #closeButton{
        position: absolute;
        top:0px;
        left:5%;
        height:65px;
        width:65px;
        background-color: #645e5e;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        cursor: pointer;
    }
    
    #modalText{
        text-align: center;
        position: absolute;
        top:15%;
        left:10%;
        width:80%;
        height:60%;
        color: gray;
        font-family: sans-serif;
    }
    
    #modalText h1{
        font-size: 50px;
    }
    
    #cross1{
        position: absolute;
        top:9px;
        left:30.5px;
        height:40px;
        width:6px;
        background-color: white;
        transform: rotate(45deg);
        -webkit-transition:all 0.3s ease;
        box-shadow: 1px 1px rgba(0,0,0,0.3);
    }
    
    #cross2{
        position: absolute;
        top:9px;
        right:30.5px;
        height:40px;
        width:6px;
        background-color: white;
        transform: rotate(-45deg); 
        -webkit-transition:all 0.3s ease;
        box-shadow: 1px 1px rgba(0,0,0,0.3);
    }
    
    #closeButton:hover #cross1{
        transform: rotate(-45deg);
    }
    
    #closeButton:hover #cross2{
        transform: rotate(45deg);
    }
    
    
    #modalButton{
        position: absolute;
        bottom:10%;
        height:50px;
        left:32.5%;
        width:35%;
        border-color: gray;
        border-width: 3px;
        border-style:solid;
        text-align: center;
        -webkit-transition:all 0.5s ease;
        cursor: pointer;
        font-family: sans-serif;
        color: gray;
    }
    
    #modalButton:hover{
        background-color: gray;
        color:white;
    }
    
</style>
<script>
function openModal(){
     var modal=document.getElementById("modal");
    var button=document.getElementById("button");
    
    modal.style.opacity="1";
    modal.style.visibility="visible";
    button.style.opacity="0";
    
}
    
function closeModal(){
     var modal=document.getElementById("modal");
    var button=document.getElementById("button");
    
    modal.style.opacity="0";
    modal.style.visibility="hidden";
    button.style.opacity="1";
    
}
    
</script>

</html>



If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Metrocity V1.0

Metrocity is the template designed to be a perfect website for you or your brand.The template comes with a perfect metro styled menu, the web itself is completely responsive i.e it looks perfect on your desktop PC as well as your Phone and various other devices, in order to provide a good web experience the template has been coded to mould itself in accordance with the device used. It has been tailored to provide the visitor with a best web experience. Metrocity has been designed in such a way that it can be easily customized in order to fit your needs and requirements.


  • Free
  • $0
  • Unresponsive Design
  • No Support
  • Un-removable Credits
  • Download Free
  • Premium
  • $25
  • Responsive Design
  • Lifetime Support
  • Easily Removable Credits
  • Buy Premium
Modal With Video Support

Note: Don't forget to replace video/hello.mp4 & video/hello.ogg   in the code with the link to your files.


Here's the code snippet:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal With Video By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
   
<body onload="animate()">
    <div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
    <div id="modal">
    <div id="close" onclick="closeModal()">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
        <div id="modalTop">
        <video id='videoPlayer' style="height:100%;width:100%" controls autoplay>
       <source id='mp4Source' src="video/hello.mp4" type="video/mp4" />
       <source id='oggSource' src="video/hello.ogg" type="video/ogg" />
    </video>
        </div>
    <div id="modalPartition">
        <Div id="partitionArrow"></Div>
        <div id="partitionButton">
            <button class="btn btn-success btn-block"><b>Enter Website</b></button>
        </div>
    </div>
    </div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>

</body>
   
<style>
#button{
    position: absolute;
    top:40%;
    left:43%;
    height:10%;
    width:14%;
    background-color:orange;
    -webkit-transition:all 0.25s ease-in;
    -moz-transition:all 0.25s ease-in 0s;
    border-radius: 5px;
    color: white;
    border-bottom-width: 9px;
    border-bottom-style: ridge;
    border-bottom-color: orangered;
    cursor: pointer;
cursor: hand;
}

#button:hover{
    background-color: #ffba3d;
    border-bottom-color: #ff5819;
}
   
#modal{
    position: absolute;
    top:50%;
    left:50%;
    height:0px;
    width:0px;
    background-color: rgb(230,98,73);
    border-style:solid;
    border-color:rgb(230,98,73);
    border-radius: 7px;
    border-width:0px;
    opacity: 0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease 0s;
    box-shadow: -8px 8px rgba(0,0,0,0.2);

}
   
#close{
    position: absolute;
    top:-20px;
    right:-20px;
    height:40px;
    width:40px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(230,98,73);
    border-width: 2px;
    cursor: pointer;
cursor: hand;
    background-color: white;
    box-shadow: -4px 4px black;
    box-shadow: -4px 4px rgba(0,0,0,0.5);
}
   
#line1{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
#line2{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(-39deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
    #copyright{
        position: absolute;
        top:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:black;
    }
   

#close:hover #line1{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
    opacity: 0.7;
}
   
#close:hover #line2{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    opacity: 0.7;
}
   
#success{
    position: absolute;
    top:10%;
    left:40.5%;
    height:100px;
    width:100px;
    border-radius: 50%;
    background-image: url(http://jkjautomotive.com/img/tick.png);
    background-size: 60% 60%;
    background-position:  center;
    background-color: white;
    background-repeat: no-repeat;
}

#modalTop{
    position: absolute;
    top:5%;
    left:5%;
    height:60%;
    width:90%;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
   
   
#modalPartition{
    position: absolute;
    bottom:0px;
    left:0px;
    height:30%;
    width:100%;
    background-color: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
   
#modalText{
    position: absolute;
    top:38%;
    height:25%;
    width:100%;
    left:0%;
    text-align: center;
    color:white;
}
   
#partitionArrow{
    position: absolute;
    left:48%;
    width:20px;
    top:-10px;
    height:20px;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    background-color: rgb(230,98,73);
}
   
#partitionButton{
    position: absolute;
    top:30%;
    left:30%;
    width:40%;
    height:60%;

}

.btn-block{
    background-color: rgb(230,98,73);
    border-color: rgb(230,98,73);
}
   
.btn-block:hover{
    background-color: rgb(212,90,67);
    border-color: rgb(212,90,67);
}
   
   
</style>

<script>
function openModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="10%";
    modal.style.height="65%";
    modal.style.left="32.5%";
    modal.style.width="35%";
    modal.style.borderWidth="2px";
    modal.style.opacity="1";
}
   
function closeModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="50%";
    modal.style.height="0%";
    modal.style.left="50%";
    modal.style.width="0%";
    modal.style.borderWidth="0px";
    modal.style.opacity="0";
}
   
function animate(){
    var button = document.getElementById("button");
   
    if(button.style.top!="43%"){
        button.style.top="43%";
    }
    else{
        button.style.top="40%";
    }
   
    setTimeout("animate()",320);
}
</script>
   
</html>
    
Animated Loader V7
Here's the code snippet:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V7.0 by roundCube</title>

 
 </head>
   
<body onload="animate()">
    <div id="bigblock">
   <div id="loader">
        <div id="block1"></div>
        <div id="block2"></div>  
        <div id="block3"></div>  
        <div id="block4"></div>
        <div id="block5"></div>
        <div id="block6"></div>
        <div id="block7"></div>
        <div id="block8"></div>
   </div>
</div>

   
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>

</body>
   
<style>
    #loader{
        position: absolute;
        top:50px;
        left:50px;
        height:70px;
        width:70px;
    }
   
    #bigblock{
        position: absolute;
        top:35%;
        left:40%;
        width:170px;
        height:170px;
    }
   
    #block1{
        position: absolute;
        top:0px;
        left:0px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.1s ease;
        -moz-transition : all 0.1s ease 0s;
    }
   
    #block2{
        position: absolute;
        top:0px;
        left:23.33px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.25s ease;
        -moz-transition : all 0.25s ease 0s;
    }
    #block3{
        position: absolute;
        top:0px;
        left:46.66px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.4s ease;
        -moz-transition : all 0.4s ease 0s;
    }
    #block4{
        position: absolute;
        top:23.33px;
        left:46.66px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.6s ease;
        -moz-transition : all 0.6s ease 0s;
    }
    #block5{
        position: absolute;
        top:46.66px;
        left:46.66px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.75s ease;
        -moz-transition : all 0.75s ease 0s;
       
    }
    #block6{
        position: absolute;
        top:46.66px;
        left:23.33px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 0.9s ease;
        -moz-transition : all 0.9s ease 0s;
       
    }
    #block7{
        position: absolute;
        top:46.66px;
        left:0px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 1.05s ease;
        -moz-transition : all 1.05s ease 0s;
    }
    #block8{
        position: absolute;
        top:23.33px;
        left:0px;
        height:23.33px;
        width:23.33px;
        background-color: white;
         -webkit-transition: all 1.25s ease;
        -moz-transition : all 1.25s ease 0s;
    }
   
    body{
        background-color: teal;
    }
   
#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}

   
</style>
   
<script>
function animate(){
   
            var b1= document.getElementById("block1");
            var b2= document.getElementById("block2");
            var b3= document.getElementById("block3");
            var b4= document.getElementById("block4");
            var b5= document.getElementById("block5");
            var b6= document.getElementById("block6");
            var b7= document.getElementById("block7");
            var b8= document.getElementById("block8");
            var loader= document.getElementById("loader");
   
    if(b1.style.top!="-50px"){
    b1.style.top="-50px";
    b1.style.left="-50px";
    b2.style.top="-50px";
    b2.style.left="23.33px";
    b3.style.top="-50px";
    b3.style.left="95px";
    b4.style.top="21px";
    b4.style.left="96px";
    b5.style.top="96px";
    b5.style.left="96px";
    b6.style.top="96px";
    b6.style.left="23.33px";
    b7.style.top="96px";
    b7.style.left="-50px";
    b8.style.top="21px";
    b8.style.left="-50px";


    }
    else{
    b1.style.top="0px";
    b1.style.left="0px";
    b2.style.top="0px";
    b2.style.left="23.33px";
    b3.style.top="0px";
    b3.style.left="46.66px";
    b4.style.top="23.33px";
    b4.style.left="46.66px";
    b5.style.top="46.66px";
    b5.style.left="46.66px";
    b6.style.top="46.66px";
    b6.style.left="23.33px";
    b7.style.top="46.66px";
    b7.style.left="0px";
    b8.style.top="23.33px";
    b8.style.left="0px";

    }
       
   
    setTimeout("animate()",1290);
}
   
</script>
   
</html>

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Animated Modal
Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal V2.0 By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
   
<body onload="animate()">
    <div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
    <div id="modal">
    <div id="close" onclick="closeModal()">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
        <div id="success"></div>
        <div id="modalText"><h2><b>Awesome!</b></h2>
        <p>Write Something here maybe?</p>
        </div>
    <div id="modalPartition">
        <Div id="partitionArrow"></Div>
        <div id="partitionButton">
            <button class="btn btn-success btn-block"><b>START something</b></button>
        </div>
    </div>
    </div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>

</body>
   
<style>
#button{
    position: absolute;
    top:40%;
    left:43%;
    height:10%;
    width:14%;
    background-color:orange;
    -webkit-transition:all 0.25s ease-in;
    -moz-transition:all 0.25s ease-in 0s;
    border-radius: 5px;
    color: white;
    border-bottom-width: 9px;
    border-bottom-style: ridge;
    border-bottom-color: orangered;
    cursor: pointer;
cursor: hand;
}

#button:hover{
    background-color: #ffba3d;
    border-bottom-color: #ff5819;
}
   
#modal{
    position: absolute;
    top:50%;
    left:50%;
    height:0px;
    width:0px;
    background-color: rgb(230,98,73);
    border-style:solid;
    border-color:rgb(230,98,73);
    border-radius: 7px;
    border-width:0px;
    opacity: 0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease 0s;
    box-shadow: -8px 8px rgba(0,0,0,0.2);

}
   
#close{
    position: absolute;
    top:-20px;
    right:-20px;
    height:40px;
    width:40px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(230,98,73);
    border-width: 2px;
    cursor: pointer;
cursor: hand;
    background-color: white;
    box-shadow: -4px 4px black;
    box-shadow: -4px 4px rgba(0,0,0,0.5);
}
   
#line1{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
#line2{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(-39deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
    #copyright{
        position: absolute;
        top:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:black;
    }
   

#close:hover #line1{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
    opacity: 0.7;
}
   
#close:hover #line2{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    opacity: 0.7;
}
   
#success{
    position: absolute;
    top:10%;
    left:40.5%;
    height:100px;
    width:100px;
    border-radius: 50%;
    background-image: url(http://jkjautomotive.com/img/tick.png);
    background-size: 60% 60%;
    background-position:  center;
    background-color: white;
    background-repeat: no-repeat;
}
   
#modalPartition{
    position: absolute;
    bottom:0px;
    left:0px;
    height:30%;
    width:100%;
    background-color: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
   
#modalText{
    position: absolute;
    top:38%;
    height:25%;
    width:100%;
    left:0%;
    text-align: center;
    color:white;
}
   
#partitionArrow{
    position: absolute;
    left:48%;
    width:20px;
    top:-10px;
    height:20px;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    background-color: rgb(230,98,73);
}
   
#partitionButton{
    position: absolute;
    top:30%;
    left:30%;
    width:40%;
    height:60%;

}

.btn-block{
    background-color: rgb(230,98,73);
    border-color: rgb(230,98,73);
}
   
.btn-block:hover{
    background-color: rgb(212,90,67);
    border-color: rgb(212,90,67);
}
   
   
</style>

<script>
function openModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="10%";
    modal.style.height="65%";
    modal.style.left="32.5%";
    modal.style.width="35%";
    modal.style.borderWidth="2px";
    modal.style.opacity="1";
}
   
function closeModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="50%";
    modal.style.height="0%";
    modal.style.left="50%";
    modal.style.width="0%";
    modal.style.borderWidth="0px";
    modal.style.opacity="0";
}
   
function animate(){
    var button = document.getElementById("button");
   
    if(button.style.top!="43%"){
        button.style.top="43%";
    }
    else{
        button.style.top="40%";
    }
   
    setTimeout("animate()",320);
}
</script>
   
</html>
   

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Menu with block animation and responsiveness


Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blocks Menu By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
 
<body>
    <div id="container">
    <div id="button" onclick="openMenu()"><h3>Menu</h3><div id="menu1"></div><div id="menu2"></div><div id="menu3"></div></div>
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3"></div>
    <div id="block4"></div>
    <div id="block5"></div>
    <div id="block6"></div>
    <div id="block7"></div>
    <div id="block8"></div>
    <div id="block9"></div>
    <div id="block10"></div>
    <div id="block11"></div>
    <div id="block12"></div>
    <div id="menu">
        <a href="#"><h1>Home</h1></a>
        <a href="#"><h1>About</h1></a>
        <a href="#" id="AlphaMoreThenEight"><h1>Portfolio</h1></a>
        <a href="#" id="AlphaMoreThenEight"><h1>Contact Us</h1></a>  
    </div>
    <div id="buttonOverMenu" onclick="closeMenu()"><h3>Menu</h3>
        <div id="menu4"></div>
        <div id="menu5"></div>
        <div id="menu6"></div>
    </div>
     
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube</a></div>
</div>  
 
</body>
    <style>
     
        #container{
            position: absolute;
            top:0%;
            left:0%;
            height: 100%;
            width: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Looking_Up_at_Empire_State_Building.JPG);
            background-size: 100% 100%;
        }
        #button{
            position: absolute;
            top:4%;
            left:4%;
            height:40px;
            width:130px;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
            font-size: 18px;
            font-family: arial,sans-serif;
            text-align: right;
            line-height: 0;
            cursor: pointer;
            cursor: hand;
        }
        #buttonOverMenu{
            position: absolute;
            top:4%;
            left:4%;
            height:40px;
            width:130px;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
            font-size: 18px;
            font-family: arial,sans-serif;
            text-align: right;
            color: white;
            line-height: 0;
            cursor: pointer;
            cursor: hand;
         
        }
     
        #menu1{
            position: absolute;
            top:0%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #menu2{
            position: absolute;
            top:45%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #menu3{
            position: absolute;
            bottom:0%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #button:hover #menu1{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
     
        #button:hover #menu2{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
        #button:hover #menu3{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
     
        #menu4{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #copyright{
            position:absolute;
            bottom:2px;
            height:20px;
            left:0px;
            width:100%;
            text-align:center;
        }

        #copyright a{
            text-decoration:none;
            color:white;
            opacity: 0.7;
            background-image: none;
            font-size: 19px;

        }
     
        #menu5{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
        #menu6{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #buttonOverMenu:hover #menu4{
            top:0%;
            left:0%;
            height:10%;
            width:30%;
        }
     
        #buttonOverMenu:hover #menu5{
            top:45%;
            left:0%;
            height:10%;
            width:30%;
        }
     
        #buttonOverMenu:hover #menu6{
            top:90%;
            left:0%;
            height:10%;
            width:30%;
        }
     

         
         
     
        #block1{
            position: absolute;
            top:0%;
            left:0%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #block2{
            position: absolute;
            top:0%;
            left:25%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.6s ease;
      -moz-transition : all 0.6s ease 0s;
        }
     
        #block3{
            position: absolute;
            top:0%;
            left:50%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }

        #block4{
            position: absolute;
            top:0%;
            left:75%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }
     
        #block5{
            position: absolute;
            top:33%;
            left:0%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.6s ease;
      -moz-transition : all 0.6s ease 0s;
        }
     
        #block6{
            position: absolute;
            top:33%;
            left:25%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }
     
        #block7{
            position: absolute;
            top:33%;
            left:50%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }

        #block8{
            position: absolute;
            top:33%;
            left:75%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.5s ease;
      -moz-transition : all 1.5s ease 0s;
        }
     
        #block9{
            position: absolute;
            top:66%;
            left:0%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }
     
        #block10{
            position: absolute;
            top:66%;
            left:25%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }
     
        #block11{
            position: absolute;
            top:66%;
            left:50%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.5s ease;
      -moz-transition : all 1.5s ease 0s;
        }

        #block12{
            position: absolute;
            top:66%;
            left:75%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.8s ease;
      -moz-transition : all 1.8s ease 0s;
        }
     
        #menu{
            position: absolute;
            top:15%;
            height:55%;
            left:10%;
            width:80%;
            font-family: arial,sans-serif;
            font-size: 25px;
            text-align: center;
            color:white;
            opacity: 0;
            visibility: hidden;
            text-transform: uppercase;
         
        }
     
        a{
            color: white;
            text-decoration: none;
        }
     
        a:hover{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
            background-size: 32% 140%;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
        }
     
        #AlphaMoreThenEight:hover{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
            background-size: 46% 180%;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
        }
     
     
         
    @media only screen and (max-width:858px)
        {
            #menu{
                font-size: 20px;
            }
        }
     
    @media only screen and (max-width:762px)
        {
            #menu{
                font-size: 17px;
            }
        }
    @media only screen and (max-width:599px)
        {
            #menu{
                font-size: 13px;
            }
        }
     
    @media only screen and (max-width:463px)
        {
            #menu{
                width:95%;
                left:2.5%;
            }
        }
     
    @media only screen and (max-width:402px)
        {
            a:hover{
                background-size: 40% 140%;
            }
            #AlphaMoreThenEight:hover{
                background-size: 55% 180%;
            }
        }
 
 
    </style>
 
    <script>
    function openMenu(){
       var b1=document.getElementById("block1");
       var b2=document.getElementById("block2");
       var b3=document.getElementById("block3");
       var b4=document.getElementById("block4");
       var b5=document.getElementById("block5");
       var b6=document.getElementById("block6");
       var b7=document.getElementById("block7");
       var b8=document.getElementById("block8");
       var b9=document.getElementById("block9");
       var b10=document.getElementById("block10");
       var b11=document.getElementById("block11");
       var b12=document.getElementById("block12");
       var menu=document.getElementById("menu");
       var button=document.getElementById("buttonOverMenu");
     
            menu.style.visibility="visible";
            menu.style.opacity="1";
     
        b1.style.visibility="visible";
        b1.style.opacity="1";
        b2.style.visibility="visible";
        b2.style.opacity="1";
        b3.style.visibility="visible";
        b3.style.opacity="1";
        b4.style.visibility="visible";
        b4.style.opacity="1";
        b5.style.visibility="visible";
        b5.style.opacity="1";
        b6.style.visibility="visible";
        b6.style.opacity="1";
        b7.style.visibility="visible";
        b7.style.opacity="1";
        b8.style.visibility="visible";
        b8.style.opacity="1";
        b9.style.visibility="visible";
        b9.style.opacity="1";
        b10.style.visibility="visible";
        b10.style.opacity="1";
        b11.style.visibility="visible";
        b11.style.opacity="1";
        b12.style.visibility="visible";
        b12.style.opacity="1";
        button.style.visibility="visible";
        button.style.opacity="1";
     
    }
     
    function closeMenu(){
       var b1=document.getElementById("block1");
       var b2=document.getElementById("block2");
       var b3=document.getElementById("block3");
       var b4=document.getElementById("block4");
       var b5=document.getElementById("block5");
       var b6=document.getElementById("block6");
       var b7=document.getElementById("block7");
       var b8=document.getElementById("block8");
       var b9=document.getElementById("block9");
       var b10=document.getElementById("block10");
       var b11=document.getElementById("block11");
       var b12=document.getElementById("block12");
       var menu=document.getElementById("menu");
       var buttontop=document.getElementById("buttonOverMenu");
        var button=document.getElementById("button");
     

            menu.style.visibility="hidden";
            menu.style.opacity="0";

        b1.style.visibility="hidden";
        b1.style.opacity="0";
        b2.style.visibility="hidden";
        b2.style.opacity="0";
        b3.style.visibility="hidden";
        b3.style.opacity="0";
        b4.style.visibility="hidden";
        b4.style.opacity="0";
        b5.style.visibility="hidden";
        b5.style.opacity="0";
        b6.style.visibility="hidden";
        b6.style.opacity="0";
        b7.style.visibility="hidden";
        b7.style.opacity="0";
        b8.style.visibility="hidden";
        b8.style.opacity="0";
        b9.style.visibility="hidden";
        b9.style.opacity="0";
        b10.style.visibility="hidden";
        b10.style.opacity="0";
        b11.style.visibility="hidden";
        b11.style.opacity="0";
        b12.style.visibility="hidden";
        b12.style.opacity="0";
        buttontop.style.visibility="hidden";
        buttontop.style.opacity="0";
        button.style.visibility="visible";
        button.style.opacity="1";
     
     
    }
 
    </script>
</html>


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Subscribe to: Posts (Atom)