Tiger Bird Webdesign: Glowing Tabs and Boxes with CSS Animation and JavaScript

Glowing Tabs and Boxes with CSS Animation and JavaScript

Cats
Dogs
Monkeys

"Miau, miau," says the cat.

"Wuff, wuff," barks the dog.

"I need some bananas," says the monkey.

Create some glowing tabs and boxes with CSS animation and JavaScript!

If you click one of the tabs shown above the related text box will fade in into the front of the screen. As described in the previous posts we use the CSS animation property. This time the animation should fire when a tab is clicked so we use the JavaScript onclick event and assign to each tab a different function. Clicking a tab applies a specific value to the CSS animation property invoking the glowing effect. The JavaScript syntax is as follows:

document.getElementById("ID of the tab").style.WebkitAnimation="value details";
document.getElementById("ID of the tab").style.animation="value details";

If one tab is glowing the rest should be transparent therefore the other animation properties have no value describing with "". The same time a tab is glowing its related text box should also visible which is done by setting the z-index to "2". The syntax is document.getElementById("the ID of the box").style.zIndex="2";

HTML, CSS and JavaScript Code

<html>
  <head>
  <style>
   #ul33{
    list-style:none;
    position:absolute;
    text-align:center;
    font-weight:bold;
    top:10px;
    }
    
    #cats{
    width:80px;
    height30px;
    background-color:white;
    color:navy;
    text-shadow:1px 1px 5px navy;
    box-shadow:;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5; 
    visibility:visible;
    -webkit-animation:;
    animation:;
    }
    
    @-webkit-keyframes fadeIn33{
    from{box-shadow:0px 0px 0px;opacity:0.5;}
    to{box-shadow:1px 1px 30px #FFCCFF,-1px -1px 30px #FF00FF;opacity:1;visibility:visible;}
    }

@keyframes fadeIn33{
    from{box-shadow:0px 0px 0px;opacity:0.5;}
    to{box-shadow:1px 1px 30px #FFCCFF,-1px -1px 30px #FF00FF;opacity:1;visibility:visible;}
    }

#dogs{
    width:80px;
    height30px;
    background-color:white;
    text-shadow:1px 1px 5px navy;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    }
    
     #monkeys{
    width:80px;
    height30px;
    background-color:white;
    text-shadow:1px 1px 5px navy;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    }
    
    #box33{
    padding:10px;
    }
    
    #box33_1{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    z-index:;
    }
    
     #box33_2{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    visibility:hidden;
    z-index:;
    }
    
     #box33_3{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    visibility:hidden;
    z-index:;
    }
  </style>
  
  
  
  </head>
<body>
  <script>
    function highlight1(){
    document.getElementById("cats").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("cats").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("dogs").style.WebkitAnimation="";
    document.getElementById("dogs").style.WebkitAnimation="";
    document.getElementById("dogs").style.animation="";
    document.getElementById("monkeys").style.WebkitAnimation="";
    document.getElementById("monkeys").style.animation="";
    document.getElementById("box33_1").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("box33_1").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("box33_1").style.zIndex="2";
    document.getElementById("box33_2").style.WebkitAnimation="";
    document.getElementById("box33_2").style.animation="";
    document.getElementById("box33_2").style.zIndex="1";
    document.getElementById("box33_3").style.WebkitAnimation="";
    document.getElementById("box33_3").style.animation="";
    document.getElementById("box33_3").style.zIndex="1";
    }
    
   function  highlight2(){
   document.getElementById("cats").style.WebkitAnimation="";
   document.getElementById("cats").style.animation="";
   document.getElementById("monkeys").style.WebkitAnimation="";
   document.getElementById("monkeys").style.animation="";
   document.getElementById("dogs").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("dogs").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_1").style.WebkitAnimation="";
   document.getElementById("box33_1").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_2").style.zIndex="2";
   document.getElementById("box33_2").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_2").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.WebkitAnimation="";
   document.getElementById("box33_3").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   }
   
   function highlight3(){
   document.getElementById("monkeys").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("monkeys").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("cats").style.WebkitAnimation="";
   document.getElementById("cats").style.animation="";
   document.getElementById("dogs").style.WebkitAnimation="";
   document.getElementById("dogs").style.animation="";
   document.getElementById("box33_1").style.WebkitAnimation="";
   document.getElementById("box33_1").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_2").style.WebkitAnimation="";
   document.getElementById("box33_2").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_3").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.zIndex="2";
   }
  </script>
  
  
  <div id="bg33">
    
  <ul id="ul33">
<li id="cats" onclick="highlight1()">Cats</li>
<li id="dogs" onclick="highlight2()">Dogs</li>
<li id="monkeys"onclick="highlight3()">Monkeys</li>
</ul>
<div class="box33" id="box33_1">
      "Miau, miau," says the cat.
    </div>
<div class="box33" id="box33_2">
      "Wuff, wuff," barks the dog.
    </div>
<div class="box33" id="box33_3">
      "I need some bananas," says the monkey.
    </div>
</div>
</body>
</html>

Tiger Bird Webdesign

Tuesday, 10 February 2015

Glowing Tabs and Boxes with CSS Animation and JavaScript

HTML, CSS and JavaScript Code

No comments:

Post a Comment