Web sitenize farklı bir hava katmak ister misiniz?
Bu yazıda, 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. 🚀

Neden Renkli Yağmur Efekti?

Renkli yağmur efekti, özellikle portföy, ajans, tasarım veya kişisel blog sitelerinde sayfaya enerji katar.
Ziyaretçileriniz sadece içerik değil, görsel deneyim de yaşar.
Ayrıca bu tür mikro animasyonlar, web sitenizin modern görünmesini sağlar ve kullanıcıların sitede kalma süresini uzatır.

Gerekli Araçlar

Bu eğitimi uygulamak için yalnızca şu araçlara ihtiyacınız olacak:

• WordPress kurulu bir site
• Elementor Pro (Özel CSS ekleme alanı için gerekli)
• Temel düzeyde HTML ve CSS bilgisi

1. Adım: Bölümünüze CSS Sınıfı Ekleyin

İlk olarak yağmur efektini eklemek istediğiniz bölümü seçin.
Daha sonra Elementor arayüzünde:

1. Bölümü seçin
2. “Gelişmiş” sekmesine gidin
3. “CSS Sınıfı” alanına şu değeri yazın: rain

2. Adım: Özel CSS Kodlarını Ekleyin

Şimdi efektin görünümünü oluşturacak CSS kodlarını ekleyelim.
Elementor Pro kullanıyorsanız, “Özel CSS” alanına aşağıdaki kodu yapıştırın:

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

Code language: CSS (css)

Bu kod, düşen damlaların temel hareketini tanımlar.
Ancak renkli ve hareketli görünüm için JavaScript kodunu da eklememiz gerekecek.

3. Adım: HTML Widget ile JavaScript Kodunu Ekleyin

Efektin çalışması için bir miktar JavaScript kodu ekleyelim:

1. “HTML” widget’ını sürükleyip aynı bölüme bırakın.
2. Aşağıdaki kodu yapıştırın:

<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>
Code language: HTML, XML (xml)

Bu kod sayesinde damlalar farklı renk, hız ve konumlarda düşecek.

Adım: Efekti Özelleştirin

Kodu düzenleyerek görünümü tamamen değiştirebilirsiniz:

• Damla sayısı: for (let i = 0; i < 300; i++) kısmındaki sayıyı artırarak veya azaltarak yoğunluğu değiştirin.
• Renk paleti: colors dizisine yeni HEX kodları ekleyin.
• Hız: animationDuration değerlerini değiştirin.

Örneğin sade bir pastel görünüm için şu renkleri deneyebilirsiniz:

'#a2d2ff', '#bde0fe', '#ffc8dd', '#cdb4db'Code language: JavaScript (javascript)

Elementor ile Görsel Etkiyi Güçlendirin

Artık WordPress sitenizde Elementor ile canlı bir renkli yağmur efekti kullanabiliyorsunuz!
Bu tarz animasyonlar sitenizin havasını değiştirir, kullanıcı deneyimini güçlendirir ve ziyaretçilerin ilgisini çeker.