How do you create "aura" effect from the mouse pointer?

Question

If you open google chrome and open multiple tabs, you see the effect by hovering over a background tab. The pointer will have an "aura" effect which follows it around.

To clarify, I'm NOT asking how to make the entire tab glow a lighter color, I'm asking how to give the pointer the effect within some specified radius of it.

I hadn't realized the aura effect before seeing this question! — Ates Goral, May 05 '11 at 18:29

score 22 · Accepted Answer · edited Oct 13 '19 at 00:27

The key part is to get the mouse coordinates, then to place a radial gradient with those coordinates.

var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a').mousemove(function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;
    xy = x + " " + y;
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
        .css({background: bgWebKit})
        .css({background: bgMoz});
    }).mouseleave(function() {
    $(this).css({
        background: originalBG
    });
});

Something like that will do the job.

Check this demo from the illustrious Chris Coyier: http://css-tricks.com/examples/MovingHighlight/

I didn't know that site existed... thanks a ton. Very helpful — CDelaney, May 05 '11 at 18:34

score 1 · Answer 2 · answered May 05 '11 at 18:13

some ideas --

use javascript to place an absolutely positioned semitransparent png under the cursor position
create a .cur file with your own cursor and some semi-transparent glow under it and hope the browser can render it
replace the entire cursor with javascript

Isaiah · Answer 3 · 2011-05-05T19:37:14.073

Why has nobody thought to mention CSS3 transitions? With CSS3 you can create this effect with pure css, no flash or javascript needed.

Here's a simple example for ya :D

#auraThingy{
  height:50px;
  width:200px;
  background:blue;
  transistion:background 3s;
  -webkit-transition:background 3s; /*safari/chrome*/
  -moz-transition:background 3s;  /*firefox*/
  -o-transition:background 3s;  /*opera*/
}
#auraThingy:hover{
  background:lightblue;
}

I found a nice link with info here http://www.w3schools.com/css3/css3_transitions.asp

Edit[ Just realized I should of read your entire post before answering, my bad ^-^ You could probably still use the transition with a gradient image, and on hover update the background image coordinates with the mouse position :/

There's no point on using transitions with this, since the mouse moves smoothly anyway (you can't usually make your mouse pointer instantly jump from one place to another). — Lea Verou, May 07 '11 at 16:35

score -9 · Answer 4 · answered May 05 '11 at 18:11

-9

$('some_element').hover(function(){
    $(this).css('opacity','.5');
},function(){
    $(this).css('opacity','.2');
});

Something like that.

Fiddle: http://jsfiddle.net/maniator/Sf92n/

answered May 05 '11 at 18:11

Naftali

144,921
39
244
303

4

a) This wasn't what he asked and b) Even if it was, this doesn't need any jQuery, it can be done with pure CSS, with the `:hover` pseudo-class which has been supported in browsers at least for the past 10 years. – Lea Verou May 07 '11 at 16:38

How do you create "aura" effect from the mouse pointer?

4 Answers4