Efecto de Lluvia en CSS

Para crear un efecto de gotas de lluvia en una ventana utilizando solo CSS a través de HAML y Sass, podemos seguir un enfoque creativo que simule visualmente el efecto de las gotas de lluvia. Utilizaremos técnicas de animación y estilizado para lograr este efecto. Aquí tienes un ejemplo detallado de cómo hacerlo:

HAML:

hamlCopy code
%body
  .window
    .raindrops
      - (1..50).each do |i|
        .drop{style: "animation-delay: #{i * 0.1}s"}

Sass:

sassCopy code
$window-width: 500px
$window-height: 300px

body
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  background-color: #ececec

.window
  position: relative
  width: $window-width
  height: $window-height
  background-color: #9bd1e5
  border-radius: 10px
  overflow: hidden

.raindrops
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

.drop
  position: absolute
  width: 2px
  height: 10px
  background-color: #fff
  opacity: 0.5
  animation: fall 1s linear infinite, sway 1s ease-in-out infinite alternate

@keyframes fall
  0%
    transform: translateY(-10px)
    opacity: 0
  50%
    opacity: 0.5
  100%
    transform: translateY($window-height + 10px)
    opacity: 0

@keyframes sway
  0%
    transform: translateX(0)
  100%
    transform: translateX(5px)

En este código, hemos definido un contenedor .window que representa nuestra ventana y dentro de él creamos un elemento .raindrops que contendrá nuestras gotas de lluvia simuladas. Utilizamos un bucle en HAML para generar múltiples elementos .drop, cada uno con un retraso de animación diferente, para crear la ilusión de que las gotas de lluvia caen a diferentes velocidades.

En Sass, establecemos variables para el ancho y el alto de la ventana y luego aplicamos estilos para la ventana y las gotas de lluvia. Utilizamos animaciones CSS para hacer que las gotas de lluvia caigan y se balanceen ligeramente, creando un efecto realista.

Este es solo un ejemplo básico, pero puedes ajustar los estilos y las animaciones según tus necesidades para crear un efecto de lluvia más realista o estilizado. ¡Espero que esta explicación te ayude a comprender cómo crear este efecto utilizando solo CSS a través de HAML y Sass!

Por supuesto, profundicemos más en cómo funciona este código y cómo puedes personalizarlo para adaptarlo a tus necesidades específicas.

Explicación del Código:

1. HAML: En el código HAML, estamos utilizando un bucle para generar múltiples elementos .drop que representan las gotas de lluvia. Cada gota tiene un estilo de animación diferente para crear la sensación de que caen a diferentes velocidades.

2. Sass: En la parte de Sass, definimos variables para el ancho y el alto de la ventana ($window-width y $window-height). Luego, aplicamos estilos a la ventana y las gotas de lluvia.

   • .window: Establece el estilo para el contenedor de la ventana, como su posición, tamaño y color de fondo.

   • .raindrops: Define el estilo para el contenedor de las gotas de lluvia. Es posicionado absolutamente dentro de la ventana para que las gotas caigan desde la parte superior de la ventana.

   • .drop: Representa una gota de lluvia individual. Le damos un tamaño y color específicos, así como también aplicamos animaciones para hacer que parezca que está cayendo y oscilando.

3. Animaciones: Utilizamos dos animaciones CSS para lograr el efecto de las gotas de lluvia:

   • fall: Esta animación hace que las gotas de lluvia caigan desde la parte superior de la ventana hacia abajo. Comienza con una posición inicial ligeramente por encima de la ventana (transform: translateY(-10px)) y termina con una posición ligeramente por debajo de la ventana (transform: translateY($window-height + 10px)), con una opacidad que se desvanece gradualmente.

   • sway: Esta animación hace que las gotas de lluvia oscilen ligeramente de un lado a otro mientras caen. Utilizamos transform: translateX() para lograr este efecto.

Personalización:

Puedes personalizar este código de varias maneras para adaptarlo a tus necesidades específicas:

• Colores y Estilos: Cambia los colores y estilos de la ventana y las gotas de lluvia para que se ajusten al diseño de tu página web.

• Cantidad de Gotas: Ajusta el rango del bucle en HAML ((1..50)) para cambiar la cantidad de gotas de lluvia que aparecen en la ventana.

• Velocidad y Dirección de las Gotas: Experimenta con los valores de las animaciones CSS para cambiar la velocidad y dirección de las gotas de lluvia.

• Tamaño y Forma de la Ventana: Modifica los valores de las variables $window-width y $window-height para cambiar el tamaño y la forma de la ventana.

• Otras Animaciones: Agrega otras animaciones CSS para mejorar el efecto de las gotas de lluvia, como cambios en la opacidad o efectos de desenfoque.

Con estas opciones de personalización, puedes crear una variedad de efectos de lluvia diferentes para incorporar en tus proyectos web. ¡Espero que esta información adicional te sea útil! Si tienes alguna pregunta más o necesitas más detalles, no dudes en preguntar.