Iniciar sesión

EZZIFY

Mejor respuesta del mensaje Efecto de Nieve con JavaScript

¡Hola a todos!
Esta mañana, mientras navegaba por aqui, me encontré con un interesante efecto de veladoras que me inspiró a desarrollar un pequeño código que genera un efecto de nieve.
Quiero compartirlo con ustedes, ya que puede darle un toque especial a sus sitios web.

Ligero:
El script pesa apenas 3 KB sin minificar, por lo que no impactará significativamente en el rendimiento de tu sitio.
Responsivo:
El número de copos de nieve se ajusta automáticamente según el tamaño de la pantalla, con un máximo de 200 copos para evitar sobrecargas.
Interactivo:
si un usuario hace clic en uno, este se elimina. Esto garantiza que no interfiera con la interacción del usuario en tu sitio, como hacer clic en botones o enlaces.
Fácil de personalizar:
El código está diseñado para ser sencillo y claro, permitiéndote personalizar fácilmente aspectos como tamaño, velocidad o cantidad de copos.
Seguro y optimizado:
Incluye medidas para evitar la sobrecarga del DOM, gracias a un manejo eficiente de temporizadores y la limpieza de elementos no necesarios.

Demo:
Debes agradecer para ver el contenido...

Instalación:

Copia el fragmento de código y pégalo en tu archivo HTML.
Ubicación recomendada:
Puedes colocarlo dentro de las etiquetas
<head> o al final de <body>, dependiendo de tus necesidades:
- Dentro de <head>
  si quieres que los estilos y animaciones estén disponibles desde el inicio de la carga de la página.
- Dentro de <body>
  si prefieres cargar el efecto después del contenido principal.

Código: ( Seleccionar Todo )

<script>

    (async function () {

        const loadStyles = () => {

            const style = document.createElement("style");

            style.innerHTML = `.snowflake {position: fixed;width: 11px;height: 11px;background: white;border-radius: 50%;animation: fall linear infinite;top: -16px;transition: width 0.6s ease, height 0.6s ease;}.small-snowflakes .snowflake {width: 7px;height: 7px;}@keyframes fall {0% {transform: translate(var(--start-x), -10px) scale(var(--scale));opacity: var(--opacity);}50% {transform: translate(var(--end-x), var(--mid-y)) scale(var(--scale));opacity: var(--opacity);}100% {transform: translate(var(--end-x-final), 100vh) scale(var(--scale));opacity: 0;}}`;

            document.head.appendChild(style);

        };

        const generateSnowflakes = () => {

            const screenWidth = window.innerWidth;

            const baseCount = 200;

            const snowflakeCount = Math.min(baseCount, Math.floor(screenWidth / 5));

            for (let i = 0; i < snowflakeCount; i++) {

                const snowflake = document.createElement('div');

                snowflake.className = 'snowflake';

                const startX = Math.random() * 100 + 'vw';

                snowflake.style.setProperty('--start-x', startX);

                snowflake.style.setProperty('--end-x', `calc(${startX} + ${(Math.random() - 0.5) * 20}vw)`);

                snowflake.style.setProperty('--end-x-final', `calc(${startX} + ${(Math.random() - 0.5) * 10}vw)`);

                snowflake.style.setProperty('--mid-y', Math.random() * 50 + 50 + '%');

                snowflake.style.setProperty('--scale', Math.random() * 0.5 + 0.5);

                snowflake.style.setProperty('--opacity', Math.random() * 0.5 + 0.5);

                snowflake.style.animationDuration = Math.random() * 15 + 10 + 's';

                snowflake.style.animationDelay = Math.random() * -30 + 's';

                document.body.appendChild(snowflake);

            }

            clearTimeout(window.snowTimer);

            window.snowTimer = setTimeout(() => {

                document.body.classList.add('small-snowflakes');

            }, 3000);

        };

        const debounceResize = (func, delay = 300) => {

            let timer;

            return function (...args) {

                clearTimeout(timer);

                timer = setTimeout(() => func.apply(this, args), delay);

            };

        };

        const init = () => {

            loadStyles();

            generateSnowflakes();

            document.body.addEventListener('click', event => {

                if (event.target.classList.contains('snowflake')) {

                    event.target.remove();

                }

            });

            const handleResize = debounceResize(() => {

                document.querySelectorAll('.snowflake').forEach(snowflake => snowflake.remove());

                generateSnowflakes();

            });

            window.addEventListener('resize', handleResize);

        };

        while (true) {

            if (document.readyState === 'complete') {

                init();

                break;

            }

            await new Promise(resolve => setTimeout(resolve, 100));

        }

    })();

</script>

Tronlar · 12-02-2024, 10:07 AM

3

Hola, para ponerlo en el script hay que ponerlo así, si no, va a dar error.

Código PHP: ( Seleccionar Todo )

<script>
{literal}
XXXXXXXXXXXX
{/literal}
</script>

Código PHP: ( Seleccionar Todo )

<script>
{literal}
    (async function () {
        const loadStyles = () => {
            const style = document.createElement("style");
            style.innerHTML = `.snowflake {position: fixed;width: 11px;height: 11px;background: white;border-radius: 50%;animation: fall linear infinite;top: -16px;transition: width 0.6s ease, height 0.6s ease;}.small-snowflakes .snowflake {width: 7px;height: 7px;}@keyframes fall {0% {transform: translate(var(--start-x), -10px) scale(var(--scale));opacity: var(--opacity);}50% {transform: translate(var(--end-x), var(--mid-y)) scale(var(--scale));opacity: var(--opacity);}100% {transform: translate(var(--end-x-final), 100vh) scale(var(--scale));opacity: 0;}}`;
            document.head.appendChild(style);
        };
        const generateSnowflakes = () => {
            const screenWidth = window.innerWidth;
            const baseCount = 200;
            const snowflakeCount = Math.min(baseCount, Math.floor(screenWidth / 5));
            for (let i = 0; i < snowflakeCount; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                const startX = Math.random() * 100 + 'vw';
                snowflake.style.setProperty('--start-x', startX);
                snowflake.style.setProperty('--end-x', `calc(${startX} + ${(Math.random() - 0.5) * 20}vw)`);
                snowflake.style.setProperty('--end-x-final', `calc(${startX} + ${(Math.random() - 0.5) * 10}vw)`);
                snowflake.style.setProperty('--mid-y', Math.random() * 50 + 50 + '%');
                snowflake.style.setProperty('--scale', Math.random() * 0.5 + 0.5);
                snowflake.style.setProperty('--opacity', Math.random() * 0.5 + 0.5);
                snowflake.style.animationDuration = Math.random() * 15 + 10 + 's';
                snowflake.style.animationDelay = Math.random() * -30 + 's';
                document.body.appendChild(snowflake);
            }
            clearTimeout(window.snowTimer);
            window.snowTimer = setTimeout(() => {
                document.body.classList.add('small-snowflakes');
            }, 3000);
        };
        const debounceResize = (func, delay = 300) => {
            let timer;
            return function (...args) {
                clearTimeout(timer);
                timer = setTimeout(() => func.apply(this, args), delay);
            };
        };
        const init = () => {
            loadStyles();
            generateSnowflakes();
            document.body.addEventListener('click', event => {
                if (event.target.classList.contains('snowflake')) {
                    event.target.remove();
                }
            });
            const handleResize = debounceResize(() => {
                document.querySelectorAll('.snowflake').forEach(snowflake => snowflake.remove());
                generateSnowflakes();
            });
            window.addEventListener('resize', handleResize);
        };
        while (true) {
            if (document.readyState === 'complete') {
                init();
                break;
            }
            await new Promise(resolve => setTimeout(resolve, 100));
        }
    })();
    {/literal}
</script>

Gracias por compartirlo, saludos.

Iniciar sesión
Nombre de usuario/Email:
Contraseña:	¿Perdiste tu contraseña?
	Recordarme

📦 Foro Archivado — Risus 1.3

⚖️ Aviso Legal y Normas de Contenido