<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
$("#allrecords").prepend('<div class="cursor"></div>');
$("#allrecords").prepend('<div class="cursor-follower"></div>');
</script>
<style>
@media only screen and (min-width : 320px) and (max-width : 480px) {
.cursor-follower,
.cursor{
display: none;
}
</style>
<script>
var cursor = $(".cursor"),
follower = $(".cursor-follower");
var posX = 0,
posY = 0,
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 - 20,
top: posY - 20
}
});
TweenMax.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
});
}
});
$(document).on("mousemove", function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".cursor-hover").on("mouseenter", function() {
cursor.addClass(" active");
follower.addClass(" active");
});
$(".cursor-hover").on("mouseleave", function() {
cursor.removeClass(" active");
follower.removeClass(" active");
});
$(".cursor-hover-2").on("mouseenter", function() {
cursor.addClass(" active-2");
follower.addClass(" active-2");
});
$(".cursor-hover-2").on("mouseleave", function() {
cursor.removeClass(" active-2");
follower.removeClass(" active-2");
});
</script>
<style>
.cursor.active {
opacity: 1;
transform: scale(1);
}
.cursor.active::before {
opacity: 1;
}
.cursor-follower {
position: absolute;
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 80;
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
user-select: none;
pointer-events: none;
transform: translate(4px, 4px);
mix-blend-mode: difference;
}
.cursor-follower::before {
z-index: 80;
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 100%;
opacity: 1;
}
/*Меняем путь до изображения при наведении - background-image*/
.cursor-follower.active {
background-image: url("https://static.tildacdn.com/tild3439-6432-4930-b565-393834303031/drag2.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
opacity: 1;
transform: scale(3);
mix-blend-mode: normal;
}
.cursor-follower.active-2 {
/*background-image: url("https://static.tildacdn.com/tild3533-3132-4531-b633-316639656364/Frame_147.svg");*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #fff;
opacity: 1;
transform: scale(1.4);
mix-blend-mode: difference;
}
</style>