How To Create a Torch Effect With jQuery

April 16th, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

On the homepage of this site you’ll notice that there is a series of panels advertising each service. My favourite one is the ‘Contact Us‘ panel, mainly because of the effect being used. I call it the ‘Torch Effect‘ because it’s like someone shining a torch in the black, although I’m not entirely sure this is the technical term for it.

Torch Effect

In this post I will be showing you how to create this sort of effect, including the HTML, CSS and jQuery used.

The HTML

The HTML is very simple and contains just two empty divs, one nested within the other, and a div to contain them around the outside:

<div class="panel">
    <div class="background"><div class="hole"></div></div>
</div>

The CSS

The CSS for these two divs can be found below

.background { 
    overflow: hidden;
    height: 285px; 
    width: 285px; 
    background: transparent url(background.jpg) no-repeat; 
    background-size: cover; 
}

.hole { 
    position: absolute; 
    top: -300px; /* Sets hole starting Y position */
    left: -345px; /* Sets hole starting X position */
    width: 800px; /* Width of image containing hole */
    height: 800px; /* Height of image containing hole */
    background: transparent url(hole.png) no-repeat; 
}

Our background image (background.jpg) looks like so:

home-panel-contact-map

And our hole image (hole.png): (resized for the purpose of this post)

home-panel-contact-hole

The jQuery

With the HTML and CSS above you should at least have something that looks right. Now all we need to do is bring it to life. When the user hovers their mouse over the panel we want the hole to follow the cursor.

I include below the jQuery used:

jQuery('.panel').mousemove(function(e)
{
    var $div = jQuery(this);
    
    // Get cursor position
    var mouse_left = (e.pageX - $div.offset().left);
    var mouse_top = (e.pageY - $div.offset().top);

    var el = $div.children('.background').children('.hole');
       
    // set new left position
    var new_left = mouse_left - 345 - 65;
    
    // Make sure the hole doesnt go off the left
    if (new_left < -345) { new_left = -345; }
    
    // Make sure the hole doesnt go off the right
    if (mouse_left > ($div.width() - 65)) { new_left = ($div.width() - 130) - 345; }
       
    el.css("left", new_left + "px");
    
    // set new top position
    var new_top = mouse_top - 300 - 65;
    
    // Make sure the hole doesnt go off the top
    if (new_top < -300) { new_top = -300; }
    
    // Make sure the hole doesnt go off the bottom
    if (mouse_top > ($div.height() - 65)) { new_top = ($div.height() - 130) - 300; }
       
    el.css("top", new_top + "px");
});

And there we have it. If incorporating onto your own site, you’ll no doubt have to change the dimensions to meet your needs. Hopefully this should be enough to get you started though in generating your own torch effect.

View Demo

This entry was posted on Wednesday, April 16th, 2014 at 2:10 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first