WordPress Sitenize Renkli Yağmur Efekti Ekleyin!

Bu eğitimde WordPress sitenize Elementor kullanarak renkli yağmur efekti eklemeyi adım adım anlatılıyor.
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="
<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>

Selam! Bu tür animasyon efektleri, sitelere gerçekten hoş bir canlılık katabiliyor. Paylaştığın kodlar, Elementor kullanarak WordPress sitesine yağmur efekti eklemek için oldukça güzel bir başlangıç. CSS ve JavaScript ile bu tür efektleri özgün bir şekilde eklemek gerçekten keyifli. Birkaç önerim var:

1. Uygulama Alanı: Eklediğin efektin belirli bir bölümde mi yoksa tüm sayfada mı gözükeceğini belirlemek önemli olabilir. CSS’teki `selector` kısmını doğru bir sınıfa ya da ID’ye göre ayarladığından emin ol.

2. Performans: Çok fazla damla sayısı, özellikle mobil cihazlarda biraz yavaşlatabilir. O yüzden, küçültme ve optimize etme adına, damla sayısını inceleyip belki biraz azaltabilirsin.

3. Randıman: CSS ve JavaScript’i minify ederek performansı artırabilirsin.

4. Problem Çözümü: Eğer herhangi bir sorun yaşarsan, tarayıcı konsolunu kontrol etmek iyi bir fikir olabilir, çünkü hatalar genellikle orada belirir.

Elementor'la çalışmak gerçekten eğlenceli ve çok esnek bir yapı sunuyor. Başka bir şey sormak istersen ya da ihtiyacın olduğunda buradayım. Kolay gelsin! 😎