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 blogcito .

CÓDIGO

<link href="https://fonts.googleapis.com/css2?family=Gruppo&amp;display=swap" rel="stylesheet" />

<style>

:root {

  /* ==========================================

     ZONA DE CONFIGURACIÓN PERSONALIZADA

     ========================================== */

  

  /* 1. Color base (Acepta hex, rgb o rgba). Cambia esto para alterar toda la paleta. */

  --marquee-base-color: #000000;

  

  /* 2. Velocidad de la animación (menor tiempo = más rápido) */

  --marquee-speed: 14s;

  

  /* 3. Texto secundario o decoración de la derecha */

  --marquee-badge: " Texto quieto aqui ";

  /* ==========================================

     AUTOMATIZACIÓN DE LUCES Y TINTES (Aero Engine)

     ========================================== */

  /* Derivamos automáticamente los tonos translúcidos y brillos a partir del color base */

  --marquee-bg: color-mix(in srgb, var(--marquee-base-color) 25%, rgba(255, 255, 255, 0.7));

  --marquee-text-color: color-mix(in srgb, var(--marquee-base-color) 85%, #000000);

  --marquee-shadow: color-mix(in srgb, var(--marquee-base-color) 60%, transparent);

}

.frutiger-marquee {

  width: 100%;

  overflow: hidden;

  margin-top: 25px;

  margin-bottom: 25px;

  /* Fondo de vidrio esmerilado automatizado */

  background: var(--marquee-bg);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  /* Bordes brillantes característicos de Aero */

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

  border-radius: 30px;

  /* Sombra profunda exterior y brillo dinámico */

  box-shadow: 

    0 8px 25px var(--marquee-shadow),

    inset 0 1px 4px rgba(255, 255, 255, 0.9);

  padding: 10px 0;

  position: relative;

}

/* Brillo superior tipo cristal automatizado */

.frutiger-marquee:before {

  content: "";

  position: absolute;

  left: 6px;

  right: 6px;

  top: 3px;

  height: 45%;

  border-radius: 25px;

  background: linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.85),

    rgba(255, 255, 255, 0)

  );

  pointer-events: none;

}

/* Texto de la marquesina */

.frutiger-marquee-text {

  display: inline-block;

  white-space: nowrap;

  /* Color de texto derivado automáticamente */

  color: var(--marquee-text-color);

  font-family: 'Gruppo', sans-serif;

  font-size: 16px;

  font-weight: bold;

  letter-spacing: 2px;

  /* Brillo sutil en el texto */

  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);

  animation: deslizar var(--marquee-speed) linear infinite;

}

/* Animación de desplazamiento */

@keyframes deslizar {

  from {

    transform: translateX(100%);

  }

  to {

    transform: translateX(-100%);

  }

}

/* Decoración lateral automatizada */

.frutiger-marquee::after {

  content: var(--marquee-badge);

  position: absolute;

  right: 18px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 16px;

  opacity: 0.85;

  pointer-events: none;

  color: var(--marquee-text-color);

}

</style>

<!-- ==========================================

     ZONA DE TEXTO PRINCIPAL

     ========================================== -->

<div class="frutiger-marquee">

  <div class="frutiger-marquee-text">

    “Tu texto aquí“

 </div>

</div>

Este código es facilito facilito, lo primero que hacemos es pegar el código en notas, y lo primer que vamos a cambiar es el color del que queremos el banner (#000000), no te preocupes de las sombras, eso lo he dejado puesto para que no tengas que preocuparte.

Luego de eso ponemos el texto que esta a la derecha quieto (Texto quieto aquí), pueden poner emojis su estetica, etc.

Y por ultimo ponemos el texto que se moverá, ("tu texto aqui"), aqui deben sacar las comillas, pero dejen el espacio .

Y copiamos el código ya cambiado, esto lo van a pegar en donde dice "todas las columnas" que es la columna arriba de donde lo ponemos siempre, y así deberían tener su banner listito.

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.