Tiger Bird Webdesign: December 2014

Wednesday, 10 December 2014

Christmas Candle With jQuery

Christmas Candle With jQuery

Place the mouse pointer over the wick
to put on the fire and click to blow it out.

In my last post I designed a Christmas tree so I felt like making another thing related to Christmas.

This time it is a Christmas candle which you can lit and blow out. The fire and the candle parts are created by div elements. We want to lit the fire when we roll over the candle wick with the mouse. This is done by the mouseover event inside the HTML code.

Now, we want that the candle glimmers in the dark so we use jQuery because with it it's easy to write a code for animated effects. The glimmer effect is created by changing the opacity of the div fire element with the following syntax animate( {opacity:"+= or -= some number between 0 to 1"},{duration:milliseconds});. "+=" creates a fade in effect and "-=" a fade out effect.

By clicking the fire, the candle should stop glimmering. We put the onclick event inside the HTML code and connect it with the function called blow(). jQuery hide() hides the fire element.

HTML & CSS & JavaScript Code

<!Doctypte html>
<html>
<head>
 <title>Christmas Candle With jQuery </title>
 
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

<script>

var a = document.getElementById("candle_fire_two");

function ignite(){ 

 setInterval(glimmer,1000); 

function glimmer() {
$("#candle_fire_one").animate(
{opacity:"+=0.7"},{duration:900}
);
$("#candle_fire_one").animate(
{opacity:"-=0.5"},{duration:900}
);
$("#candle_fire_two").animate( 
{opacity:"+=0.6"},{duration:1000}
);
$("#candle_fire_two").animate(
{opacity:"-=0.3"},{duration:1000}
);

var b = document.getElementById("candle_fire_two");
b.addEventListener("click",blow,false);
b.attachEvent("click",blow);

function blow() {
$("#candle_fire_one").hide();
$("#candle_fire_two").hide();
}

}
}

</script>
 
<style>


#candle_base
{position:relative;
top:100px;
left:105px;
width:50px;
height:75px;
background-color:E60000;
}

#candle_top
{position:absolute;
top:-10px;
width:50px;
height:20px;
background-color:orange;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}

#candle_bottom
{position:absolute;
top:65px;
width:50px;
height:20px;
background-color:E60000;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
z-index:2;
}


#candle_wick
{position:absolute;
top:-20px;
left:23px;
width:5px;
height:20px;
background-color:#663300;
}


#candle_fire_one
{position:absolute;
left:19px;
top:-25px;
width:15px;
height:20px;
background-color:blue;
box-shadow:
-1px -1px 20px blue,
-1px -1px 50px blue,
1px 1px 20px blue,
1px 1px 50px blue;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
opacity:0;
}


#candle_fire_two
{position:absolute;
left:12px;
top:-65px;
width:30px;
height:60px;
background-color:#FFFF66;
opacity:0;
box-shadow:
1px 1px 50px #FFFF66,
-1px -1px 50px #FFFF66,
1px 1px 10px #FFFF66,
-1px -1px 10px #FF3300,
-1px -1px 30px #FFFF66,
2px 2px 20px #FFFF66,
-2px -2px 20px #FFFF66,
3px 3px 50px #FF3300,
-3px -3px 50px #FF3300,
4px 4px 100px #FFFF66,
-4px -4px 100px #FF3300;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#left_ball
{position:absolute;
top:50px;
left:-30px;
width:60px;
height:60px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#75A319;
z-index:3;
}

#right_ball
{position:absolute;
top:60px;
left:20px;
width:40px;
height:40px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#DAB5FF;
z-index:3;
}


#back_ball
{position:absolute;
top:20px;
left:30px;
width:70px;
height:70px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#CCFF66;
z-index:0;
}


#bg23
{position:relative;
left:20px;
width:250px;
height:250px;
background-color:black;
-webkit-border-radius:10%;
-moz-border-radius:10%;
border-radius:10%;
}


</style>
</head>

<body>
<div id="bg23">
 <div  id="candle_base">
  <div id="candle_top">
</div>
<div id="candle_bottom">
</div>
<div  id="candle_wick">
</div>
<div id="candle_fire_one">
</div>
<div onmouseover="ignite()" onclick="blow()"  id="candle_fire_two">
</div>
<div id="left_ball">
</div>
<div id="right_ball">
</div>
<div id="back_ball">
</div>
</div>
</body>
</html>

Open The Door With CSS Hover

Open the Door!

Drag the mouse over the door and open it!

The door image is placed inside the door frame created with a div element. The door itself is a png image file.

The CSS transform-origin:right property lets the door shrink from the left to the right side which provides the impression as if the door is opening if you put the cursor on top of the door. To show the effect in all browsers the prefixes -ms- for Internet Explorer and -webkit- for all other browsers have to be put in front of transform-origin.

The duration of the animation is set to 5 seconds with the name "open". The @keyframes property describes details of the animation "open". We want to make a lateral rotation of the door therefore we use the rotateY(deg) property. @keyframes needs the prefix -webkit- as well.

Note:the hover effect is not working on a touch screen.

CSS & HTML Code


<html>
<head>
<title>Open the Door!</title>
<style>

#door_frame
{position:absolute;
top:50px;
left:100px;
width:200px;
height:300px;
background-color:#993300;
border-style:outset;
border-color:#CC3300;
border-width:3px;
}

#inside
{position:absolute;
top:10px;
left:8px;
height:290px;
width:184px;
background-color:#00CED1;
}

#door
{position:absolute;
top:-9px;
left:-9px;
}



.animation:hover
{
-ms-transform-origin:right;
-webkit-transform-origin:right;
transform-origin:right;
-webkit-animation: open 5s;
animation: open 5s;
}


@-webkit-keyframes open
{
0%{-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);}

100%{-webkit-transform:rotateY(90deg);
transform:rotateY(90deg);}

}


@keyframes open
{
0%{-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);}

100%{-webkit-transform:rotateY(90deg);
transform:rotateY(90deg);}

}
</style>
</head>

<body>

<div id="door_frame">
<div id="inside">
<div class="animation" id="door">
<img src="door.png"></img>
</div>
</div>
</div>

</body>
</html>

Tuesday, 9 December 2014

Blinking Xmas Tree With JavaScript Math.random()

Click on the top and let it blink

It's Xmas time! When I was walking in downtown seeing all this beautiful Xmas decorations I was inspired to make my own Xmas tree with JavaScript.

A tree usually has a crown and trunk. The crown of the Xmas tree is made of 3 div elements. 1 green div element has white div elements on the right and left side creating a triangle. The decoration balls are also div elements with a border-radius of 50% defined in CSS.

Now the Xmas tree is ready to blink. So let's look at the JavaScript code. We want that the balls change colours randomly in a certain interval. The Math object with the random () method generates random numbers between 0 and 1; the syntax is Math.random().

Next, we define the colours for each ball with document.getElementById("id of the element").style.backgroundColor=#some color. Now, with Math.random() we generate random numbers and if the number is smaller than 0.5 the balls have colour A and if it is bigger than 0.5 they have colour B.

The method setTimeout evaluates the function for each half second generating random numbers and creating the blinking effect.

Save the CSS file with XMas_tree.css and the JavaScript file with XMas_tree.js otherwise it will not work. Our you can change the file name of css and js in the HTML code.

HTML Code



<!Doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css"  href="XMas_tree.css"></style>
<script src="XMas_tree.js" type="text/javascript" language="Javascript"></script> 
</head>

<body onload="blink()">

<div id="xmas_tree">

<div id="top_crown">
 <div id="top_left_cover">
</div>
<div id="top_right_cover">
</div>
<div class="balls" id="top_ball_one">
</div>
<div class="balls" id="top_ball_two">
</div>
</div>
<div id="mid_crown">
 <div id="mid_left_cover">
</div>
<div id="mid_right_cover">
</div>
<div class="balls" id="mid_ball_one">
</div>
<div class="balls" id="mid_ball_two">
</div>
<div class="balls" id="mid_ball_three">
</div>
</div>
<div id="trunk">
</div>
</div>

CSS Code


#xmas_tree
{position:relative;
left:200px;
width:300px;
height:300px;
}


#top_crown
{position:absolute;
top:50px;
width:110px;
height:50px;
background-color:#336600;
}


#top_left_cover
{position:absolute;
left:-30px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(135deg);
-moz-transform:skew(135deg);
-o-transform:skew(135deg);
-webkit-transform:skew(135deg);
transform:skew(135deg);
}

#top_right_cover
{position:absolute;
left:70px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(45deg);
-moz-transform:skew(45deg);
-o-transform:skew(45deg);
-webkit-transform:skew(45deg);
transformt:skew(45deg);
}


/*top balls*/

#top_ball_one
{position:absolute;
left:25px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50p%;
-webkit-border-raidus:50%;
border-radius:50%;
}


#top_ball_two
{position:absolute;
left:65px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}


/*middle crwon*/

#mid_crown
{position:absolute;
top:100px;
width:110px; 
height:50px;
background-color:#336600;
}
 
#mid_left_cover
{position:absolute;
left:-30px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(145deg);
-moz-transform:skew(145deg);
-o-transform:skew(145deg);
-webkit-transform:skew(145deg);
transform:skew(145deg);
}

#mid_right_cover
{position:absolute;
left:90px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(35deg);
-moz-transform:skew(35deg);
-o-transform:skew(35deg);
-webkit-transform:skew(35deg);
transformt:skew(35deg);
}




/*mid balls*/
#mid_ball_one
{position:absolute;
top:10px;
left:15px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}


#mid_ball_two
{position:absolute;
top:20px;
left:45px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#mid_ball_three
{position:absolute;
top:10px;
left:75px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}



#trunk
{position:absolute;
left:43px;
top:150px;
width:20px;
height:30px;
background-color:#663300
;
}

JavaScript Code



function blink(){
var r = Math.random();

if (r<0.5){
document.getElementById("top_ball_one").style.backgroundColor = "red";
document.getElementById("top_ball_two").style.backgroundColor = "#CCCCFF";
document.getElementById("mid_ball_one").style.backgroundColor = "#00FF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FF33CC";
document.getElementById("mid_ball_three").style.backgroundColor =" #33CCFF";
}

if (r>0.5){
document.getElementById("top_ball_one").style.backgroundColor = "blue";
document.getElementById("top_ball_two").style.backgroundColor = "lime";
document.getElementById("mid_ball_one").style.backgroundColor = "#FFFF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FFFF66";
document.getElementById("mid_ball_three").style.backgroundColor = "#FF5050";
}

setTimeout(blink,500);
}

Monday, 8 December 2014

Futuristic Clock With Javascript And jQuery

Futuristic Clock With JavaScript

How about a futuristic looking clock for a web widget?

For fade out and fade in animation we use JavaScript and jQuery.

The clock is designed with CSS. Each panel has its own div element. The opacity of the green squares is set to 0 meaning that they are basically invisible. The panel showing the actual time is another div element. Never put the div elements associated with the green squares inside the panel element! Because if you set JavaScript both to a parent and child elements the script will not fire. Both codes have to be in different elements.

Now, we have designed the clock and the squares so we are ready to make them work together. First of all, the time should be shown in the center panel so we create a Date() object with JavaScript. Get the hours with getHours(), the minutes with getMinutes() and the seconds with getSeconds() and concatenate the methods with the date object.

Next, for each second passed by a square should fade out and the next should fade in. This is can be done with the animate() method of jQuery which is a part of JavaScrip library and is very useful.

The elements are choosen through their ids with ("$id of the element") and the animation is created with animate({}). The details of the animation are described in the curly brackets. We want that the squares will fade in gradually so we use opacity:"+=1". After 1 s has passed we want to make sure that the same square will fade out so we write opacity:"-=1". Note that if you use hide() once the square has vanished the same square will never appear again.

To link the div squares with the seconds we use the if/else conditional. The if/else conditional is inside the clock() function so we can use the variables declared previously.

HTML Code


<!Doctype html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>


<!- - you can use your own file name - ->
<script src=”futuristic-black-clock.js”  type=”text/javascript” language=”Javascript”></script>

<link rel=”stylesheet” type = “text/css” href=”futuristic-black-clock.css”>
</head>

<body onload="clock()">
<div id="clock">
<div id="chronograph">
</div>
<div>
 <div id="square0">
</div>
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
<div id="square4">
</div>
<div id="square5">
</div>
<div id="square6">
</div>
<div id="square7">
</div>
<div id="square8">
</div>
<div id="square9">
</div>
</div>
</div>
</body>
</html>

JavaScript Code

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>


var c = document.getElementById("chronograph");
c.addEventListener("load", clock,true);

function zero(i){
if(i<10){
i = "0" + i;
}
return i;
}

function clock(){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
m = zero(m);
s = zero(s);
setTimeout(clock,1000);
document.getElementById("chronograph").innerHTML = h + ":"+ m + ":"+ s;


if(s==0){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:500});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:500});
  }

 else if (s==10){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==20){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==30){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==40){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==50){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 


 else if (s==1){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==11){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==21){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==31){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==41){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==51){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==2){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==12){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==22){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==32){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==42){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==52){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==3){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==13){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==23){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==33){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==43){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==53){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==4){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==14){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==24){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==34){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==44){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==54){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==5){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==15){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==25){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==35){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==45){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==55){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==6){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==16){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==26){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==36){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==46){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==56){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==7){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==17){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==27){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==37){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==47){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==57){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==8){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==18){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==28){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==38){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==48){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==58){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==9){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==19){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==29){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==39){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==49){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==59){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else{;}
 }

CSS Code

<style>




#clock
{position:relative;
top:150px;
left:250px;
width:125px;
height:95px;
background-color:black;
border-style:outset;
border-width:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
broder-color:black;
}

#chronograph
{position:absolute;
top:40px;
left:35px;
height:25px;
width:100px;
color:#19FF19;
font-weight:bold;
}

#square0
{position:absolute;
left:5px;
top:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square1
{position:absolute;
top:5px;
left:35px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square2
{position:absolute;
top:5px;
left:65px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square3
{position:absolute;
top:5px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square4
{position:absolute;
top:35px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square5
{position:absolute;
top:65px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square6
{position:absolute;
top:65px;
left:65px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square7
{position:absolute;
top:65px;
left:35px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square8
{position:absolute;
top:65px;
left:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square9
{position:absolute;
top:35px;
left:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}
</style>

Wednesday, 3 December 2014

Name Tag With Border Style

Fat Ladies

Here is another text design looking like a name tag of your clothes. The stitched are created with border-style: dashed. For the top use border-top-style and for the bottom use border-bottom-style. Change the text inside the label and make your own one!



<!Doctype html>
<html>

<head>

<style>
#label
{
width:300px;
height:100px;
top:30px;
left:100px;
background-color:white;
box-shadow:
1px 1px 5px gray,
-1px -1px 5px gray;
position:absolute;
}


#top_stitch_background
{
top:10px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}

#top_stitch
{top:10px;
border-top-style:dashed;
border-top-color:#708090; /*SlateGray*/
border-top-width:1px;
}


#brand_text
{font-size:200%;
top:30px;
text-align:center;
position:relative;
}

#bottom_stitch_background
{
top:50px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}


#bottom_stitch
{top:50px;
border-bottom-style:dashed;
border-bottom-color:#708090; /*SlateGray*/
border-bottom-width:1px;
}
</style>

</head>

<body>

<div id="label"> 

<div id="top_stitch_background">
<div id="top_stitch"></div>
</div>

<div id="brand_text"> Fat Ladies </div>

<div id="bottom_stitch_background">
<div id="bottom_stitch"></div>
</div>

</div >

Monday, 1 December 2014

Blinking Neon Sign With jQuery

Welcome!

You can spice up your website with some JavaScript animation. The example shows a text which fades out and fades in 10 times in a row with the while loop.

jQuery ―which uses the $ sign in front of each element ―makes it easy to write codes for animations. The blinking starts with the value var i=0 and finished after blinking for 10 times which is set as while(i<10). In function() you include the fadeOut() and fadeIn() methods to create the blinking effect. For details, have a look at the code!

CSS, HTML & JavaScript Code



<!Doctype HTML>

<html>

<head>
<title>Blinking Neon Sign With jQuery </title>

<style>


#welcome
{
position:absolute;
padding:40px;
font-size:500%;
color:white;
text-shadow:
2px 2px 10px DeepPink,
2px 4px 20px DeepPink,
2px 6px 30px DeepPink,
2px 8px 50px DeepPink;
}


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" language="Javascript">
</script>

<script>
//this is the jQuery code
var i=0
while(i<10){
$(document).ready(function(){
$("#welcome").fadeOut("slow").fadeIn("slow");
});
i++;
}
</script>



</head>

<body>

<div id="welcome">Welcome!</div>

</body>

</html>