Pointer Pointer Pointer by @cowboy
Idea by @brianarn
by secretgspot
HTML
<script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.js"></script>
<div id="msg"><img...
CSS
html, body { background: #000; color: #ccc; }
body { font-size: 14px; font-family: Helvetica; }
#msg, #lol { position: absolute }
#msg { text-align: center; width: 100%; top: 45%; }
#msg img { margin-bottom: 30px; visibility: hidden; }
#lol { display: none; }
a { color: #ffa; }
JavaScript
$(function() {
var x, y;
var lol = (function() {
var elem = $("#lol");
return function(x, y) {
if (arguments.length > 0) {
elem.show().css({
left: x - elem.width() / 2,
top: y - elem.height() / 2
});
} else {
elem.hide();
}
};
}());
var msg = (function() {
var elem = $("#msg");
var imgElem = elem.find("img");
var txtElem = elem.find("div");
return function(str) {
if (str) {
imgElem.css("visibility", "visible");
txtElem.text(str);
elem.show();
} else {
elem.hide();
}
};
}());
var timeoutId;
var debounced = $.debounce(500, function() {
msg("Pointer located. Pointing...");
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
msg();
lol(x, y);
}, 1000);
});
$(document).on("mousemove", function(event) {
if ($(event.target).is("a")) { return; }
lol();
msg("Finding pointer... Please hold still.");
x = event.pageX;
y = event.pageY;
clearTimeout(timeoutId);
debounced();
});
});