MooTools Flashlight Effect
Written by David Walsh on Monday, March 30, 2009
This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.
Click here to learn what has changed to make your code framework-compatible.
Another reason that I love Twitter so much is that I’m able to check out what fellow developers think is interesting. Chris Coyier posted about a flashlight effect he found built with jQuery. While I agree with Chris that it’s a little corny, it is a neat effect so I ported it over to MooTools.
The Imagery
The CSS
body { background:#00022a url(flashlight.jpg) 50% 50% no-repeat; }
The MooTools Javascript
window.addEvent('domready',function() {
$(document.body).addEvent('mousemove',function(e) {
this.setStyle('background-position',[e.page.x - 250,e.page.y - 250]);
});
});
What’s really impressive about this effect is how little code is involved. While I wouldn’t recommend this for a commercial website, it doesn’t have some fun value.
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
I don’t know when this would be useful. Probably never. But it still is pretty interesting.
Yeah, probably not the most useful thing in the world, but fun none the less.
this can be usefull for smal background images i think, or if u want to highlighting some spots in text @ mouseover, for example a line from a long text
ps: didnt work right in FF3.1 beta wind/vis if u scrool is see, scrooled down a little bit and the background image is not on mouse position (cant post image because curser is not on screen
Cool. ;)
haha this is dope. Very clever~
This is a sweet MooTools effect. It seems that Chris code is running smoother within my browser rather then yours. Your background image is cooler though David. :DD
ps2nd: in the new safari beta it has the same bug as FF3.1b
Nice one, very creative!
BTW, You should add scroll offset to the position.
And MooTools Element#setStyle supports getting an array of integers so you could do
element.setStyle(“background-position”,[x,y]);
without concatenating ‘px’.
Agreed; not useful, but pretty cool. Ran into the same problem as a few people above, but it looks like Elad has suggested a fix.
Agreed with Elad. David, try changing ‘e.client’ to ‘e.page’.
Thanks for the tips everyone. I put about 5 minutes into this whole thing. I’ll update as soon as I get the chance.
Good catch everyone — updated.
we have download mootool.js and then its not working properly the flash light strucking some where
Oh, and by the way everyone, I know this is a total “webmaster” technique. I would never use it. Hahaha.
Hey David, Neat script.
Is there a way that you can do this with a DIV or Image rather than the body ?
I have this script I am working on, http://dev.lendrum.co.nz/image/index.php?l=&t=180&x=500&y=180
and want to put a box over the image on mouse over. ( as a target crop box ).
Actually, I think it’s totally useful for a ‘coming soon’ or ‘under construction’ site – thanks a bunch David!
I’m using it here: http://www.thecircuitsound.com
Cool …Very useful to me…
Thanks ..
This would be great for posting spoilers on IMDB or similar.
Seems like the links don’t hide in the darkness in Chrome and FF3…hope u can fix this. And thanks a lot for this
Here is an interesting real world example of this effect on a South African digital agency called Stonewall+:
http://www.stonewall.co.za
Wow, I wrote that page months ago just for grins and put it on the CSS_Tricks forum. Glad to hear that people like the idea, though I’m the first to admit it has little practical application.
I can imagine the effect utilized on kids’ site, count the cows, or where is daddy’s key for example :P.
David, Hi. Thanks for making this available. I’m interested in modifying the javascript to to trigger upon right click. I’m using the jQuery version. Any solutions? Thanks. Rob