Full Screen Waving Indian Flag Animation - HTML, CSS & JavaScript
<!-- Happy Independence Day -->
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- single-file HTML, CSS and JavaScript Full Screen page Waving Indian Flag ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Pure CSS Waving Indian Flag</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
/* Exactly 50px space on all sides */
padding: 50px;
}
/* ======= FULLSCREEN FLAG CONTAINER ======= */
.flag {
position: relative;
/* Full viewport width and height minus 50px space on both sides (100px total) */
width: calc(100vw - 100px);
height: calc(100vh - 100px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
white-space: nowrap;
overflow: hidden;
}
.flag-element {
position: relative;
/* Dynamic percentage width to smoothly stretch slices across full screen */
width: 0.333%;
height: 100%;
display: inline-block;
animation: wave 1.2s ease-in-out infinite alternate;
/* Pure CSS Tricolor Stripes */
background: linear-gradient(180deg,
#FF9933 0%, #FF9933 33.33%,
#FFFFFF 33.33%, #FFFFFF 66.66%,
#138808 66.66%, #138808 100%
);
}
/* ======= RESPONSIVE ASHOKA CHAKRA OVERLAY ======= */
.chakra {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Dynamically scales proportionally to screen size */
width: 25vh;
height: 25vh;
max-width: 25vw;
max-height: 25vw;
z-index: 10;
pointer-events: none;
}
/* ======= WAVING ANIMATION ======= */
@keyframes wave {
0% {
transform: translateY(12px);
}
100% {
transform: translateY(-12px);
}
}
</style>
</head>
<body>
<!-- Fullscreen Waving Flag -->
<div class="flag">
<!-- SVG Ashoka Chakra (24 Spokes) -->
<svg class="chakra" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000080" stroke-width="4" fill="none"/>
<circle cx="50" cy="50" r="6" fill="#000080"/>
<!-- 24 Spokes -->
<g stroke="#000080" stroke-width="2">
<line x1="50" y1="50" x2="50" y2="5"/><line x1="50" y1="50" x2="50" y2="95"/>
<line x1="50" y1="50" x2="5" y2="50"/><line x1="50" y1="50" x2="95" y2="50"/>
<line x1="50" y1="50" x2="18.18" y2="18.18"/><line x1="50" y1="50" x2="81.82" y2="81.82"/>
<line x1="50" y1="50" x2="81.82" y2="18.18"/><line x1="50" y1="50" x2="18.18" y2="81.82"/>
<line x1="50" y1="50" x2="10.87" y2="32.64"/><line x1="50" y1="50" x2="89.13" y2="67.36"/>
<line x1="50" y1="50" x2="32.64" y2="10.87"/><line x1="50" y1="50" x2="67.36" y2="89.13"/>
<line x1="50" y1="50" x2="67.36" y2="10.87"/><line x1="50" y1="50" x2="32.64" y2="89.13"/>
<line x1="50" y1="50" x2="89.13" y2="32.64"/><line x1="50" y1="50" x2="10.87" y2="67.36"/>
<line x1="50" y1="50" x2="6.7" y2="41.32"/><line x1="50" y1="50" x2="93.3" y2="58.68"/>
<line x1="50" y1="50" x2="41.32" y2="6.7"/><line x1="50" y1="50" x2="58.68" y2="93.3"/>
<line x1="50" y1="50" x2="58.68" y2="6.7"/><line x1="50" y1="50" x2="41.32" y2="93.3"/>
<line x1="50" y1="50" x2="93.3" y2="41.32"/><line x1="50" y1="50" x2="6.7" y2="58.68"/>
</g>
</svg>
</div>
<!-- Self-Contained Vanilla JavaScript Data -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var flag = document.getElementsByClassName('flag')[0];
var totalSlices = 300; // Generates 300 vertical slices for a smooth wave across large displays
for (var i = 0; i < totalSlices; i++) {
var flagElement = document.createElement('div');
flagElement.className = 'flag-element';
// Wave animation delay per slice
flagElement.style.animationDelay = (i * 6) + 'ms';
flag.appendChild(flagElement);
}
});
</script>
</body>
</html>
No comments:
Post a Comment