I came across Jonathan's website and noticed that the circle, which is behind the cursor, tracks it slowly and distorts slightly when swiping faster (best to have a quick look at the website and move the cursor around, a bit difficult to explain).
I know how to create a custom cursor, but not how to make it track the actual cursor slowly and distort slightly.
Does anyone here have experience with this or know how to create something like this?
Here is the code (CSS, jQuery and HTML) for the cursor as a circle:
body {
background-color: #fff;
}
.cursor {
position: fixed;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgb(80, 80, 80);
pointer-events: none;
z-index: 999;
}
$(document).ready(function(){
var cursor = $(".cursor");
$(window).mousemove(function(e) {
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});
$(window)
.mouseleave(function() {
cursor.css({
opacity: "0"
});
})
.mouseenter(function() {
cursor.css({
opacity: "1"
});
});
$(".link")
.mouseenter(function() {
cursor.css({
transform: "scale(3.2)"
});
})
.mouseleave(function() {
cursor.css({
transform: "scale(1)"
});
});
$(window)
.mousedown(function() {
cursor.css({
transform: "scale(.2)"
});
})
.mouseup(function() {
cursor.css({
transform: "scale(1)"
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="/src/js/lib/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="cursor"></div>
</body>
</html>