Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
jQuery(document).ready(function($){
/*Add div in body to use as cursor*/
$('body').prepend('<div class="new_cursor"></div>');
/* Media query so cursor only apply in desktop */
if($(window).width() >= 1024){
var $newcursor = document.querySelector('.new_cursor');
/* Move New Cursor */
$(window).on('mousemove', function(e){
gsap.to($newcursor, 0.4, {
x: e.clientX - 15,
y: e.clientY - 15
})
});
/* To zoom in and zoom out cursor on link */
var $linkelement = document.querySelectorAll('a');
for (var i = 0; i < $linkelement.length; i++) {
$linkelement[i].addEventListener('mouseenter', linkHover);
$linkelement[i].addEventListener('mouseleave', linkHoverOut);
}
function linkHover() {
gsap.to($newcursor, 0.3, {
scale:3
})
}
function linkHoverOut() {
gsap.to($newcursor, 0.3, {
scale: 1
})
}
}
});
</script>
<style>
.new_cursor {
position: fixed;
top: 0;
left: 0;
height:30px;
width:30px;
background-color:#fff;
border-radius:100%;
mix-blend-mode: difference;
z-index: 9999;
pointer-events: none;
}
@media only screen and (min-width: 1024px) {
body {
cursor:none;
}
}
</style>
