<!--Подсказки по наведению курсора
https://mt-webdesign.ru/cursor-img-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="cursor-follower"></div>
<style>
@media screen and (max-width: 480px) {
.cursor-follower {
display: none;
}
}
body {
overflow-x: hidden;
}
.cursor-follower {
position: absolute;
background-color: #000;
width:10px;
height: 10px;
border-radius: 100%;
z-index:10000;
transform: translate(70%, 70%);
user-select: none;
pointer-events:none;
transition:
0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) background-image,
0.2s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
}
.cursor-active {
transform: translate(70%, 70%) scale(10);
background-size: cover;
}
.-img-1 {
background-image: url('https://static.tildacdn.com/tild3439-6432-4930-b565-393834303031/drag2.svg');
}
.-img-2 {
background-image: url('https://static.tildacdn.com/tild3431-3166-4433-a437-633263313165/Frame_6756957.svg');
}
</style>
<script>
follower = $(".cursor-follower");
var posX = 0,
posY = 0;
var mouseX = 0,
mouseY = 0;
TweenMax.to({}, 0.016, {
repeat:-1,
onRepeat:function(){
posX += (mouseX - posX) / 9;
posY += (mouseY - posY) / 9;
TweenMax.set(follower, {
css: {
left: posX - 12,
top: posY - 12
}
});
TweenMax.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
});
}
});
$(document).on("mousemove",function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".cursor-hover-img-1").on("mouseenter mouseleave", function(){
$(".cursor-follower").toggleClass("cursor-active -img-1");
});
$(".cursor-hover-img-2").on("mouseenter mouseleave", function(){
$(".cursor-follower").toggleClass("cursor-active -img-2");
});
</script>