htmljqueryfullscreenmouse-cursorpanning

HTML5 or JQuery Full Screen Crosshair Cursor

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>
Solution

  • 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/