Sometimes a simple mouse pointer (cursor) is not enough. Then something of your own has to be found. Replacing the cursors with another graphic is in many cases insufficient or leads to compatibility problems in other browsers. We need something better!

First of all we need some HTML code:

<div class="cursor">
    <div class="cursor-pointer"></div>
    <div class="cursor-effect"></div>
</div>

Then we give the elements their essential attributes and design them according to our ideas:

.cursor--ready,
.cursor--ready *,
.cursor--ready *:hover {
    cursor: none;
}

.cursor {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
}

.cursor-pointer {
    position: absolute;
    top: -100%;
    left: -100%;
}
	
.cursor-pointer:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #a3ff12;
    opacity: 1;
    transition: all 256ms ease;
    -webkit-transition: all 265ms ease;
}
	
.cursor--active .cursor-pointer:before {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 16px #a3ff12;
    opacity: 0.64;
}
	
.cursor-effect {
    position: absolute;
    top: -100%;
    left: -100%;
    transition: top 100ms ease, left 100ms ease;
    -webkit-transition: top 100ms ease, left 100ms ease;
}
	
.cursor-effect:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    border: 1px solid rgba(163, 255, 18, 0.48);
    border-radius: 100%;
    opacity: 1;
    transition: all 256ms ease;
    -webkit-transition: all 256ms ease;
}
	
.cursor--active .cursor-effect:before {
    width: 0;
    height: 0;
    opacity: 0;
}
	
@media (max-width: 768px) {
    .cursor {
        display: none;
    }
}

So that everything works properly, a little bit of Javascript is missing at the end:

(function($) {
    var cursorPointer = $('.cursor-pointer');
    var cursorEffect = $('.cursor-effect');
    var cursorEffectOffsetTop = (cursorEffect.height() / 2) - (cursorPointer.height() / 2);
    var cursorEffectOffsetLeft = (cursorEffect.width() / 2) - (cursorPointer.width() / 2);
			
    $('body').addClass('cursor--ready');
			
    $(document).on('mousemove', function (e) {
        cursorPointer.css({
            'top': e.pageY + 'px',
            'left': e.pageX + 'px'
        });
				
        cursorEffect.css({
            'top': (e.pageY - cursorEffectOffsetTop) + 'px',
            'left': (e.pageX - cursorEffectOffsetLeft) + 'px'
        });
    });
			
    $(document).on('mouseenter', 'a, label, input, button', function () {
	$('.cursor').addClass('cursor--active');
    });
			
    $(document).on('mouseleave', 'a, label, input, button', function () {
        $('.cursor').removeClass('cursor--active');
    });
})(jQuery);

Leave a Reply

Your email address will not be published. Required fields are marked *