C# Corner
Tech
News
Videos
Forums
Trainings
Books
Events
More
Interviews
Jobs
Live
Learn
Career
Members
Blogs
Challenges
Certifications
Bounties
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Animated Flag Using jQuery
WhatsApp
Arpit Jain
12y
11
k
0
1
25
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
People also reading
Membership not found