Showing posts with label web. 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.







One Way is the first template developed by our co-founder Noor-ul-Haq, the template comes with a navigation which is based on smooth scroll via JQuery, this template would be perfect to showcase a small business or a brand.There's also a contact us modal form through which your customers or visitors can reach you the messages they'll leave will be forwarded to your email by the template.


All copyrights are reserved by roundCube.

Version: 1.0
Animated Loader

Related Articles:

p  


Here's the source code:


</head><!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V3.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />


 </head>
<body onload="animate()">
 
<div id="loader">
   <div id="inner1"></div>
   <div id="inner2"></div>
   <div id="inner3"></div>
   <div id="inner4"></div>
</div>

<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
 
</body>
<style >
 #loader{
     position: absolute;
     left:44%;
     top:35%;
     height: 150px;
     width:150px;
     transform: rotate(45deg);
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
 }
#inner1{
    position: absolute;
    top:0px;
    left:0px;
    height: 65px;
    width:65px;
    background-color: rgb(255, 163, 55);
    border-radius: 5px;
    border-width:4px;
    border-style: solid;
    border-color: rgb(255, 163, 55);;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
}
#inner2{
    position: absolute;
    top:0px;
    right:0px;
    height: 65px;
    width:65px;
    background-color: rgb(255, 163, 55);;
    border-radius: 5px;
    border-width:4px;
    border-style: solid;
    border-color: rgb(255, 163, 55);;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
}
#inner3{
    position: absolute;
    bottom:0px;
    left:0px;
    height: 65px;
    width:65px;
    background-color: rgb(255, 163, 55);;
    border-radius: 5px;
    border-width:4px;
    border-style: solid;
    border-color: rgb(255, 163, 55);;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
}
#inner4{
    position: absolute;
    bottom:0px;
    right:0px;
    height: 65px;
    width:65px;
    background-color: rgb(255, 163, 55);;
    border-radius: 5px;
    border-width:4px;
    border-style: solid;
    border-color: rgb(255, 163, 55);;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
}
#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 i1 = document.getElementById("inner1");
         var i2 = document.getElementById("inner2");
         var i3 = document.getElementById("inner3");
         var i4 = document.getElementById("inner4");
                var loading = document.getElementById("loader");
 

   
        if(i1.style.top!="-30px")
         {
       i1.style.top="-30px";
       i1.style.left="-30px";
       i2.style.top="-30px";
        i2.style.right="-30px";
       i3.style.bottom="-30px";
        i3.style.left="-30px";
       i4.style.bottom="-30px";
        i4.style.right="-30px";
 
         }
       else if(i1.style.background!="none"){
           loading.style.transform="rotate(135deg)";
             i1.style.background="none";
    i2.style.background="none";
        i3.style.background="none";
       i4.style.background="none";

       }
       else if(loading.style.transform!="rotate(225deg)"){
           loading.style.transform="rotate(225deg)";

       }
       else{
           i1.style.top="0px";
           i2.style.top="0px";
           i3.style.bottom="0px";
           i4.style.bottom="0px";
           i1.style.left="0px";
           i2.style.right="0px";
           i3.style.left="0px";
           i4.style.right="0px";
           loading.style.transform="rotate(45deg)"
           i1.style.background="rgb(255, 163, 55)";
           i2.style.background="rgb(255, 163, 55)";
           i3.style.background="rgb(255, 163, 55)";
           i4.style.background="rgb(255, 163, 55)";
       }
         
     
       setTimeout("animate()",600);
     

       
       
   }
 
 
</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.
Simple Loader made with CSS and JS



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 V2.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />

  
 </head>
 <body onload="animate()">
<div id="box1" ></div>
<div id="box2" ></div>
<div id="box3" ></div>
    <div id="step1"></div>
    <div id="step2"></div>
    <div id="step3"></div>
    <div id="step4"></div>
    <div id="step5"></div>
  <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
 </body>
 <style>
 #box1{
 position:Absolute;
 top:40%;
 left:35%;
 width:120px;
 height:120px;
 background-color:rgb(123,218,205);
 border-radius:4px;
  opacity:0.75;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
 }
 #box2{
 position:Absolute;
 top:40%;
 left:35%;
 width:120px;
 height:120px;
 background-color:rgb(245,147,182);
 border-radius:4px;
 opacity:0.75;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
 }
  #box3{
 position:Absolute;
 top:40%;
 left:35%;
 width:120px;
 height:120px;
 background-color:rgb(131,203,237);
 border-radius:4px;
  opacity:0.75;
 -webkit-transition: all 0.7s ease;
 -moz-transition : all 0.7s ease 0s;
 }
 #step1{
 height:0px;
 width:0px;

 }
  #step2{
 height:0px;
 width:0px;
    
 }
  #step3{
 height:0px;
 width:0px;
 }
  #step4{
 height:0px;
 width:0px;
 }
#copyright{
    top:5px;
    left:0px;
    width:100%;
    height: 50px;
    color: white;
    text-align: center;
}
#copyright a{
    text-decoration: none;
    color:black;
}
  #step5{
 height:0px;
 width:0px;
 }
 </style>
 <script>
 function animate(){
  var b1 = document.getElementById("box1");
  var b2 = document.getElementById("box2");
  var b3 = document.getElementById("box3");
  var s1 = document.getElementById("step1");
  var s2 = document.getElementById("step2");
  var s3 = document.getElementById("step3");
  var s4 = document.getElementById("step4");
  var s5 = document.getElementById("step5");
     
     
  if(s1.style.opacity!="0")
  {
b3.style.left="52%";
b2.style.left="46%";
b1.style.left="40%";
b1.style.transform="rotate(-40deg)";
b2.style.transform="rotate(-40deg)";
b3.style.transform="rotate(-40deg)";
    s1.style.opacity="0";
    s2.style.opacity="1";
  
  }
  else if(s2.style.opacity!="0")
{
b3.style.transform="rotate(70deg)";
b2.style.transform="rotate(70deg)";
b1.style.transform="rotate(70deg)";
b2.style.left="40%";
b3.style.left="40%";
b1.style.left="35%";
    s2.style.opacity="0";
    s3.style.opacity="1";
}
else if(s3.style.opacity!="0")
{
b3.style.left="35%";
b2.style.left="35%";
b1.style.left="35%";
b1.style.transform="rotate(90deg)";
b2.style.transform="rotate(120deg)";
b3.style.transform="rotate(150deg)";
        s3.style.opacity="0";
        s4.style.opacity="1";
}
else if(s4.style.opacity!="0")
{
b1.style.transform="rotate(-90deg)";
b2.style.transform="rotate(-120deg)";
b3.style.transform="rotate(-150deg)";
s4.style.opacity="0";
        s5.style.opacity="1";
}
else if(s5.style.opacity!="0")
{
b1.style.transform="rotate(0deg)";
b2.style.transform="rotate(0deg)";
b3.style.transform="rotate(0deg)";
s5.style.opacity="0";
s1.style.opacity="1";
}

 setTimeout("animate()",400);
 }
 </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.
Fully responsive Skype like login form with added functionality



Video included at the bottom of the page.

Here's the code Snippet:



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Skype Like Login 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>
<div id="background">
<div id="container-fluid">
<div id="loginForm">
<div id="logo"></div>
<div id="contactForm">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder=" email address">
</div>
</br>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder=" password">
</div>
<button type="submit" class="btn btn-info btn-lg">sign in </button>
</form>
<div id="newAcc">Create a new account</div>
</div>
<div id="socialButtons">
<a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="fb"></div></a>
<a href="https://www.twitter.com/iezzUsama"><div id="twitter"></div></a>
</div>
<div id="copyright">
<a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</p></a>
</div>
<div id="upperbar">
<p id="loginText" style="line-height:2.5;-webkit-margin-start:20px;opacity:0.7;"><b>Login</b></p>
<div id="close" onclick="closer()"></div>
<div id="minimize" onclick="minimize()"></div>
</div>
</div>
</div>
</div>
</body>

<style>
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(http://www.wallpapersfolder.com/user-content/uploads/wall/o/2013/10/big-tree-on-the-meadow.jpg);
background-size:100% 100%;

}

#loginForm{
position:absolute;
top:10%;
left:36%;
width:28%;
height:80%;
background-color:white;

  -webkit-transition:all 0.7s ease;
  -moz-transition:all 0.7s ease 0s;

}
#logo{
position:absolute;
top:8%;
height:30%;
left:5%;
width:90%;
background-image:url(https://skypeblogs.files.wordpress.com/2013/09/skype-logo-feb_2012_rgb_500.png);
background-size:100% 100%;

  -webkit-transition:all 0.25s ease;
  -moz-transition:all 0.25s ease 0s;

}

#contactForm{
position:absolute;
top:45%;
left:10%;
width:80%;
height:45%;

  -webkit-transition:all 0.25s ease;
  -moz-transition:all 0.25s ease 0s;

}

.btn{
border-radius:13px;
right:0px;

}

.form-control{
border:1px solid lightblue;
border-radius:0px;
border-left-color:lightblue;
}

#newAcc{
position:absolute;
bottom:36%;
height:10%;
right:-2%;
width:56%;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Plus_in_circle.svg/155px-Plus_in_circle.svg.png");
background-size:14% 100%;
background-repeat:no-repeat;
text-align:right;
opacity:0.7;
cursor:pointer;
cursor:hand;



}

#newAcc:hover{
opacity:1;

}
#socialButtons{
position:absolute;
bottom:5%;
width:50%;
left:25%;
height:8%;

  -webkit-transition:all 0.25s ease;
  -moz-transition:all 0.25s ease 0s;

}

#fb{
position:absolute;
bottom:0%;
width:35px;
left:25%;
height:35px;
background-image:url(http://i781.photobucket.com/albums/yy99/ashleyryan85/1388396429_facebook_zps316d20b8.png);
background-size:100% 100%;
opacity:0.6;
cursor:pointer;
cursor:hand;

}

#fb:hover{
opacity:1;

}

#twitter{
position:absolute;
bottom:0%;
width:35px;
right:25%;
height:35px;
background-image:url(http://www.yogarecords.com/logos/icon-twitter.png);
background-size:100% 100%;
opacity:0.6;
cursor:pointer;
cursor:hand;

}

#twitter:hover{
opacity:1;

}

#copyright{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:21px;
text-align:center;

  -webkit-transition:all 0.25s ease;
  -moz-transition:all 0.25s ease 0s;
}

#copyright a{
text-decoration:none;
color:black;
}

#upperbar{
position:absolute;
top:0px;
left:0px;
height:40px;
width:100%;
z-index:20;
}

#close{
position:absolute;
top:5px;
right:4px;
height:20px;
width:20px;
background-image:url(http://www.leadacity.net/webroot/images/global/icons/icon-nav-close.png);
background-size:100% 100%;
opacity:0.4;
}

#minimize{
position:absolute;
top:9px;
right:27px;
height:20px;
width:20px;
background-image:url(http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/rounded-glossy-black-icons-symbols-shapes/020739-rounded-glossy-black-icon-symbols-shapes-minimize.png);
background-size:100% 100%;
opacity:0.4;

}

#close:hover,#minimize:hover{
opacity:0.7;
cursor:pointer;
cursor:hand;


}

@media only screen and (max-width:1335px)
{
#newAcc{
width:60%;

}

}

@media only screen and (max-width:1126px)
{
#newAcc{
font-size:13px;

}

}

@media only screen and (max-width:1085px)
{
#newAcc{
bottom:16%;
width:64%;
background-size:15% 100%;
line-height:2;

}

}

@media only screen and (max-width:1023px)
{
#loginForm{
width:35%;
left:32.5%;

}
#newAcc{
bottom:35%;
}

}

@media only screen and (max-width:850px)
{
#loginForm{
width:40%;
left:30%;

}

}

@media only screen and (max-width:720px)
{
#loginForm{
width:45%;
left:27.5%;

}

}

@media only screen and (max-width:658px)
{
#loginForm{
width:50%;
left:25%;

}
#newAcc{
bottom:30%;
}
}

@media only screen and (max-width:578px)
{
#loginForm{
width:60%;
left:20%;

}
#newAcc{
bottom:20%;
}

}


@media only screen and (max-width:487px)
{
#loginForm{
width:70%;
left:15%;

}
#newAcc{
opacity:0;
}

}

@media only screen and (max-width:410px)
{
#loginForm{
width:80%;
left:10%;


}
}

@media only screen and (max-width:361px)
{
#fb{
left:10%;

}
#twitter{
right:10%;
}
}

</style>

<script>
function minimize(){
var logform = document.getElementById("loginForm");
var logo = document.getElementById("logo");
var cform = document.getElementById("contactForm");
var social=document.getElementById("socialButtons");
var developer=document.getElementById("copyright");

if(logform.style.height!="40px")
{
logform.style.height="40px";
logform.style.top="0px";
logo.style.opacity="0";
cform.style.display="none";
cform.style.opacity="0";
social.style.display="none";
social.style.opacity="0";
developer.style.display="none";
developer.style.opacity="0";
}
else
{
logform.style.height="80%";
logform.style.top="10%";
logo.style.opacity="1";
cform.style.display="block";
cform.style.opacity="1";
social.style.display="block";
social.style.opacity="1";
developer.style.display="block";
developer.style.opacity="1";


}

}

function closer(){
var loginform = document.getElementById("loginForm");
loginform.style.opacity="0";
loginform.style.display="none";
}

</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)