Site URL: https://www.davidjackspencer.co/
I have successfully created a custom cursor using the code below, but cannot figure out how to add a delay to the cursor movement like this example here: https://codepen.io/ciprian/pen/BazvjRZ
I've posted this in Settings > Advanced > Header
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And this in Settings > Advanced > Footer
<script>
$( ( ) => {
$( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
$( window ).mousemove ( function ( e ) {
$( '.cursor' ).css ( {
left: e.pageX,
top: e.pageY
} );
} );
$( window ).mousemove ( function ( e ) {
$( 'a' ).on ( 'mouseenter', function ( ) {
$( '.cursor' ).addClass ( 'active' );
} );
} );
$( window ).mousemove ( function ( e ) {
$( 'a' ).on ( 'mouseleave', function ( ) {
$( '.cursor' ).removeClass ( 'active' );
} );
} );
} );
</script>
After doing that I've also pasted this in Design > Custom CSS
@media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 10px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 99999999999;
}
.cursor.cursor-dot {
background: #ffffff; /* This defines the color of the cursor */
mix-blend-mode: difference; /* This line is for the circle to invert Delete this line if you dont want the circle to invert */
transition: width 0.8s, height 0.7s, background-color 0.9s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 60px;
background-color: #ffffff;
}
Any help would be greatly appreciated!