Post
Ask Question

Animated Flag Using jQuery

Want to wish Happy independence day to every one? What will you do. Share image , write text or else. But i have a programmer style of wishing. What about wishing by creating your own animated flag. Just check out the below code to do it.

CSS
#org{
display:block;
width:220px;
height:50px;
background-color:rgba(255, 71, 0, 0.84);
box-shadow:#FF3908 0px 100px 1500px;
}
#white{
display:block;
width:220px;
height:50px;
background-color:rgba(255, 255, 255, 0.84);
box-shadow:#FFFFFF 0px 100px 1500px;

}
#blue{
display:block;
width:20%;
height:50px;
margin:0 0 0 40%;
box-shadow:#084DFF 0px 100px 1500px;
border-radius:50%;
}
#gree{
display:block;
width:220px;
height:50px;
background-color:rgba(51, 148, 5, 0.84);
box-shadow:#57DB19 0px 100px 1500px;

}
#stick{
display:block;
width:5px;
height:300px;
position:fixed;
background-color:rgba(51, 148, 5, 0.84);
box-shadow:#45EE1B 0px 100px 1500px;

}

HTML


<body>
<div id="flag">
<div id="stick"> Happy Independence
</div>
<div id="org"></div>
<div id="white"><img id="blue" src="http://upload.wikimedia.org/wikipedia/commons/e/e4/Spinning_Ashoka_Chakra.gif" />
</div>
<div id="gree">Day</div>
</div>

jQuery


$(document).ready(function(){
setInterval(fun,2000);
});
function fun(){
$("#org").effect("pulsate",5000);
$("#white").toggle("pulsate",3000);
$("#gree").effect("pulsate",2000);
$("#stick").effect("pulsate",5000);
}

Happy Independence Day to every one. You can Check the Output Here
Next Recommended Reading How to Add Item and Edit Row using PopUp Dialog in HTML Table using JQuery