Эффект капли

<!--Эффект капли-->
<!--https://mt-webdesign.ru/blob-effect-->
<!--Создаём классы при наведении-->
<script>
if ($(window).width() >= 768 && $(window).width() <= 30000) {
$(document).ready(function() { 
$('.list-shape-block').hover(function(){ 
$('.list-block').addClass('list-block-hover'); 
}, 
function(){ 
$('.list-block').removeClass('list-block-hover'); 
});
}); 
$(document).ready(function() { 
$('.list-shape-block-1').hover(function(){ 
$('.list-block-1').addClass('list-block-hover-1'); 
}, 
function(){ 
$('.list-block-1').removeClass('list-block-hover-1'); 
});
}); 
$(document).ready(function() { 
$('.list-shape-block-2').hover(function(){ 
$('.list-block-2').addClass('list-block-hover-2'); 
}, 
function(){ 
$('.list-block-2').removeClass('list-block-hover-2'); 
});
}); 
$(document).ready(function() { 
$('.list-shape-block-3').hover(function(){ 
$('.list-block-3').addClass('list-block-hover-3'); 
}, 
function(){ 
$('.list-block-3').removeClass('list-block-hover-3'); 
});
}); 
$(document).ready(function() { 
$('.list-shape-block-4').hover(function(){ 
$('.list-block-4').addClass('list-block-hover-4'); 
}, 
function(){ 
$('.list-block-4').removeClass('list-block-hover-4'); 
});
}); 
let mouseX = 0;
let ballX = 0;
let speed = 0.02;
function animate(){
let distX = mouseX - ballX;
ballX = ballX + (distX * speed);
document.querySelector(".list-block").style.left = ballX + "px";
document.querySelector(".list-block-1").style.left = ballX + "px";
document.querySelector(".list-block-2").style.left = ballX + "px";
document.querySelector(".list-block-3").style.left = ballX + "px";
document.querySelector(".list-block-4").style.left = ballX + "px";
requestAnimationFrame(animate);
}
animate();
document.addEventListener("mousemove", function(event){
mouseX = event.pageX;
});
}
</script>
<style>
.list-block, .list-block-1, .list-block-2, .list-block-3, .list-block-4 {
transform: translateX(-200px);
overflow: hidden;
}
.list-block-hover, .list-block-hover-1, .list-block-hover-2, .list-block-hover-3, .list-block-hover-4 {
transform: translateX(-200px);
overflow: hidden;
}
.list-block .tn-atom, .list-block-1 .tn-atom, .list-block-2 .tn-atom, .list-block-3 .tn-atom, .list-block-4 .tn-atom {
transform: translate(0px, -50%) scale3d(1, 1, 1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s !important;
-webkit-transform: translate(0px, -50%) scale3d(1, 1, 1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
-webkit-transition: opacity 700ms ease 0s, -webkit-transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s !important;
}
.list-block-hover .tn-atom, .list-block-hover-1 .tn-atom, .list-block-hover-2 .tn-atom, .list-block-hover-3 .tn-atom, .list-block-hover-4 .tn-atom {
-webkit-transform: translate(0px, -7%) scale3d(1, 1, 1) rotateX(30deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
-webkit-transition: opacity 700ms ease 0s, -webkit-transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s !important;
transform: translate3d(0px, -7%, 0px) scale3d(1, 1, 1) rotateX(30deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s !important;
}
</style>