MooTools Flashlight Effect

By  on  

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

Flashlight

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.

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

  • By
    Highlighter: A MooTools Search & Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

Discussion

  1. I don’t know when this would be useful. Probably never. But it still is pretty interesting.

  2. Yeah, probably not the most useful thing in the world, but fun none the less.

  3. Alelo

    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

  4. Alelo

    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

  5. Salih GEDİK

    Cool. ;)

  6. haha this is dope. Very clever~

  7. 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

  8. Alelo

    ps2nd: in the new safari beta it has the same bug as FF3.1b

  9. 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’.

  10. 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.

  11. Agreed with Elad. David, try changing ‘e.client’ to ‘e.page’.

  12. Thanks for the tips everyone. I put about 5 minutes into this whole thing. I’ll update as soon as I get the chance.

  13. Good catch everyone — updated.

  14. gopinathan

    we have download mootool.js and then its not working properly the flash light strucking some where

  15. Oh, and by the way everyone, I know this is a total “webmaster” technique. I would never use it. Hahaha.

  16. 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 ).

  17. 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

  18. Cool …Very useful to me…
    Thanks ..

  19. Chris Martin

    This would be great for posting spoilers on IMDB or similar.

  20. Ankie

    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

  21. Ivan

    Here is an interesting real world example of this effect on a South African digital agency called Stonewall+:

    http://www.stonewall.co.za

  22. 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.

  23. dina

    I can imagine the effect utilized on kids’ site, count the cows, or where is daddy’s key for example :P.

  24. 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

  25. Thanks for this tutorial dave. I separated the code into external files. I couldn’t get the flashlight to work. I think the problem is with the calling of the Mootools. How do I call Mootools in an HTML document?

    I used to call the style sheet and it works fine.

    I think this will be a useful feature for a new product launch page where teaser images are shown for one to see the status of the product. Just fun.

    Will appreciate a reply from anybody who can help me out.

  26. Second paragraph should have been: I used “” to call the style sheet.

  27. Hi,

    Do you think it is possible to make the “flashlight” discovers a background image?

    I saw on a site the following effect: http://www.theatre-des-varietes.fr/ (the site of a French theater. They used flash for effect).

    The worry is that CSS can not assign multiple background to the same area … suddenly, I found no solution for a similar effect …

  28. tatiana

    Hello, I don´t understand how I can use the JS and css, because it don´t function…

    Thanks :)

  29. Farah

    I really found it useful to me.
    But the problem is I use dreamweaver and I don’t know how to put this flashlight effect to my website.
    If someone know how, please tell me.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!