❀˖° 𝐃𝐞 𝐭𝐨𝐝𝐨 𝐲 𝐧𝐚𝐝𝐚 ⋆. 𐙚 ˚

¿Cómo agregar una barra de texto con movimiento? 

¡Holaa! Como pueden ver, hoy traigo un nuevo tutorial. Quiero ser más activa con esta sección, ya que hay varias cosas que he agregado y quiero compartir con ustedes cómo fue que hice cada una. Sé que no soy la mejor explicando, pero créanme que intento ser lo más clara posible 🥹.

Bien, como es costumbre, vamos a comenzar con el código: la parte más larga, pero también la más importante. El código a continuación es el que deberán copiar y editar:

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

<div class="frutiger-marquee">

  <!-- La etiqueta marquee hace que se mueva en bucle infinito de forma garantizada -->

  <marquee behavior="scroll" direction="left" scrollamount="12">

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

      🫆 Reflexiones, mi vida diaria, series y cosas que se me ocurran. ☁️💙

    </span>

  </marquee>

</div>

<style>

.frutiger-marquee {

  width: 100%;

  overflow: hidden;

  background: rgba(158, 181, 255);

  backdrop-filter: blur(8px);

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

  border: 2px solid rgba(255, 255, 255, 0.65);

  border-radius: 30px;

  box-shadow:

    0 0 15px rgba(94, 119, 209),

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

  padding: 8px 0;

  position: relative;

  box-sizing: border-box;

}

/* Brillo superior tipo vidrio */

.frutiger-marquee::before {

  content: "";

  position: absolute;

  left: 8px;

  right: 8px;

  top: 4px;

  height: 40%;

  border-radius: 25px;

  background: linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.75),

    rgba(255, 255, 255, 0)

  );

  pointer-events: none;

  z-index: 2;

}

/* Texto blanco y súper visible */

.frutiger-marquee-text {

  color: #FFFFFF !important;

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

  font-size: 20px;

  font-weight: bold;

  letter-spacing: 2px;

  text-shadow:

    0 0 8px rgba(255, 255, 255, 0.9),

    0 0 2px #4B63B0; /* Sombra oscura fina por detrás para resaltar las letras */

}

/* Decoración fija a la izquierda */

.frutiger-marquee::after {

  content: "💗🪽💋";

  position: absolute;

  left: 18px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 17px;

  opacity: 0.85;

  z-index: 3;

}

</style>

Una vez hayan copiado y pegado el código, tendrán que reemplazar la frase “🫆 Reflexiones, mi vida diaria…” por su propia frase, ya sea un aviso o alguna lista de los temas de su blog.

Ahora bien, en donde dice scrollamount="12" pueden cambiar la velocidad del texto, ya sea que quieran que este vaya más rápido o más lento (ejemplo: 6 u 8) si prefieren un movimiento más suave y lento.

Vamos a continuar con los colores: para cambiar el tono azul de la barra, buscaremos background: rgba(158, 181, 255) y ahí lo cambiarán por el color que deseen, ya sea en RGB o en código HEX. Recuerden que pueden utilizar la siguiente página htmlcolorcode

En box-shadow, el valor rgba(94, 119, 209) es la luz neón que brilla alrededor de la barra; pueden poner el mismo tono de la barra pero un poco más oscuro para que resalte.

Continuaremos con la fuente: si no quieren usar la fuente Gruppo, pueden cambiar 'Gruppo', sans-serif; por otras como 'Georgia', 'Courier New', o cualquier fuente de Google Fonts.

Para cambiar los emojis fijos a la izquierda en la regla .frutiger-marquee::after, pueden cambiar "💗🪽💋" por los emojis que combinen mejor con la temática de su blog.

Y para terminar, vamos a colocar el código. En el apartado de diseño deben buscar la parte que dice "Todas las columnas"; ahí le darán a editar y pegarán el código que editaron antes.

Y solo deberían darle a guardar y ya estaría. En lo personal, creo que el tutorial es bastante sencillo, solo deben cuidar los signos y no debería haber problema. De cualquier forma, pueden colocar cualquier pregunta en los comentarios. 💗