طراحی بخش جام ملت های آسیا

<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>