💿🫧 KUKU! BIENVENIDOS MI BLOGCITO • TUTORIALES, REFLEXIONES Y TODO LO QUE PASE POR MI CABECITA☁️🌍

domingo, 2 de agosto de 2026

BURBUJITAS

Se vienen las super burbujita cabritos, este es un código facilito así que todo bien   No se de que más subirles tuto, así que comenten de lo que quieran ahora



CÓDIGO

<style>

/* Estilo base para las burbujas Frutiger Aero ultra visibles */

.frutiger-bubble {

  position: fixed;

  bottom: -60px; /* Empiezan escondidas abajo de la pantalla */

  z-index: 9999;

  pointer-events: none; /* No interrumpen los clics del usuario */

  border-radius: 50%;

  

  /* Degradado mucho más sólido y brillante */

  background: radial-gradient(circle at 30% 30%, 

    rgba(255, 255, 255, 0.85) 0%,   /* Brillo blanco más intenso */

    rgba(140, 193, 233, 0.45) 50%,  /* Azul claro más opaco */

    rgba(67, 139, 196, 0.7) 100%    /* Azul base bien marcado */

  );

  

  /* Borde blanco grueso y sombra interna fuerte para que parezcan de cristal real */

  border: 1.5px solid rgba(255, 255, 255, 0.7);

  box-shadow: inset -3px -3px 8px rgba(255, 255, 255, 0.5), 0 6px 15px rgba(0, 0, 0, 0.15);

  

  /* Opacidad inicial casi al máximo */

  opacity: 0.95;

}

</style>


<script>

(function() {

  const maxSize = 28; 

  const minSize = 8;  


  function createBubble() {

    const bubble = document.createElement("div");

    bubble.className = "frutiger-bubble";


    // Tamaño aleatorio

    const size = Math.random() * (maxSize - minSize) + minSize;

    bubble.style.width = size + "px";

    bubble.style.height = size + "px";


    // Posición horizontal aleatoria

    bubble.style.left = Math.random() * window.innerWidth + "px";


    // Tiempo de viaje (entre 5 y 10 segundos)

    const duration = Math.random() * 5 + 5; 

    bubble.style.transition = "transform " + duration + "s ease-in-out, bottom " + duration + "s linear, opacity " + duration + "s ease";


    document.body.appendChild(bubble);


    // Activamos el movimiento

    setTimeout(() => {

      bubble.style.bottom = (window.innerHeight + 60) + "px";

      

      // Movimiento lateral en zigzag

      bubble.style.transform = "translateX(" + (Math.random() * 160 - 80) + "px)";

      

      // Al llegar arriba bajan su opacidad a 0.3 en lugar de desaparecer del todo rápido

      bubble.style.opacity = "0.3"; 

    }, 20);


    // Eliminar la burbuja al terminar su recorrido

    setTimeout(() => {

      bubble.remove();

    }, duration * 1000);

  }


  // Se mantiene el ritmo rápido para que se sature lindo la pantalla

  setInterval(createBubble, 150);

})();

</script>


Con este código solo tienen que copiar y, en vez de pegarlo en un gadget como siempre, lo van a pegar en donde dice "todas las columnas" que es la columna arriba de donde lo ponemos siempre o abajo del todo donde dice "footer", y debería funcionar sin problema. 

2 comentarios:

BANNER DE TEXTO

Bueno chicuelos, volví después de mucho, lo siento los tkm mucho, aquí les va el super tutorial del banner que aparece arriba del blog...