Interactive Waving Indian Flag Animation with Pole & Stair Base in HTML, CSS & JS
This single-file web project creates an interactive, realistic animated Indian Flag complete with a metallic flagpole, a decorative gold finial knob, and a structured three-tier pedestal base. Designed with a dark, modern background, the centerpiece features a 300x200 pixel flag hoisted at the top of a detailed 420px metallic pole.
The flag's waving motion is powered by Vanilla JavaScript and CSS keyframe animations. Upon page load, JavaScript dynamically splits the flag container into individual 1-pixel vertical slices. Each slice maps a shifted segment of the flag image (flag.jpg) and receives an incremental CSS animation delay. As these slices oscillate vertically in sequence, they produce a smooth, continuous ripple effect across the fabric that mimics wind blowing in real time. Built cleanly using HTML5, modern CSS flexbox layouts, and lightweight DOM manipulation, this self-contained script requires no external libraries or CDN dependencies to run smoothly i n andy browsaer.
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- single-file HTML, CSS and JavaScript web page that creates an Indian Flag with wave. ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Waving Indian Flag with Pole and Stairs Base</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* ======= MAIN WRAPPER ======= */
.flag-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.pole-and-flag {
display: flex;
align-items: flex-start; /* Flag connects to top of pole */
}
/* ======= FLAGPOLE / LOG ======= */
.flag-pole {
position: relative;
width: 12px;
height: 420px;
background: linear-gradient(90deg, #3a3a3a 0%, #a8a8a8 50%, #222222 100%);
border-radius: 6px 6px 0 0;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
z-index: 2;
}
/* Gold knob at top of the pole */
.flag-pole::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 22px;
background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
border-radius: 50%;
box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
}
/* ======= 3-TIER STAIR BASE ======= */
.stairs-base {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -300px; /* Aligns pole precisely to the center of stairs */
}
.stair {
height: 16px;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
border: 1px solid #777;
}
/* Top Step (Smallest) */
.stair-1 {
width: 80px;
background: linear-gradient(180deg, #e0e0e0 0%, #9e9e9e 100%);
}
/* Middle Step */
.stair-2 {
width: 140px;
background: linear-gradient(180deg, #d6d6d6 0%, #8d8d8d 100%);
}
/* Bottom Step (Widest) */
.stair-3 {
width: 200px;
background: linear-gradient(180deg, #cccccc 0%, #7c7c7c 100%);
}
/* ======= FLAG CONTAINER ======= */
.flag {
position: relative;
width: 300px;
height: 200px;
margin-top: 5px; /* Alignment near top of pole */
box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
white-space: nowrap;
}
.flag-element {
position: relative;
background: url('flag.jpg');
background-size: 300px 100%;
width: 1px;
height: 100%;
display: inline-block;
animation: wave 1.2s ease-in-out infinite alternate;
}
/* ======= WAVING ANIMATION ======= */
@keyframes wave {
0% {
top: 4px;
}
100% {
top: -8px;
}
}
</style>
</head>
<body>
<div class="flag-wrapper">
<div class="pole-and-flag">
<!-- Pole / Log on the left -->
<div class="flag-pole"></div>
<!-- Waving Flag connected to top of pole -->
<div class="flag"></div>
</div>
<!-- 3 Stairs Base connected to pole bottom -->
<div class="stairs-base">
<div class="stair stair-1"></div>
<div class="stair stair-2"></div>
<div class="stair stair-3"></div>
</div>
</div>
<!-- Pure Vanilla JavaScript (No External CDN Links) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var flagContainer = document.querySelector('.flag');
var flagWidth = flagContainer.offsetWidth;
for (var i = 0; i < flagWidth; i++) {
var flagElement = document.createElement('div');
flagElement.className = 'flag-element';
flagElement.style.backgroundPosition = -i + 'px 0';
// Gradually increase animation delay across width for wave effect
flagElement.style.animationDelay = (i * 8) + 'ms';
flagContainer.appendChild(flagElement);
}
});
</script>
</body>
</html>
No comments:
Post a Comment