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.
CSS
JS
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.
CSS
Kod:
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) ); } }
HTML:
<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>
