Make this Bouncing Ball Image Effect in Elementor/WordPress Website

 

 

Code Snippet for Bounce Image Effect/Animation:

<style>

.mdw-bouncing-image{
    --moving-speed: 50;
    --moving-speed-tablet: 40;
    --moving-speed-mobile: 25;
    
    --rotating-speed: 50;
}

.mdw-bouncing-image{
    height: 100%;
    width: 100%;
    opacity: 0;
    animation: slideVertical calc((1s*var(--ht,2)*50)/(var(--moving-speed,50))) linear alternate infinite;
    transition: all 0.5s ease-in-out;
}
.mdw-bouncing-image.showing{
    opacity: 1;
}
.mdw-bouncing-image .elementor-widget-container{
    animation: slideHoraizontal calc((1s*var(--wd,4)*50)/(var(--moving-speed,50))) linear alternate infinite;
}
.mdw-bouncing-image img{
    filter: drop-shadow(0 0 40px rgba(0,0,0,0.5));
    animation: rotate calc(50/var(--rotating-speed,50)*10s) linear infinite;
}

@media (max-width: 1024px){
.mdw-bouncing-image{
    --moving-speed: var(--moving-speed-tablet, --moving-speed);
}
}
@media (max-width: 767px){
.mdw-bouncing-image{
    --moving-speed: var(--moving-speed-mobile, --moving-speed);
}
}

@keyframes slideVertical{
0%{
    transform: translateY(0%);
}
100%{
    transform: translateY(calc(100% - 1px*var(--h,var(--w,100))));
}
}
@keyframes slideHoraizontal{
0%{
    transform: translateX(0%);
}
100%{
    transform: translateX(calc(100% - 1px*var(--w,100)));
}
}
@keyframes rotate{
0%{
    transform: rotate(0deg);
}
100%{
    transform: rotate(360deg);
}
}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery

function bouncing(){
$('.mdw-bouncing-image').each(function(){
    
    var $t = $(this),
        width = $t.width(),
        height = $t.height(),
        imageWidth = $t.find('img').width(),
        imageHeight = $t.find('img').height()
        
    $t.css('--wd', ( width - imageWidth ) / 400)
    $t.css('--ht', ( height - imageHeight ) / 400)
    
    $t.css('--h', imageHeight)
    $t.css('--w', imageWidth)
    
    $('.mdw-bouncing-image').addClass('showing')
})
}

$(document).ready(bouncing)
$(window).on('load resize', bouncing)

</script>