treehouse : what would you like to learn today?
Web Design Web Development iOS Development

A Flashlight jQuery Page

  • This is a simple page that uses jQuery to follow you mouse around and move the center of the background image under your mouse. Useless I know, but ridiculously fun. Plus, I'm sure my code could be better.

    http://home.comcast.net/~vonholdt/test/flashlight.htm
  • Yeah it's kinda cheezy but I get a kick out of stuff like that sometimes =)
  • Very cool. No readability, but very cool.

    As Chris said, and I agree, I enjoy proof of concepts.
  • Thanks Chris and Matt!!!

    @Soap: It's ridiculously fun and simultaneously useless isn't it?
  • David Walsh ported this to MooTools

    http://davidwalsh.name/mootools-flashlight
  • I really liked this technique and I wouldn't call it totally useless :) It can be put to an awesome use to create a Harry potter themed website in which we could toggle this technique in a particular section to achieve the flashlight spell a.k.a 'Lumos'.

    It could also be used for some kind of a game if one could innovate in the right direction ;)

    Nevertheless, Thanks for sharing it with us :)
  • Has anyone tried doing this with the background on a top DIV instead? So you don't have to worry about the colors?

    <body>
    All the Content
    <div style="background: url(transparent-hole-as-the-flashlight.png); z-index:9999;"></div>
    </body>

    Or maybe that's too heavy for the browser, since you have to use a pretty big flashlight picture as the bg... (like 1900*1200)...