DEV Community

Cover image for Efecto copos de nieve para dar a nuestra web un toque navideño
Diego
Diego

Posted on

Efecto copos de nieve para dar a nuestra web un toque navideño

Hola, hoy os traigo un pequeño script que acabo de generar (si, si, con la ayuda inestimable de la IA, en este caso, Chat-GPT 5.1).

Con este script tendremos en cualquier página un efecto de copos de nieve cayendo muy chulo, y sin añadir ninguna librería externa, es super ligero.

<script>
        document.addEventListener("DOMContentLoaded", () => {
            const css = `
                .snowflake {
                    position: fixed;
                    top: -10px;
                    color: white;
                    font-size: 1em;
                    pointer-events: none;
                    animation: fall linear infinite;
                }
                @keyframes fall {
                    to { transform: translateY(100vh); opacity: 0; }
                }
            `;

            const style = document.createElement("style");
            style.innerHTML = css;
            document.head.appendChild(style);

            function createFlake() {
                const flake = document.createElement("div");
                flake.className = "snowflake";
                flake.textContent = "❄";
                flake.style.left = Math.random() * window.innerWidth + "px";
                flake.style.fontSize = 8 + Math.random() * 15 + "px";
                flake.style.animationDuration = 4 + Math.random() * 6 + "s";
                document.body.appendChild(flake);
                setTimeout(() => flake.remove(), 10000);
            }

            setInterval(createFlake, 200);
        });
</script>
Enter fullscreen mode Exit fullscreen mode

Espero que os guste, y por supuesto, sentíos libres de usarlo, modificarlo y lo que queráis. Eso si, si lo mejoráis, ponerlo en los comentarios y lo actualizo ;-)

Gracias!

Top comments (0)