WordPress Sitenize Renkli Yağmur Efekti Ekleyin!

[benkruz]

Bu eğitimde WordPress sitenize Elementor kullanarak renkli yağmur efekti eklemeyi adım adım anlatacağım.
Hiçbir eklenti kurmadan, sadece CSS ve JavaScript kullanarak sitenize dinamik, canlı bir animasyon efekti ekleyebilirsiniz.
Hem dikkat çekici bir görünüm elde edecek hem de sayfanızın etkileşimini artıracaksınız.

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) ); }
}

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