Colorful Rain Background Effect in Elementor 2022 | WordPress Tutorial 2022

 

Video Tutorial

CSS code snippet

1. 1. selector{ --drop-height: 1650px; } 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: 4.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) ); } }
   2. 
      

JavaScript code snippet

1. 1. <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <script> var desktopAmount = 350, tabletAmount = 150, mobileAmount = 100, minSpeed = 3, maxSpeed = 7, minWidth = 2, maxWidth = 4, minOpacity = 0.3, maxOpacity = 0.7, colors = [ '#00FFFF', '#00FF00', '#FF0000', '#F57C00', ], $ = 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>
   2.