code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dussehra Animation</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #0d0d0d;
color: white;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
#jaiShreeRam, #happyDussehra {
font-size: 4rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
animation: glowText 1s infinite alternate;
}
#jaiShreeRam {
opacity: 0;
animation: fadeIn 3s forwards, fadeOut 2s 5s forwards;
}
#happyDussehra {
opacity: 0;
color: #FFD700;
text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red;
}
@keyframes glowText {
0% {
text-shadow: 0 0 10px red, 0 0 20px orange, 0 0 30px yellow;
}
100% {
text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red;
}
}
#ravaan {
display: none;
width: 300px;
height: 500px;
background: url('https://i.pinimg.com/originals/b8/3c/9f/b83c9fadc3e06c9a39e98088d4402318.png') no-repeat center/cover;
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
}
#ravaan.onFire {
animation: fireShadow 2s forwards, disappear 4s 2s forwards;
}
#arrow {
display: none;
width: 200px;
height: 10px;
background-color: #8b4513;
position: absolute;
top: 55%;
left: -200px;
border-radius: 5px;
animation: moveArrow 5s forwards;
}
#arrow:before {
content: '';
width: 30px;
height: 20px;
background-color: gray;
position: absolute;
right: -30px;
top: -5px;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
#fire {
display: none;
width: 50px;
height: 50px;
background: radial-gradient(circle, red, orange, yellow);
border-radius: 50%;
position: absolute;
top: -15px;
right: -35px;
animation: fireFlicker 0.2s infinite alternate;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes moveArrow {
0% { left: -200px; }
50% { left: 45%; top: 55%; transform: translateX(-50%); }
100% { left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }
}
@keyframes fireFlicker {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.1); opacity: 0.9; }
}
@keyframes fireShadow {
0% { box-shadow: 0 0 0px transparent; }
100% { box-shadow: 0 0 30px orange, 0 0 50px red, 0 0 70px yellow; }
}
@keyframes disappear {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(5); opacity: 0; }
}
.cracker {
display: none;
position: absolute;
width: 10px;
height: 10px;
background-color: yellow;
animation: explode 1s forwards;
border-radius: 50%;
}
.cracker:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, red, orange, yellow);
animation: explode 1s forwards;
}
</style>
</head>
<body>
<div id="jaiShreeRam">Jai Shree Ram</div>
<div id="ravaan"></div>
<div id="arrow">
<div id="fire"></div>
</div>
<div id="happyDussehra">Happy Dussehra</div>
<script>
let letterIndex = 0;
const jaiShreeRam = document.getElementById('jaiShreeRam');
const ravaan = document.getElementById('ravaan');
const arrow = document.getElementById('arrow');
const fire = document.getElementById('fire');
const happyDussehra = document.getElementById('happyDussehra');
function showJaiShreeRam() {
const text = "Jai Shree Ram";
let interval = setInterval(() => {
if (letterIndex < text.length) {
jaiShreeRam.innerHTML = text.slice(0, ++letterIndex);
} else {
clearInterval(interval);
setTimeout(() => {
jaiShreeRam.style.display = 'none';
showRavaan();
}, 2000);
}
}, 300);
}
function showRavaan() {
ravaan.style.display = 'block';
setTimeout(shootArrow, 2000);
}
function shootArrow() {
arrow.style.display = 'block';
fire.style.display = 'block';
setTimeout(() => {
arrow.style.display = 'none'; // Hide the arrow after striking
triggerRavaanFire();
}, 4500); // Adjust the timing so the arrow strikes before triggering the fire
}
function triggerRavaanFire() {
ravaan.classList.add('onFire'); // Apply fire effect to Ravan
showCrackers();
setTimeout(() => {
ravaan.style.display = 'none';
showHappyDussehra();
}, 4000);
}
function showCrackers() {
for (let i = 0; i < 20; i++) {
let cracker = document.createElement('div');
cracker.className = 'cracker';
cracker.style.top = `${Math.random() * window.innerHeight}px`;
cracker.style.left = `${Math.random() * window.innerWidth}px`;
document.body.appendChild(cracker);
cracker.style.display = 'block';
cracker.style.backgroundColor = 'orange'; // Firework color
}
}
function showHappyDussehra() {
happyDussehra.style.opacity = '1';
}
showJaiShreeRam();
</script>
</body>
</html>
Top comments (0)