About

Simple "Happy Birthday" animation in HTML involves using HTML, CSS, and a bit of JavaScript.

IT in Hindi May 29, 2024


Creating a simple "Happy Birthday" animation in HTML involves using HTML, CSS, and a bit of JavaScript. Here's a basic example that includes a greeting, some animated balloons, and text animation.






HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Birthday Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="balloon balloon1"></div>
        <div class="balloon balloon2"></div>
        <div class="balloon balloon3"></div>
        <div class="balloon balloon4"></div>
        <h1 class="message">Happy Birthday <span id="name">[Name]</span>!</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

-------------------------------------------------------------------


CSS (style.css):

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #87CEEB;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}

.container {
    position: relative;
    text-align: center;
}

.balloon {
    position: absolute;
    bottom: -150px;
    width: 50px;
    height: 70px;
    border-radius: 0 0 25px 25px;
    background: red;
    animation: float 5s ease-in infinite;
}

.balloon::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 2px;
    height: 20px;
    background: black;
    transform: translateX(-50%);
}

.balloon1 { left: 10%; background: #FF6F61; animation-delay: 0s; }
.balloon2 { left: 30%; background: #6B5B95; animation-delay: 1s; }
.balloon3 { left: 50%; background: #88B04B; animation-delay: 2s; }
.balloon4 { left: 70%; background: #FFA07A; animation-delay: 3s; }

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-300px); }
    100% { transform: translateY(0); }
}

.message {
    position: absolute;
    width: 100%;
    font-size: 3em;
    color: white;
    text-shadow: 2px 2px 4px #000;
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#name {
    color: yellow;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
}

-------------------------------------------------------------

JavaScript (script.js):

document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const name = urlParams.get('name') || 'Friend';
    document.getElementById('name').textContent = name;
});

------------------------------------------------------

http://yourdomai.com/index.html?name=Dhoni


Instead of Dhoni, you can enter the name of a friend or family member.

Explanation

  • HTML: Defines the structure, including a container for the balloons and the birthday message.
  • CSS: Styles the balloons and animates them to float up and down using the @keyframes rule. The message fades in when the page loads.
  • JavaScript: Ensures the message animation plays after the page content is loaded.

You can copy these code snippets into your own files (index.html, style.css, script.js)

and open the index.html file in a web browser to see the animation in action.

Adjust the colors, sizes, and timing to fit your needs.




Tags:

Post a Comment

0 Comments