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.


https://www.youtube.com/watch?v=_ypP-s8_Ed0

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>