Animated Flag Using jQuery

Arpit Jain
11y
10.8k
0
1

Blog

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