Happy New Year 2026 Special Animation

on

Happy New Year 2026 Special Animation

Is post mein hum ek stylish Glassmorphism New Year page banayenge. Aap live demo dekh sakte hain aur code ko niche se copy kar sakte hain.

Live Preview

Quick Guide

You can copy the code sections individually or scroll down for the Complete All-in-One Code.

त्वरित गाइड

आप कोड को अलग-अलग हिस्सों में कॉपी कर सकते हैं या नीचे दिए गए Complete All-in-One Code का उपयोग करें।

Step-by-Step Code

1. HTML
<div id="snow-back"></div>
<div class="glass-card">
    <h1>HAPPY NEW YEAR</h1>
    <span class="year">2026</span>
</div>
<div id="snow-front"></div>
2. CSS
body { height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; color: white; }
.glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border-radius: 30px; padding: 60px; text-align: center; z-index: 5; }
.year { font-size: 8rem; color: #ffcc00; }
.snow { position: absolute; background: white; border-radius: 50%; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translateY(-10vh); } 100% { transform: translateY(110vh); } }

🚀 Complete All-in-One Code

Niche diya gaya code ek complete file hai jisme HTML, CSS aur JS sab ek saath hain.

Full Code (Single File) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Year 2026</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1546708973-b339540b5162?w=1600') center/cover; overflow: hidden; color: white; }
        .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 30px; padding: 60px; text-align: center; box-shadow: 0 8px 32px 0 rgba(0,0,0,0.8); z-index: 5; position: relative; }
        h1 { font-size: 3rem; letter-spacing: 5px; }
        .year { font-size: 8rem; font-weight: 900; color: #ffcc00; display: block; }
        .snow-container { position: fixed; top: 0; width: 100%; height: 100%; pointer-events: none; }
        .snow { position: absolute; background: white; border-radius: 50%; animation: fall linear infinite; }
        @keyframes fall { 0% { transform: translateY(-10vh); } 100% { transform: translateY(110vh); } }
    </style>
</head>
<body>
    <div class="snow-container" id="snow-back" style="z-index: 1;"></div>
    <div class="glass-card">
        <h1>HAPPY NEW YEAR</h1>
        <span class="year">2026</span>
        <p>Wishing you a year full of joy & prosperity.</p>
    </div>
    <div class="snow-container" id="snow-front" style="z-index: 10;"></div>

    <script>
        function createSnow(id, count, min, max) {
            const container = document.getElementById(id);
            for (let i = 0; i < count; i++) {
                const snow = document.createElement('div');
                snow.className = 'snow';
                const size = Math.random() * (max - min) + min + 'px';
                snow.style.width = size; snow.style.height = size;
                snow.style.left = Math.random() * 100 + 'vw';
                snow.style.animationDuration = Math.random() * 7 + 5 + 's';
                snow.style.opacity = Math.random();
                container.appendChild(snow);
            }
        }
        createSnow('snow-back', 100, 2, 5);
        createSnow('snow-front', 50, 1, 4);
    </script>
</body>
</html>

Comments

Post a Comment