Showing posts with label website. Show all posts
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.
Animated Menu
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 Menu by roundCube</title>


 </head>
 
<body>

    <div id="menu">
    <nav id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi62nXV7bk_l-8-BoDwCsZpLYqsCk_oTgOQEImLH5ogSbZO97EK1qcoXeKpT2JjwdKjxOw3jD5VPWDkDY1LLrhX3a5-eUxnSX38y1KWRsKY6PVzhKQsu9j2XQVnsaBTyEhny4NUVVM1Mc/s1600/nav.png" style="height: 60px;width: 60px;top: 20px;left: 20px;position:absolute;"  onclick="menu()" />
 
 
    </div>
 
     <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
 
 
</body>
    <style>
    body{
        background-color: #ffff8b;
    }
 
    #menu{
        position: absolute;
        top:3%;
        left:46.25%;
        width:100px;
        height:100px;
        background-color: #887c88;
        border-radius: 50%;
        cursor: pointer;
   cursor: hand;
         -webkit-transition: all 0.5s ease;
        -moz-transition : all 0.5s ease 0s;
        border-style: none;
        border-color:#887c88;
        border-width: 4px;
    }
     
    nav{
        position: absolute;
        right:0%;
        width:88%;
        top:0%;
        height:100%;
        text-align: right;
        font-family: sans-serif;
        font-weight: 600;
    }
     
    #navigation{
        opacity: 0;
        -webkit-transition: all 0.47s ease;
        -moz-transition : all 0.47s ease 0s;
    }
 
     
    #menu ul li{
        display: inline-block;
        padding: 25px;
    }
     
        ul li a{
            text-decoration: none;
            color:white;
        }
     
        ul li:hover{
            -webkit-box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
            -moz-box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
            box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
            border-radius:3px;
        }
 
         
     
    #copyright{
        position: absolute;
        bottom:5px;
        left:0px;
        width:100%;
        height:10%;
        text-align: center;
        color:black;
    }
     
    #copyright a{
        color: black;
        text-decoration: none;
    }

 
 
 
    </style>
    <script>
        function menu(){
            var menu=document.getElementById("menu");
            var navigation=document.getElementById("navigation");
         
            if(menu.style.width!="700px")
            {
            menu.style.width="700px";
            menu.style.borderRadius="8px";
            menu.style.left="26%";
            navigation.style.opacity="1";
            }
            else{
                menu.style.width="100px";
                menu.style.borderRadius="50%";
                menu.style.left="46.25%";
                navigation.style.opacity="0";
            }

         
        }
    </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.
Slide-in Animated Menu

Here's the code Snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Slide-in Menu By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    
<body>
    <div id="content"><div id="contentInner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor sit amet neque fermentum eleifend tempus eget enim. In condimentum massa ligula, vitae bibendum lectus posuere a. Ut commodo pretium rhoncus. Praesent lobortis iaculis libero vel sollicitudin. Morbi vitae arcu nibh. Integer feugiat justo sit amet augue mollis, non tristique magna fermentum. Mauris iaculis diam eget metus pretium, nec euismod tortor molestie. Vivamus id posuere sem. Donec condimentum lorem nibh, eget pharetra nisi gravida vel. Sed ac nisl euismod, rhoncus mi at, consequat enim. Ut placerat interdum sem, id finibus lorem rhoncus ac. Ut et quam ultrices, pretium justo dictum, ultrices est. Vivamus a tristique dui, sed dignissim quam.</br></br>

Vivamus cursus massa lectus, ac fringilla eros posuere posuere. Integer aliquam et eros id pulvinar. Ut efficitur pellentesque tellus, at egestas nisi vulputate non. Nam vitae sagittis turpis, vitae facilisis nibh. Donec ac tincidunt nibh. Duis cursus ac felis non vestibulum. Pellentesque in neque ut justo interdum varius. Nullam id ante id mauris cursus cursus. Donec convallis velit sit amet dapibus condimentum. Proin volutpat, dui ac varius tempor, purus magna pulvinar libero, eget aliquet quam neque at lacus.</br></br>

Nunc blandit, tortor vitae semper congue, ligula justo tempor purus, in sollicitudin leo dolor eget leo. Aliquam erat volutpat. Vivamus elementum commodo velit, lacinia pellentesque sem malesuada nec. Sed ac libero nec leo lacinia finibus. Mauris aliquam metus eget sem porttitor, ultricies lacinia lorem aliquam. Donec vel convallis nisi. Nulla facilisi. Nunc quam eros, sagittis vitae tempus eget, venenatis a nunc. Aenean ut eros vulputate, efficitur metus quis, vestibulum urna. Aenean pulvinar sem sed lacus aliquet, ac auctor sem dictum. In orci sem, accumsan et molestie sit amet, ullamcorper et ex.
</p></div></div>
    <div id="menu">
        </br></br></br></br>
    <ul id="nav">
        <li><a href="#"><h2>Home</h2></a></li>
        <li><a href="#"><h2>About</h2></a></li>
        <li><a href="#"><h2>Portfolio</h2></a></li>
        <li><a href="#"><h2>Contact</h2></a></li>

    </ul>
    </div>
    <div id="menuButton" onclick="openMenu()"><h1>Menu</h1></div>

    <div id="copyright">
        <h4>
      <a  id="copyrightlink" href="http://developer.azeeagency.com">Developed By: roundCube</a>  
        </h4>
          </div> 
    
</body>

<style>
    #menuButton{
        position: absolute;
        top:20px;
        left:5%;
        height:50px;
        width:11%;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi62nXV7bk_l-8-BoDwCsZpLYqsCk_oTgOQEImLH5ogSbZO97EK1qcoXeKpT2JjwdKjxOw3jD5VPWDkDY1LLrhX3a5-eUxnSX38y1KWRsKY6PVzhKQsu9j2XQVnsaBTyEhny4NUVVM1Mc/s1600/nav.png);
        background-size: 50px 50px;
        background-repeat: no-repeat;
        padding-left: 55px;
        line-height: 0.3;
        color: white;
        font-family: sans-serif;
        text-shadow: 1px 1px black;
        cursor: pointer;
    }
    
    #copyright{
        position: absolute;
        left:0px;
        width:100%;
        height:60px;
        bottom:0px;
        text-align: center;
        font-weight: 400;
    }
    
    #copyrightlink{
        color:black;
        font-family: sans-serif;
        font-weight: 400;
    }
    
    #content{
        position: absolute;
        width:100%;
        right:0%;
        top:0%;
        height:100%;
        background-color: #d0cece;
        -webkit-transition: all 1s ease;
   -moz-transition : all 1s ease 0s;
    }
    
    #contentInner{
        position: absolute;
        top:20%;
        height:65%;
        left:5%;
        width:90%;
    }
    #menu{
        position: absolute;
        left:0%;
        width:0%;
        height:100%;
        top:0%;
        background-color: darkslategray;
        -webkit-transition: all 1s ease;
  -moz-transition : all 1s ease 0s;
    }
    
    ul{
        list-style-type: none;
        padding-left: 0px;
        -webkit-transition: all 1s ease;
   -moz-transition : all 1s ease 0s;
        font-size: 0px;
    }
    

    
    li{
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    li:hover{
        background-color: #404040;
    }
    
    a{
        color: white;
        text-decoration: none;
    }
    

    </style>
    
    <script>
    function openMenu(){
        var menu=document.getElementById("menu");
        var content=document.getElementById("content");
        var nav=document.getElementById("nav");
        
        if(menu.style.width!="35%")
        {
            menu.style.width="35%";
            content.style.width="65%";
            nav.style.fontSize="15px";
        }
        else{
            menu.style.width="0%";
            content.style.width="100%";   
            nav.style.fontSize="0px";
            
        }
        
    }
    </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.
Pre Loader V6 which comes with a space where you can include your logo

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 V6.0 by roundCube</title>

  
 </head>
    
<body onload="animate()">
    <div id="loader">
        <div id="square"></div>
        <div id="logo"></div>
    </div>
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
    <div id="s5"></div>
    <div id="s6"></div>
    <div id="s7"></div>
    <div id="s8"></div>
    
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div> 
    
</body>
    
<style >

#loader{
    position: absolute;
    top:30%;
    left:42%;
    width:220px;
    height:220px;
}
    
#logo{
    position: absolute;
    top:45px;
    left:45px;
    height: 130px;
    width: 130px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
    background-size: 100% 100%;
}
    
#square{
    position: absolute;
    top:0px;
    left:0px;
    width:45px;
    height:45px;
    background-color: rgb(40,42,54);
         -webkit-transition: all 0.35s ease;
        -moz-transition : all 0.35s ease 0s;
}
    
#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
    
#s1,#s2,#s3,#s4,#s5,#s6,#s7{
    height:10%;
}
    
    
</style>
    
<script>
    function animate(){
        var square = document.getElementById("square"); 
        var s1 = document.getElementById("s1"); 
        var s2 = document.getElementById("s2"); 
        var s3 = document.getElementById("s3"); 
        var s4 = document.getElementById("s4"); 
        var s5 = document.getElementById("s5"); 
        var s6 = document.getElementById("s6"); 
        var s7 = document.getElementById("s7"); 
        var s8 = document.getElementById("s8"); 
        
        if(s1.style.height!="0%"){
            square.style.width="100%";
            s1.style.height="0%";
            square.style.opacity="0.7";
        }
        
        else if(s2.style.height!="0%"){
            square.style.width="45px";
            square.style.left="175px";
            s2.style.height="0%";
            square.style.opacity="1";
        }
        else if(s3.style.height!="0%"){
            square.style.left="175px";
            square.style.height="100%";
            s3.style.height="0%";
            square.style.opacity="0.7";
        }
        
        else if(s4.style.height!="0%"){
            square.style.top="175px";
            square.style.height="45px";
            s4.style.height="0%";
            square.style.opacity="1";
        }
        else if(s5.style.height!="0%"){
            square.style.left="0%";
            square.style.width="100%";
            s5.style.height="0%";
            square.style.opacity="0.7";
        }
          else if(s6.style.height!="0%"){
            square.style.width="45px";
            s6.style.height="0%";
            square.style.opacity="1";
        }
        else if(s7.style.height!="0%"){
            square.style.top="0%";
            square.style.height="100%";
            s7.style.height="0%";
            square.style.opacity="0.7";
        }
        else if(s8.style.height!="0%"){
            square.style.height="45px";
            square.style.opacity="1";
            s1.style.height="5%";
            s2.style.height="5%";
            s3.style.height="5%";
            s4.style.height="5%";
            s5.style.height="5%";
            s6.style.height="5%";
            s7.style.height="5%";
            s8.style.height="5%";
        }
        
        
        

            
        
        setTimeout("animate()",350);
            
    }
    
</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.
Responsive & Animated Independence Day Widget

Related Articles:

  

  



Here's the code snippet:

<body><a href="http://roundcubee.blogspot.com"><div class="grass" style="position:fixed;bottom:0px;left:0px;width:100%;height:12%;background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63B8gy3AEN_sQpqVECvjXMJwFKoHF8QRb41KiNwnJNtzJJIasr6suFya2_AUGgLhNcZn_kF8Mx-whQTrEBq5Kri69Ld34BM6RHouAzMBzukKnziPudQDEqRHXLvndd5EbUzH5pbXiGlE/s1600/grass_PNG4937.png);background-size:100% 100%;z-index:10000000000">

<div id="flag"></div>
<div id="text"><h1 style="color:white;">Happy Independence Day</h1></div>
</div></a>

</body>


<style>
   
    body{
        background-color: #c7c7c7;
    }
#flag{
    position: absolute;
    bottom:0%;
    height:0%;
    left:10%;
    width:10%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8q93NtzX2z64ESLG2vuHHisszoOnN7qsJ-3x6_K_MZWKmK2jD2oXyKMqGquXejesRMh9sbid1Stn5QEaykyMHOQMZfVhDQipzvZE1O09WWOXcN89oSjkaWeRBfVDC9jp63nZKMtc0N1Y/s1600/flag.png);
    background-size: 100% 100%;
}

#text{
position:absolute;
bottom:80%;
height:100%;
right:1%;
width:70%;
text-align:center;
font-size:0px;
}


</style>

<style>
.grass:hover #flag{
 height:170%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}

.grass:hover #text{
 font-size:22px;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
text-shadow:1px 1px 33px green;
bottom:50%;
}

@media only screen and (max-width:784px)
{
.grass:hover #text{
 font-size:20px;
}
}

@media only screen and (max-width:730px)
{
.grass:hover #text{
 font-size:18px;
}

#flag{
left:2%;
width:15%;
}
}


@media only screen and (max-width:644px)
{
.grass:hover #text{
 font-size:15px;
}

#flag{
left:2%;
width:18%;
}
}

@media only screen and (max-width:543px)
{
.grass:hover #text{
 font-size:11px;
}

#flag{
left:2%;
width:20%;
}
}

@media only screen and (max-width:402px)
{
#text{
display:none;
}
   
#flag{
left:30%;
width:40%;
}


.grass:hover #flag{
height:200%;
}
}

</style>

For your website add this code just before </body> tag.
For your blog go to Layout of your template, then add a widget in the footer portion after that select the HTML/JAVASCRIPT option and paste this code there and you are done.


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)