Showing posts with label animation. Show all posts
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.
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.
Animated Sliding Navigation



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 Sliding Navigation by roundCube</title>

  
 </head>
    
<body>
    <nav>
        <div id="home"><h1>Home</h1></div>
        <div id="about"><h1>About Us</h1></div>
        <div id="portfolio"><h1>Portfolio</h1></div>
        <div id="contact"><h1>Contact Us</h1></div>
    </nav>
         <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div> 
</body>
    
    <style>
        nav{
            position: absolute;
            top:0px;
            left:0px;
            height:100%;
            width:100%;
            background-color: black;
        }
        
        #home{
            position: absolute;
            top:0%;
            height:100%;
            left:0%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://img0.mxstatic.com/wallpapers/bec7b6861bd15b4b90dc37dafed13345_large.jpeg);
            background-size: 190% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #home:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #home:hover ~ #about{
            left:55%;
        }
        
        #home:hover ~ #portfolio{
            left:70%;
        }
        #home:hover ~ #contact{
            left:85%;
        }
        
        #about{
            position: absolute;
            top:0%;
            height:100%;
            left:15%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://photofiles.alphacoders.com/236/23693.jpg);
            background-size: 240% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #about:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #about:hover ~ #portfolio{
            left:70%;
        }
        
        #about:hover ~ #contact{
            left:85%;
        }
        
        #portfolio{
            position: absolute;
            top:0%;
            height:100%;
            left:30%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://www.insside.net/img/stock/backgrounds/buildings_blue_bg.jpg);
            background-size: 290% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #portfolio:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #portfolio:hover ~ #contact{
            left:85%;
        }
        
    #copyright{
        position: absolute;
        bottom:5px;
        left:0px;
        width:100%;
        height:10%;
        text-align: center;
        color:black;
    }
        
    #copyright a{
        color: white;
        text-decoration: none;
        font-size: 18px;
        text-shadow: 1px 1px black;
    }

        
        #contact{
            position: absolute;
            top:0%;
            height:100%;
            left:45%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://www.e-architect.co.uk/images/jpgs/london/swiss_re_building_nw080609.jpg);
            background-size: 290% 100%;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
            cursor: pointer;
            cursor: hand;
        }
        
        #contact:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        
    
    </style>
</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)