3D Slinky Motion Loader

on
0

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