Home >Web Front-end >JS Tutorial >Happy Dusshera Animation

Happy Dusshera Animation

Barbara StreisandOriginal: 2024-10-12 20:32:02396browse

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>

The above is the detailed content of Happy Dusshera Animation. For more information, please follow other related articles on the PHP Chinese website!

animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Deno What’s New and Why You Should Care!!Next article：Deno What’s New and Why You Should Care!!

See more

Happy Dusshera Animation

code

Related articles