Animated Text Revealer

by Unknown 07:34 3 comments
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.
Labels:

About author: Usama Moin

I am Usama Moin,author and co-founder of roundCube,I love writing codes and stuff.

3 comments:

Subscribe to: Post Comments (Atom)