| 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 | |
Animated Flag Using jQuery
In this blog you will learn how to wish independence day in coders style.

Join the conversation! Your thoughts help the community grow.