Menu
close
Whilst this might be considered distracting, and possibly a bit of a gimmick, it might possibly have some uses. I used to have the crosshairs enabled on this site, but found the lines a little distracting. I have retained the highlight spot in the middle though, as I feel this creates quite a nice visual indicator when hovering over links. You can view a working codepen at the end of this post.
We'll need three html divs - add these at the bottom of your page, or even better, in the footer of your theme (if you don't want the crosshair lines, just leave lines 1-2):
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>
<div id="cursor-d" class="dotx"></div>
Next, we need a little css to control the appearance. Again, you can leave out the first half if you don't want the crosshairs (lines 1-22).
/* CROSSHAIRS
================================================== */
#crosshair-h{
width:100%;
height:1px;
margin-top:0;
position:absolute;
z-index: 6000 !important;
}
#crosshair-v{
height:100vh;
width:1px;
margin-left:0;
position:fixed;
top: 0;
z-index: 6001 !important;
}
.hair{
background-color:rgba(255,255,255,0.2);
pointer-events:none;
transition: all 0.05s ease;
}
/* HIGHLIGHT SPOT
================================================== */
#cursor-d {
position:absolute;
border: 1px solid rgba(0,0,0,0.3);
pointer-events:none;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 6002 !important;
margin-top: -15px;
margin-left: -15px;
transition: all 0.05s ease;
background: rgba(255,255,255,0.1);
}
#cursor-d.xhover {
/*animation: pulse 2s infinite;*/
background: rgba(255,255,255,0.3);
opacity: 0.5;
border: 1px solid rgba(0,0,0,0.3);
height: 8em;
width: 8em;
margin-top: -4em;
margin-left: -4em;
}
@keyframes pulse {
0% {
height: 6em;
width: 6em;
margin-top: -3em;
margin-left: -3em;
}
50% {
height: 8em;
width: 8em;
margin-top: -4em;
margin-left: -4em;
}
100% {
height: 6em;
width: 6em;
margin-top: -3em;
margin-left: -3em;
}
}
Finally, we just need a little javascript to make the three elements follow the cursor around the page (I've highlighted the rows that you can remove if you don't want the crosshair).
$(function(){
var cH = $('#crosshair-h');
var cV = $('#crosshair-v');
var dX = $('#cursor-d');
$(document).on('mousemove',function(e){
cH.css('top', e.pageY);
cV.css('left', e.pageX);
dX.css('left', e.pageX );
dX.css('top', e.pageY);
});
});
//add class to cursor-dot when hovering over link
$(function() {
$('a')
.on('mouseenter', function(){
$('#cursor-d').addClass('xhover');
})
.on('mouseleave', function(){
$('#cursor-d').removeClass('xhover');
});
});
...and this is the end result:
See the Pen Crosshairs cursor by Titus (@titus) on CodePen.
Specialising in responsive Wordpress website design, development, hosting, site optimisation, digital marketing, as well as graphic design for print.