Cómo crear un fondo de lluvia colorida en Elementor que dejará a todos con la boca abierta.

Lluvia de colores miniatura

Hoy te voy a enseñar cómo romper el molde de los diseños estáticos. Vamos a implementar un fondo de lluvia colorida animada directamente en Elementor. Prepárate, porque este efecto no solo es visualmente impactante, sino que le dará a tu marca un toque moderno y creativo que tus competidores no tienen.

¿Por qué añadir animaciones de fondo a tu web?

El movimiento capta la atención del ojo humano de inmediato. Al usar este efecto de lluvia de colores, logras tres cosas:

  1. Reduces la tasa de rebote: Los usuarios se quedan más tiempo “jugando” visualmente con el fondo.
  2. Transmites innovación: Tu sitio se ve actualizado y trabajado.
  3. Personalidad única: Sales del típico fondo blanco o gris de siempre.

Fragmento de código CSS para el efecto de fondo de lluvia



selector{
    --drop-height: 150px;
}
selector{
    overflow: hidden !important;
}
selector .elementor-container{
    z-index: 1;
}
selector .raindrop{
    position: absolute;
    height: 100%;
    top: 0;
}
selector .raindrop span{
    height: var(--drop-height);
    border-radius: 5px;
    animation: raining 5s linear infinite;
    display: block;
    position: relative;
}
@keyframes raining{
    0%{ top: calc(-1 * var(--drop-height)); }
    100%{ top: calc( 100% + var(--drop-height) ); }
}

Unete a mi canal de WhatsApp

Unirme Ahora

Fragmento de código JavaScript para el efecto de fondo de lluvia

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script>

var desktopAmount = 300,
    tabletAmount = 120,
    mobileAmount = 80,
    minSpeed = 5,
    maxSpeed = 10,
    minWidth = 1,
    maxWidth = 5,
    minOpacity = 0.2,
    maxOpacity = 0.5,
    colors = [ 
        '#00FFFF',
        '#00FF00',
        '#FF0000',
        '#FFE200',
    ],
    $ = jQuery,
    container = 'rain'


function raining(amount){
    
    $('.raindrop').remove()

    var s = $('.' + container)
    
    for (var i = 0; i < amount; i++) {
        
        s.append('<span class="raindrop"><span></span></span>')
        
        $('.raindrop').eq(i).css({
            'left': Math.floor( Math.random() * s.outerWidth() ),
            'width': minWidth + Math.random() * (maxWidth - minWidth),
            'opacity': minOpacity + Math.random() * (maxOpacity - minOpacity)
        })
        $('.raindrop span').eq(i).css({
            'animation-delay': Math.random() * -20 + 's',
            'animation-duration': minSpeed + Math.random() * (maxSpeed - minSpeed) + 's',
            'background': 'linear-gradient(transparent, ' + colors[i-Math.floor(i/colors.length)*colors.length] + ')'
        })
    }
}

function init(){
    
    var amount
    
    if( $(window).width() > 1024 ){
        amount = desktopAmount
    }
    if( $(window).width() <= 1024 ){
        amount = tabletAmount
    }
    if( $(window).width() <= 767 ){
        amount = mobileAmount
    }
    raining(amount) 
}

$(window).on( 'load resize', init )
init()

</script>

Post Relacionados