Crosshair & Detect Mouse/Touch Position via Move
5 posts
Page 1 of 1
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
See it in action here: http://codepen.io/mikethedj4/pen/fnizu
Preview: 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)
Preview: 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.
Quick Profile
Information
Posts: 158
Joined: Fri Jul 22, 2011 5:44 pm View Full Profile
Very nice ;)
Your code?
Your code?
Formerly known as RyggTonning.
PM me if you have any business proposals or similar.
PM me if you have any business proposals or similar.
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
It's published...
Last edited by mikethedj4 on Wed Jan 15, 2014 6:47 am, edited 1 time in total.
Quick Profile
Information
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am View Full Profile
looks awesome you are getting very very good in web designing/web developing
you are getting very very good in web designing/web developingFind my programs on Softpedia
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
I updated this tutorial to accomedate more for designers, but you can still use this method for gaming or other types of design.
Enjoy!
Enjoy!
5 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023