Crosshair & Detect Mouse/Touch Position via Move

5 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

See it in action here: http://codepen.io/mikethedj4/pen/fnizu

Preview:
crosshair-mouse-detect.png
How this is done is pretty simple.
- HTML marks everything up
- CSS is used to make this look 'stunningly beautiful :)'
- Javascript/JQuery to detect mouse position via on mousemove/touchmove & we use e.stopPropagation() to disable page scroll on mobile devices.

Enjoy!

Full Code: (You can also experiment with it on Codepen)
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Crosshair Demo</title>
<meta charset='utf-8'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
html, body {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background: #7abcff;
}

a {
  font: 50px arial;
  outline:none;
  color:green;
  text-shadow:0px 0px 8px silver;
  transition:all 100ms ease-in-out;
  -webkit-transition:all 100ms ease-in-out;
  -moz-transition:all 100ms ease-in-out;
  -o-transition:all 100ms ease-in-out;
  -ms-transition:all 100ms ease-in-out;
}

a:hover {
  color:#567;
}

#crosshair-h {
  width: 100%;
}

#crosshair-v {
  height: 100%;
}

.hair {
  position: fixed;
  top:0; left:0;
  margin-top: -3px;
  margin-left: -2px;
  background: transparent;
  border-top: 1px dotted #000;
  border-left: 1px dotted #000;
  pointer-events: none;
  z-index: 13;
}

#mousepos {
  position: absolute;
  top:0; left:0;
  padding: 10px;
  margin: 10px;
  font: 14px arial;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 24px;
  z-index: 1;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // Setup our variables
    var cH = $('#crosshair-h'),
        cV = $('#crosshair-v');
    
    $(this).mousemove(function(e) {
      var x = e.pageX - 1;
      var y = e.pageY - 1;
      cH.css('top', e.pageY);
      cV.css('left', e.pageX);
      
      $('#mousepos').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
      }, 800);
      $('#mousepos').text( "X: " + x + "px, Y: " + y + "px");
      e.stopPropagation();
    });
    
    // Anchor Hover Effects
    $("a").hover(function() {
      $(".hair").stop().css({borderColor: "#fff"}, 800)},
    function() {
      $(".hair").stop().css({borderColor: "black"},800)
    });
    e.stopPropagation();
});
</script>
</head>
<body>
  <div id="crosshair-h" class="hair"></div>
  <div id="crosshair-v" class="hair"></div>
  <span id="mousepos">X: 0px, Y: 0px</span>
  
  <center>
    <a href="javascript:void(0)">Sample</a>
  </center>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Thu Jan 16, 2014 7:26 am, edited 3 times in total.
User avatar
Matt
VIP - Donator
VIP - Donator
Posts: 158
Joined: Fri Jul 22, 2011 5:44 pm

Re: Fullscreen Crosshair Cursor
Matt
Very nice ;)
Your code?
Formerly known as RyggTonning.
PM me if you have any business proposals or similar.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Fullscreen Crosshair Cursor
mikethedj4
It's published...
Last edited by mikethedj4 on Wed Jan 15, 2014 6:47 am, edited 1 time in total.
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am

Re: Fullscreen Crosshair Cursor
Shim
looks awesome :) you are getting very very good in web designing/web developing
Find my programs on Softpedia
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

I updated this tutorial to accomedate more for designers, but you can still use this method for gaming or other types of design.

Enjoy!
5 posts Page 1 of 1
Return to “Tutorials”