12-01-2024, 10:29 PM
¡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:
http://Registrate o inicia tu sesión par... contenido
Instalación:
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:
http://Registrate o inicia tu sesión par... 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.
- Dentro de <head>
Código:
<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>