Animated Happy Birthday Wishes Website using HTML, CSS, and JavaScript 🎉
Looking for a creative way to send happy birthday wishes animated to your loved ones? Instead of just sending a text or an image, you can surprise them with a beautiful birthday wishes animation built using HTML, CSS, and JavaScript. This unique project is a full animated happy birthday wishes website where every click reveals something new and magical.
🎁 What is this Birthday Wishes Project?
This code creates a three-page birthday wishes animation website that feels like a digital greeting card. The design includes smooth transitions, balloons, animated birthday messages, and even background music. The receiver clicks through each page to unlock heartfelt wishes, glowing text, and finally a special surprise gift.
✨ Main Features
- Multi-Page Layout: From a warm welcome to the final gift reveal, everything feels like an interactive journey.
- Animated Happy Birthday Text: Each letter of “Happy Birthday” appears with a fun bounce effect.
- Birthday Greetings Animated Balloons: Colorful balloons float across the screen to make the design lively.
- Personal Touch: Add a profile picture and name of the birthday person for a personalized experience.
- Gift Animation: A clickable gift box 🎁 that leads to the final birthday message.
- Music: Background audio plays automatically to make the greeting more memorable.
📄 How Does It Work?
The birthday animation website is created with a simple combination of HTML, CSS, and JavaScript:
1. HTML (Structure)
The HTML divides the project into three pages:
- Page 1: A welcome message with a “Click Here” button.
- Page 2: The animated happy birthday message with balloons, name, and profile photo.
- Page 3: A love message with roses as the final surprise.
CSS Animations
Each social media icon has its own unique hover animation effect:
- Facebook: Bounce with glowing blue border.
- Twitter: Tilt shake animation on hover.
- Instagram: Gradient glow with spinning border effect.
- YouTube: Pulse zoom animation.
- LinkedIn: Underline slide animation with glow.
- TikTok: Multi-color glowing shadow effect.
🌐 Social Media Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday My Love! 🎉</title>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600;700&family=Great+Vibes&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
position: relative;
overflow: hidden;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: #f00;
animation: confetti-fall 3s linear infinite;
}
@keyframes confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
#page1 {
background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
color: white;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.fireworks { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.firework {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
animation: explode 1.5s ease-out infinite;
}
@keyframes explode {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}
.main-title {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
text-align: center;
animation: epicZoom 2s ease-out, rainbow 3s linear infinite;
text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.5);
transform-style: preserve-3d;
}
@keyframes epicZoom {
0% { transform: scale(0) rotateY(180deg); opacity: 0; }
50% { transform: scale(1.3) rotateY(90deg); }
100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
@keyframes rainbow {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(360deg); }
}
.subtitle {
font-family: 'Dancing Script', cursive;
font-size: 2.5rem;
margin-top: 30px;
animation: glowPulse 2s ease-in-out infinite;
text-align: center;
}
@keyframes glowPulse {
0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #fff; transform: scale(1); }
50% { text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff; transform: scale(1.05); }
}
.start-btn {
margin-top: 50px;
padding: 25px 60px;
font-size: 1.5rem;
background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);
background-size: 300% 300%;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 700;
animation: btnPulse 1.5s ease-in-out infinite, gradientShift 3s ease infinite;
transition: all 0.3s;
font-family: 'Poppins', sans-serif;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
text-transform: uppercase;
letter-spacing: 2px;
}
@keyframes btnPulse {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.1) translateY(-10px); }
}
.start-btn:hover { transform: scale(1.2) rotate(5deg); box-shadow: 0 15px 60px rgba(255,255,255,0.6); }
.floating-emoji {
position: absolute;
font-size: 40px;
animation: float3D 4s ease-in-out infinite;
text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
@keyframes float3D {
0%, 100% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
25% { transform: translateY(-30px) translateX(20px) rotate(10deg) scale(1.1); }
50% { transform: translateY(-50px) translateX(-20px) rotate(-10deg) scale(1); }
75% { transform: translateY(-30px) translateX(20px) rotate(5deg) scale(1.1); }
}
#page2 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
animation: bgShift 10s ease infinite;
}
@keyframes bgShift {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(45deg); }
}
.message-container {
max-width: 800px;
position: relative;
animation: slideInRotate 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes slideInRotate {
0% { transform: translateX(-100vw) rotate(-720deg); opacity: 0; }
100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.message-box {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
padding: 60px;
border-radius: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
border: 2px solid rgba(255,255,255,0.3);
animation: morphing 8s ease-in-out infinite;
}
@keyframes morphing {
0%, 100% { border-radius: 40px 40px 40px 40px; }
25% { border-radius: 60px 40px 60px 40px; }
50% { border-radius: 40px 60px 40px 60px; }
75% { border-radius: 60px 40px 60px 40px; }
}
.message-title {
font-family: 'Great Vibes', cursive;
font-size: 4rem;
margin-bottom: 30px;
color: #fff;
animation: flipIn 1.5s ease-out;
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}
@keyframes flipIn {
0% { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.message-text { font-size: 1.3rem; line-height: 2; color: #fff; }
#page3 {
background: linear-gradient(45deg, #fa709a 0%, #fee140 50%, #30cfd0 100%);
background-size: 200% 200%;
animation: gradientShift 10s ease infinite;
}
.gallery-title {
font-family: 'Dancing Script', cursive;
font-size: 4rem;
color: #fff;
margin-bottom: 60px;
animation: rubberBand 1.5s ease-out;
text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
}
@keyframes rubberBand {
0% { transform: scale(0); }
30% { transform: scale(1.25); }
40% { transform: scale(0.75); }
50% { transform: scale(1.15); }
65% { transform: scale(0.95); }
75% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
max-width: 1200px;
width: 100%;
}
.photo-card {
background: white;
padding: 25px;
border-radius: 30px;
box-shadow: 0 15px 50px rgba(0,0,0,0.3);
animation: cardFlip 1s ease-out both;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
overflow: hidden;
}
.photo-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine { 0% { left: -50%; } 100% { left: 150%; } }
@keyframes cardFlip {
0% { transform: perspective(1000px) rotateY(180deg) scale(0); opacity: 0; }
100% { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; }
}
.photo-card:nth-child(1) { animation-delay: 0.2s; }
.photo-card:nth-child(2) { animation-delay: 0.4s; }
.photo-card:nth-child(3) { animation-delay: 0.6s; }
.photo-card:nth-child(4) { animation-delay: 0.8s; }
.photo-card:hover { transform: translateY(-20px) rotate(5deg) scale(1.05); box-shadow: 0 25px 70px rgba(0,0,0,0.5); }
.photo-placeholder {
width: 100%;
height: 220px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.photo-placeholder img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.photo-placeholder img.active { opacity: 1; }
.photo-caption { font-size: 1.2rem; color: #333; text-align: center; font-weight: 700; }
#page4 {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
animation: bgPulse 5s ease-in-out infinite;
}
@keyframes bgPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.final-message {
max-width: 900px;
text-align: center;
animation: zoomBounce 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes zoomBounce {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
.final-title {
font-family: 'Pacifico', cursive;
font-size: 5rem;
background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 40px;
animation: superPulse 2s ease-in-out infinite;
}
@keyframes superPulse {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.1) rotate(2deg); }
50% { transform: scale(1.2) rotate(0deg); }
75% { transform: scale(1.1) rotate(-2deg); }
}
.final-text {
font-size: 1.6rem;
color: #333;
line-height: 2;
margin-bottom: 50px;
animation: slideUp 1.5s ease-out 0.5s both;
font-weight: 600;
}
@keyframes slideUp {
0% { transform: translateY(100px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.cake-container { position: relative; display: inline-block; }
.cake {
font-size: 10rem;
display: inline-block;
animation: cakeSpin 3s ease-in-out infinite;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}
@keyframes cakeSpin {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(10deg) scale(1.1); }
50% { transform: rotate(-10deg) scale(1.2); }
75% { transform: rotate(10deg) scale(1.1); }
}
.sparkle { position: absolute; font-size: 2rem; animation: sparkleAnim 1.5s ease-in-out infinite; }
@keyframes sparkleAnim {
0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
50% { transform: scale(1) rotate(180deg); opacity: 1; }
}
.balloon-container { position: absolute; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.balloon { position: absolute; font-size: 60px; animation: floatUpBalloon 6s ease-in-out infinite; }
@keyframes floatUpBalloon {
0% { transform: translateY(100vh) rotate(0deg) scale(1); opacity: 1; }
50% { transform: translateY(50vh) rotate(180deg) scale(1.2); }
100% { transform: translateY(-10vh) rotate(360deg) scale(0.8); opacity: 0; }
}
.sound-control {
position: fixed; top: 20px; right: 20px; z-index: 1000;
background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
width: 60px; height: 60px; font-size: 1.5rem; cursor: pointer;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
animation: soundPulse 2s ease-in-out infinite; transition: transform 0.3s;
}
.sound-control:hover { transform: scale(1.2) rotate(15deg); }
@keyframes soundPulse {
0%, 100% { box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
50% { box-shadow: 0 5px 40px rgba(255,0,128,0.6); }
}
.nav-btn {
position: fixed; bottom: 40px; padding: 18px 40px;
background: linear-gradient(45deg, #667eea, #764ba2);
border: none; border-radius: 50px; cursor: pointer;
font-size: 1.2rem; font-weight: 700; color: white;
transition: all 0.3s; font-family: 'Poppins', sans-serif;
z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
animation: btnFloat 3s ease-in-out infinite;
}
@keyframes btnFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.nav-btn:hover { transform: scale(1.15) translateY(-5px); box-shadow: 0 15px 50px rgba(102,126,234,0.6); }
.prev-btn { left: 40px; }
.next-btn { right: 40px; }
.hidden { display: none; }
@media (max-width: 768px) {
.main-title { font-size: 3rem; }
.subtitle { font-size: 1.5rem; }
.start-btn { font-size: 1.2rem; padding: 20px 40px; }
.message-box { padding: 30px; }
.gallery-title { font-size: 2.5rem; }
.final-title { font-size: 3rem; }
.cake { font-size: 6rem; }
}
@media (max-width: 480px) {
.main-title { font-size: 2.5rem; }
.subtitle { font-size: 1.2rem; padding: 0 10px; }
.start-btn { font-size: 1rem; padding: 15px 30px; letter-spacing: 1px; }
.floating-emoji { font-size: 25px; }
.message-box { padding: 25px; }
.message-title { font-size: 2.5rem; }
.message-text { font-size: 1rem; line-height: 1.6; }
.gallery-title { font-size: 2rem; margin-bottom: 30px; }
.photo-grid { grid-template-columns: 1fr; gap: 25px; padding: 0 10px; }
.photo-card { padding: 15px; }
.photo-placeholder { height: 200px; }
.photo-caption { font-size: 1rem; }
.final-title { font-size: 2.5rem; }
.final-text { font-size: 1.1rem; padding: 0 10px; }
.cake { font-size: 5rem; }
.sparkle { font-size: 1.5rem; }
.balloon { font-size: 40px; }
.nav-btn { padding: 12px 25px; font-size: 1rem; bottom: 20px; }
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
.sound-control { width: 50px; height: 50px; font-size: 1.2rem; top: 10px; right: 10px; }
}
@media (min-width: 481px) and (max-width: 768px) {
.main-title { font-size: 4rem; }
.subtitle { font-size: 1.8rem; }
.start-btn { font-size: 1.3rem; padding: 20px 45px; }
.message-box { padding: 40px; }
.message-title { font-size: 3rem; }
.message-text { font-size: 1.1rem; }
.gallery-title { font-size: 3rem; }
.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.photo-placeholder { height: 200px; }
.final-title { font-size: 3.5rem; }
.final-text { font-size: 1.3rem; }
.cake { font-size: 7rem; }
.nav-btn { padding: 15px 35px; font-size: 1.1rem; bottom: 30px; }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.main-title { font-size: 5rem; }
.subtitle { font-size: 2rem; }
.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 35px; max-width: 900px; }
.photo-placeholder { height: 220px; }
}
@media (min-width: 1025px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-height: 500px) and (orientation: landscape) {
.main-title { font-size: 2rem; }
.subtitle { font-size: 1rem; margin-top: 10px; }
.start-btn { margin-top: 20px; padding: 12px 30px; font-size: 0.9rem; }
.message-box { padding: 20px; }
.message-title { font-size: 2rem; margin-bottom: 15px; }
.message-text { font-size: 0.9rem; line-height: 1.5; }
.gallery-title { font-size: 1.8rem; margin-bottom: 20px; }
.photo-grid { gap: 20px; }
.photo-placeholder { height: 150px; }
.final-title { font-size: 2rem; }
.final-text { font-size: 1rem; margin-bottom: 20px; }
.cake { font-size: 4rem; }
.floating-emoji { font-size: 25px; }
.balloon { font-size: 35px; }
}
@media (max-width: 320px) {
.main-title { font-size: 2rem; }
.subtitle { font-size: 1rem; }
.start-btn { font-size: 0.9rem; padding: 12px 25px; }
.message-box { padding: 20px; }
.message-title { font-size: 2rem; }
.message-text { font-size: 0.9rem; }
.gallery-title { font-size: 1.8rem; }
.photo-placeholder { height: 180px; }
.final-title { font-size: 2rem; }
.final-text { font-size: 1rem; }
.cake { font-size: 4rem; }
.nav-btn { padding: 10px 20px; font-size: 0.9rem; }
}
@media (hover: none) and (pointer: coarse) {
.start-btn:hover, .photo-card:hover, .nav-btn:hover, .sound-control:hover { transform: none; }
.start-btn:active { transform: scale(0.95); }
.nav-btn:active { transform: scale(0.95); }
}
</style>
</head>
<body>
<button class="sound-control" onclick="toggleSound()" title="Toggle Music">🔊</button>
<audio id="bgMusic" loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
<div id="page1" class="page">
<div class="fireworks" id="fireworks"></div>
<div class="floating-emoji" style="left: 10%; top: 15%; animation-delay: 0s;">🎉</div>
<div class="floating-emoji" style="left: 85%; top: 25%; animation-delay: 0.5s;">🎊</div>
<div class="floating-emoji" style="left: 15%; top: 70%; animation-delay: 1s;">✨</div>
<div class="floating-emoji" style="left: 80%; top: 65%; animation-delay: 1.5s;">🎈</div>
<div class="floating-emoji" style="left: 50%; top: 10%; animation-delay: 0.8s;">💖</div>
<div class="floating-emoji" style="left: 20%; top: 40%; animation-delay: 1.2s;">🌟</div>
<div class="floating-emoji" style="left: 75%; top: 45%; animation-delay: 0.3s;">🎁</div>
<h1 class="main-title">Happy Birthday!</h1>
<p class="subtitle">To The Most Amazing Person In My Universe</p>
<button class="start-btn" onclick="startSurprise()">🎁 Click For Your Surprise! 🎁</button>
</div>
<div id="page2" class="page hidden">
<div class="message-container">
<div class="message-box">
<h2 class="message-title">My Dearest Love,</h2>
<p class="message-text">
On this magical day, I want you to know that you are the most incredible gift life has ever given me. Every smile you share lights up my world like a thousand stars. Every laugh we share becomes a treasured memory etched in my heart forever. You make every ordinary moment feel extraordinary, and every day with you is an adventure I never want to end. Your kindness, your warmth, and your beautiful soul inspire me in ways I never thought possible. Today we celebrate YOU - the amazing person you are and all the joy and love you bring into this world. Here's to another year of incredible memories, endless laughter, and dreams coming true. I love you more than words can ever express! 💕
</p>
</div>
</div>
</div>
<div id="page3" class="page hidden">
<h2 class="gallery-title">✨ Our Beautiful Journey ✨</h2>
<div class="photo-grid">
<div class="photo-card">
<div class="photo-placeholder" data-card="1">
<img src="https://images.pexels.com/photos/8795094/pexels-photo-8795094.jpeg" class="active" alt="Memory 1">
<img src="https://images.pexels.com/photos/8325805/pexels-photo-8325805.jpeg" alt="Memory 1">
<img src="https://images.pexels.com/photos/8204443/pexels-photo-8204443.jpeg" alt="Memory 1">
<img src="https://images.pexels.com/photos/2828549/pexels-photo-2828549.jpeg" alt="Memory 1">
</div>
<p class="photo-caption">The Day We First Met</p>
</div>
<div class="photo-card">
<div class="photo-placeholder" data-card="2">
<img src="https://images.pexels.com/photos/6532620/pexels-photo-6532620.jpeg" class="active" alt="Memory 2">
<img src="https://images.pexels.com/photos/5054086/pexels-photo-5054086.jpeg" alt="Memory 2">
<img src="https://images.pexels.com/photos/951290/pexels-photo-951290.jpeg" alt="Memory 2">
<img src="https://images.pexels.com/photos/1415133/pexels-photo-1415133.jpeg" alt="Memory 2">
</div>
<p class="photo-caption">Sunset Adventures</p>
</div>
<div class="photo-card">
<div class="photo-placeholder" data-card="3">
<img src="https://images.pexels.com/photos/20060698/pexels-photo-20060698.jpeg" class="active" alt="Memory 3">
<img src="https://images.pexels.com/photos/9309828/pexels-photo-9309828.jpeg" alt="Memory 3">
<img src="https://images.pexels.com/photos/3552873/pexels-photo-3552873.jpeg" alt="Memory 3">
<img src="https://images.pexels.com/photos/5633704/pexels-photo-5633704.jpeg" alt="Memory 3">
</div>
<p class="photo-caption">Crazy Fun Times</p>
</div>
<div class="photo-card">
<div class="photo-placeholder" data-card="4">
<img src="https://images.pexels.com/photos/15161892/pexels-photo-15161892.jpeg" class="active" alt="Memory 4">
<img src="https://images.pexels.com/photos/30507957/pexels-photo-30507957.jpeg" alt="Memory 4">
<img src="https://images.pexels.com/photos/32389460/pexels-photo-32389460.jpeg" alt="Memory 4">
<img src="https://images.pexels.com/photos/933118/pexels-photo-933118.jpeg" alt="Memory 4">
</div>
<p class="photo-caption">Forever & Always</p>
</div>
</div>
</div>
<div id="page4" class="page hidden">
<div class="balloon-container">
<div class="balloon" style="left: 5%; animation-delay: 0s;">🎈</div>
<div class="balloon" style="left: 20%; animation-delay: 1s;">🎈</div>
<div class="balloon" style="left: 40%; animation-delay: 2s;">🎈</div>
<div class="balloon" style="left: 60%; animation-delay: 1.5s;">🎈</div>
<div class="balloon" style="left: 80%; animation-delay: 0.5s;">🎈</div>
<div class="balloon" style="left: 95%; animation-delay: 2.5s;">🎈</div>
</div>
<div class="final-message">
<h2 class="final-title">Make A Wish! 🌟</h2>
<p class="final-text">
May this special year bring you endless happiness, incredible adventures, and all the dreams your heart desires. You deserve every wonderful thing that life has to offer, and I'll be right here beside you, cheering you on every step of the way. Here's to new beginnings, amazing experiences, and all the love in the world. I LOVE YOU MORE THAN ANYTHING! 💖
</p>
<div class="cake-container">
<span class="sparkle" style="top: -20px; left: -20px; animation-delay: 0s;">✨</span>
<span class="sparkle" style="top: -20px; right: -20px; animation-delay: 0.3s;">✨</span>
<span class="sparkle" style="bottom: -20px; left: -20px; animation-delay: 0.6s;">✨</span>
<span class="sparkle" style="bottom: -20px; right: -20px; animation-delay: 0.9s;">✨</span>
<div class="cake">🎂</div>
</div>
</div>
</div>
<button class="nav-btn prev-btn hidden" onclick="prevPage()">← Previous</button>
<button class="nav-btn next-btn hidden" onclick="nextPage()">Next →</button>
<script>
let currentPage = 1;
const totalPages = 4;
let musicPlaying = false;
const bgMusic = document.getElementById('bgMusic');
function createFireworks() {
const container = document.getElementById('fireworks');
const colors = ['#ff0080', '#ff8c00', '#40e0d0', '#f5576c', '#4facfe'];
setInterval(() => {
for (let i = 0; i < 5; i++) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * 100 + '%';
firework.style.top = Math.random() * 100 + '%';
firework.style.background = colors[Math.floor(Math.random() * colors.length)];
firework.style.setProperty('--x', (Math.random() - 0.5) * 200 + 'px');
firework.style.setProperty('--y', (Math.random() - 0.5) * 200 + 'px');
firework.style.animationDelay = Math.random() + 's';
container.appendChild(firework);
setTimeout(() => firework.remove(), 1500);
}
}, 800);
}
function createConfetti() {
const colors = ['#ff0080', '#ff8c00', '#40e0d0', '#f5576c', '#4facfe', '#00f2fe'];
setInterval(() => {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 2 + 's';
confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}, 300);
}
function toggleSound() {
const btn = document.querySelector('.sound-control');
if (musicPlaying) {
bgMusic.pause();
btn.textContent = '🔇';
musicPlaying = false;
} else {
bgMusic.play();
btn.textContent = '🔊';
musicPlaying = true;
}
}
function startSurprise() {
bgMusic.play().catch(e => console.log('Audio play failed:', e));
musicPlaying = true;
document.querySelector('.sound-control').textContent = '🔊';
createConfetti();
nextPage();
}
function showPage(pageNum) {
document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'));
document.getElementById(`page${pageNum}`).classList.remove('hidden');
if (pageNum === 1) {
document.querySelector('.prev-btn').classList.add('hidden');
document.querySelector('.next-btn').classList.add('hidden');
} else {
document.querySelector('.prev-btn').classList.remove('hidden');
document.querySelector('.next-btn').classList.toggle('hidden', pageNum === totalPages);
}
currentPage = pageNum;
if (pageNum === 3 && !imageRotationStarted) {
rotateCardImages();
imageRotationStarted = true;
}
}
function nextPage() {
if (currentPage < totalPages) {
showPage(currentPage + 1);
}
}
function prevPage() {
if (currentPage > 1) {
showPage(currentPage - 1);
}
}
let imageRotationStarted = false;
function rotateCardImages() {
const cards = document.querySelectorAll('.photo-placeholder');
cards.forEach(card => {
const images = card.querySelectorAll('img');
let currentIndex = 0;
setInterval(() => {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}, 3000);
});
}
createFireworks();
showPage(1);
</script>
</body>
</html>
2. CSS (Design & Animation)
All visual effects and animations come from CSS:
- Bouncing letters for happy birthday messages animated.
- Color gradients and glowing shadows for a premium look.
- Balloons floating down the screen using
@keyframes. - Pulsing gift box and heartbeat animation for the roses.
3. JavaScript (Interactivity)
JavaScript makes the page interactive by:
- Switching between different pages when buttons are clicked.
- Creating random balloons that fall continuously.
- Adding animated delay for each letter of the birthday text.
🎨 How to Customize
You can easily personalize this birthday wishes animation for anyone:
- Replace Your Name Here with the real name of the person.
- Change the profile photo by updating the image link.
- Replace the background music with a favorite song.
- Update the date to match the birthday.
- Modify colors, fonts, or text to suit your style.
🎉 Final Thoughts
This animated birthday wishes website is a fun, modern, and emotional way to make someone feel truly special. Instead of sending a plain GIF or text, you can now gift a personalized birthday greetings animated webpage that feels like magic. Try it once, and you’ll see how unforgettable such a surprise can be!
