Untitled

script.js

function createFallingTeAmo() {

  const messages = [

    "TE AMO", "TE AMO", "TE AMO", "TE AMO", "TE AMO", // Repetimos "TE AMO" para mayor frecuencia

    "TE QUIERO", "MI AMOR", "CORAZÓN" // Algunas variaciones, pero menos frecuentes

  ];

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

  teAmo.classList.add("te-amo");

  teAmo.textContent = messages[Math.floor(Math.random() * messages.length)];

  // Posición horizontal aleatoria en el ancho de la pantalla

  teAmo.style.left = Math.random() * 100 + "vw"; 

  // Duración de la animación aleatoria (caen a diferentes velocidades)

  teAmo.style.animationDuration = `${Math.random() * 2 + 2}s`; 

  // Aplica la animación 'fall' definida en CSS

  teAmo.style.animationName = 'fall';

  document.body.appendChild(teAmo);

  // Eliminar el elemento después de un tiempo para no sobrecargar el navegador.

  // El tiempo de eliminación debe ser mayor que la duración de la animación.

  setTimeout(() => {

    teAmo.remove();

  }, 5000); /* Eliminar después de 5 segundos */

}

// **Configuración para la densidad de la lluvia:**

const numToCreate = 20; /* Cantidad de "TE AMO" que se crean en cada intervalo (muy alto para densidad) */

const intervalTime = 20; /* Intervalo de tiempo en milisegundos entre cada "ráfaga" de creación (muy bajo para continuidad) */

// Llama a la función para crear "TE AMO" repetidamente en el tiempo

setInterval(() => {

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

    createFallingTeAmo();

  }

}, intervalTime);

style.css

body {

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

  background-color: #000;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  min-height: 100vh;

  margin: 0;

  overflow: hidden;

}

/* Estilos para cada mensaje "TE AMO" */

.te-amo {

  position: absolute;

  color: #FF0040; /* Rojo/rosa vibrante */

  font-size: 10px;

  opacity: 0.7; /* ¡CAMBIO AQUÍ! Aumentado para que sean más claros (estaba en 0.3) */

  filter: blur(0.5px); /* Mantengo el desenfoque que ya habías preguntado */

  text-shadow: 0 0 3px #FF0040, 0 0 6px #FF0040;

  white-space: nowrap;

  pointer-events: none;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}

/* Definición de la animación de caída */

@keyframes fall {

  0% {

    transform: translateY(-20px);

    opacity: 0.1; /* Puedes ajustar este también si quieres que empiecen más claros */

  }

  10% {

    opacity: 0.8; /* ¡CAMBIO AQUÍ! Se hacen más claros rápidamente al aparecer */

  }

  100% {

    transform: translateY(100vh);

    opacity: 0;

  }

}

untitled.markdown

Untitled

A Pen by carlitos9990 on CodePen.

License.