We've all seen war movies with this full-screen cursor crosshair on computers or even in some of the animations you see.
For example, at the beginning of this YouTube video titled “Dishonorable Disclosures” you see exactly what I'm talking about. - https://www.youtube.com/watch?v=X-Xfti7qtT0
Another example is CrossHair 1.1 for Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml
I really think it's possible to do this in HTML5, but I have no idea if it is in jQuery, not to mention how to do it in any language. However, I would like to know so that I can do it myself. If anyone has any links, resources, or anything that helps with this, I'm sure others will want to know how to do this. Any help would be greatly appreciated.
Thanks and taking care.
Many thanks to Gaby aka J. Petrioli for this. I put the complete code below (with a little style) to save some 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>