HTML5 or JQuery Full Screen Crosshair Cursor

Question

We've all seen those military movies with that full screen crosshair cursor on the computers, or even in some animations you see it.

For example in the beginning of this video on YouTube titled, "Dishonorable Disclosures" you see exactly what I'm talking about. - https://www.youtube.com/watch?v=X-Xfti7qtT0

Another example is the program "CrossHair 1.1" for Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

I do believe it's possible to do this in HTML5, but have absolutely no idea if it is in JQuery, let alone how to do it in either language. However I'd love to find out so I can do it myself. If anyone has any links, resources, or anything to help out with this as I'm sure others would want to learn how as well. Any help would be greatly appreciated.

Thanks and take care.

Much thanks to "Gaby aka G. Petrioli" for figuring this out. I put the full code down below (with a little styling) to save some of you time.

<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Crosshair Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
html, body {
    cursor:none;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:#003131;}

a {
    cursor:none;
    color:rgba(255,255,255,0.5);
    text-shadow:0px 0px 8px silver;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
    border-radius:10px;}

a:hover {
    color:rgba(255,255,255,0.8);
    text-shadow:0px 0px 8px rgba(255,255,255,0.8);}

#crosshair-h {
    width:100%;
    height:2px;
    margin-top:-1px;}

#crosshair-v {
    height:100%;
    width:2px;
    margin-left:-2px;}

.hair {
    position:fixed;
    background-color:rgba(0,250,253,0.5);
    box-shadow:0 0 5px rgb(0,250,253);
    pointer-events:none;
    z-index:1;}
</style>
<script type="text/javascript"> 
$(document).ready(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');

    $(document).on('mousemove',function(e) {
        cH.css('top',e.pageY);
        cV.css('left',e.pageX);
    });

    $("a").hover(function() {
        $(".hair").stop().css({backgroundColor: "white"}, 800);
        $(".hair").stop().css({boxShadow: "0 0 5px rgb(255,255,255)"},800)},
    function() {
        $(".hair").stop().css({backgroundColor: "rgba(0,250,253,0.5)"}, 800);
        $(".hair").stop().css({boxShadow: "0 0 5px rgb(0,250,253)"},800)
    });
});
</script>
</head>
<body>
    <div id="crosshair-h" class="hair"></div>
    <div id="crosshair-v" class="hair"></div>
</body>
</html>

Can't you just make a large image of a crosshair and scroll it across the screen? — Tim Withers, Oct 04 '12 at 23:54
Yeah, but larger images use more memory, and cpu just to load the image/file. Also I don't know how I'd define where the center part of the cursor would be in the image. — Michael Schwartz, Oct 05 '12 at 00:15
Make the image with SVG, no need for it be more than a few hundred bytes. — robertc, Oct 05 '12 at 00:24

score 10 · Accepted Answer · edited Dec 29 '21 at 22:38

10

You can do it with CSS and a tiny jQuery ..

$(function(){
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');
    
    $(document).on('mousemove',function(e){
        cH.css('top',e.clientY);
        cV.css('left',e.clientX);
    });
});

*{cursor:none;}
#crosshair-h{
    width:100%;
    height:2px;
    margin-top:-1px;
}
#crosshair-v{
    height:100%;
    width:2px;
    margin-left:-1px;
}
.hair{    
    position:fixed;
    background-color:rgba(100,100,100,0.5);
    box-shadow:0 0 5px rgb(100,100,100);
    pointer-events:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>

Demo at http://jsfiddle.net/WmZ44/1/

edited Dec 29 '21 at 22:38

General Grievance

4,555
31
31
45

answered Oct 05 '12 at 00:37

Gabriele Petrioli

191,379
34
261
317

Thank you so much. Anyway to hide the default mouse pointer in replace for this? – Michael Schwartz Oct 05 '12 at 00:44
1

@mikethedj4 you could use the css rule `*{cursor:none;}` to completely disable it. Also you should add `pointer-events:none` on the `.hair` class to make the crosshair not interfere with normal behaviour of the mouse and the elements underneath it.. [**DEMO**](http://jsfiddle.net/WmZ44/3/) (*updated answer as well*) – Gabriele Petrioli Oct 05 '12 at 00:51
I made a new index.html file and I imported the code, but it's not working. via the crosshair via mousemove. Can you explain why? (I copied and pasted as it is) – Michael Schwartz Oct 05 '12 at 00:56
You need to include the jQuery library. – Gabriele Petrioli Oct 05 '12 at 00:59
I did, but I downloaded the JQuery file, and loaded it from my hard drive that way. Only works if I hyperlink it. Anyway thanks bro – Michael Schwartz Oct 05 '12 at 01:02
Very nice idea. I have rewrote it without jquery and works beautifully but stops functioning properly when page is scrolled. Perhaps does the same with jQuery. – ljgww May 15 '21 at 00:39
1

@ljgww updated answer to use `clientX`, `clientY` instead of the `page` ones, to handle the scrolling case. – Gabriele Petrioli May 15 '21 at 22:28

HTML5 or JQuery Full Screen Crosshair Cursor

1 Answers1