Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Spotlight bookmarklet
// Save this in a bookmarklet and click it on a page:
javascript:(function(){function d(a,c){document.body.style.webkitClipPath="circle("+a+"px, "+c+"px, "+b+"px)"}var b=90;window.addEventListener("mousemove",function(a){d(a.pageX,a.pageY)});window.addEventListener("mousewheel",function(a){if(a.shiftKey){a.preventDefault();var c=a.wheelDeltaY;b+=-c;b=0<c?Math.max(90,b):Math.min(b,window.innerHeight/2);d(a.pageX,a.pageY)}})})();
// Or paste this in the console and mouse over the page.
// SHIFT+mousewheel scroll makes the circle bigger/smaller.
(function() {
var radius = 90; // px
function move(x, y) {
// CSS clip path - http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-clip-path
document.body.style.webkitClipPath = 'circle(' + x + 'px, ' + y + 'px, ' + radius + 'px)';
document.body.style.mozClipPath = 'circle(' + x + 'px, ' + y + 'px, ' + radius + 'px)';
document.body.style.msClipPath = 'circle(' + x + 'px, ' + y + 'px, ' + radius + 'px)';
document.body.style.oClipPath = 'circle(' + x + 'px, ' + y + 'px, ' + radius + 'px)';
document.body.style.clipPath = 'circle(' + x + 'px, ' + y + 'px, ' + radius + 'px)';
}
window.addEventListener('mousemove', function(e) {
move(e.pageX, e.pageY);
});
// Holding down SHIFT and scrolling grows/shrinks the circle.
window.addEventListener('mousewheel', function(e) {
if (!e.shiftKey) {
return;
}
e.preventDefault(); // Prevent scrolling.
var deltaY = e.wheelDeltaY;
radius += -deltaY;
if (deltaY > 0) { // up / shrink
radius = Math.max(90, radius);
} else {
radius = Math.min(radius, window.innerHeight / 2);
}
move(e.pageX, e.pageY);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment