Grow your CSS skills. Land your dream job.

A Flashlight jQuery Page

  • von
    # March 26, 2009 at 7:57 pm

    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

    # March 26, 2009 at 9:31 pm

    Yeah it’s kinda cheezy but I get a kick out of stuff like that sometimes =)

    # March 26, 2009 at 11:09 pm

    Very cool. No readability, but very cool.

    As Chris said, and I agree, I enjoy proof of concepts.

    # August 24, 2009 at 2:14 am

    i got bored and did one of my own

    http://affluentpracticemarketing.com/ti … lashlight/

    von
    # August 25, 2009 at 4:42 pm

    Thanks Chris and Matt!!!

    @Soap: It’s ridiculously fun and simultaneously useless isn’t it?

    von
    # August 28, 2009 at 9:13 pm

    David Walsh ported this to MooTools

    http://davidwalsh.name/mootools-flashlight

    # September 5, 2009 at 5:01 pm

    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 :)

    # December 11, 2009 at 8:33 pm

    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)…

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".