Moving Highlight jquery plugin

[sorrentandrea]

Hello guys, few days ago I discovered a great visual effect for adding highlight on mouse movement. Then I looked for some implementation of that effect and I found this article from chris. So I started to write some code based on the one provided by chris.

During these days I just tried to figure out how to properly write a jquery plugin(this is my first one..).This is what I have right now.
http://pastebin.com/BzVEPD8G
Now what I would like to do is adding a fade-in effect for the gradient.
As I can see in the comment to the article chris says: “I worked on that for a long time, I was planning to include a version that did that, it was just FAR more complicated. It involved adding an additional element only for the highlight, which had to be specially positioned, and then the text needed another element as well to keep it above the gradient. And there were other troubles as well. I thought it complicated the tutorial too much to be worth it, but I agree, much nicer with a fade.”

I’m wondering if this is the only solution I can use here. Honestly, I tried to fake the effect adding a timer on mouseenter and increasing the value in the alpha channel in rgba. I don’t like this approach and I still have a lot of troubles with it but the other one seems to complex to me. Any suggestions?
Thanks,
Andrea

[sorrentandrea]

Thank you, I’ll make the change you suggested.

[sorrentandrea]

Gradient does not support transition. http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds
I’ll try to understand what I’m missing in my code. Thanks for your help. =)

[sorrentandrea]

I looked at your code, it works, but it presents the same problems highlighted by chris. Since the solution need an other element to work, if you have a text in that element it’ll be hidden.
I’ll update the post if I find a solution with just one element. Thanks for your time =)

[Shikkediel]

Not sure where TS is with developing the plugin but the above pen got rewritten so it doesn’t need an auxiliary element anymore. It’s a plugin itself now with the following method markup :

$('#element').gradientFade({

    duration: 2000,
    rate: 50, //frames per second
    from: '(20,20,20,1)',
    to: '(120,120,120,1)'
});

One can describe an rgb radial gradient within – and a fade speed.

[Shikkediel]

I think I’ll post this here since Chris’ original blog is closed. But I discovered something neat that I cannot find any reference about apart from noticing in dev tools and this bit of W3 spec :

CSS3 gradients are a special, advanced value of background-image — aside from the syntactical difference, gradient values appear in exactly the same place in the shorthand as other background-image values, and work in the same way.

http://www.w3.org/community/webed/wiki/CSS_shorthand_reference

This means the positioning of the highlight does not have to go through the gradient itself but the shorthand properties can be used for it! The gradient is a separate background layer for which all properties can be defined independently :

background :
radial-gradient(rgba(20,20,20,1), rgba(120,120,120,0)) 0 0 / 100% 100% no-repeat,
next layer...

I googled for quite a while but haven’t seen anybody use it. But it seems much easier to plug it into mousemove this way (and combine it with a fade).

Wrote some lines to get a variable with a shorthand version of all the original background properties as well :

var properties = ['color','image','position','size','repeat','attachment','origin','clip'];
var shorthand = '';

$.each(properties, function(key, trait) {
var value = $('#element').css('background-' + trait);
if (key == 2) shorthand += value + ' / '; // separate position from size
else shorthand += value + ' ';    
});

Applying it is then simply :

$('#element').css('background', shorthand);

[Shikkediel]

plug it into mousemove

Yep, couldn’t help myself from taking it to the next level…

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

[Shikkediel]

Previous pen got deleted…

http://codepen.io/Shikkediel/pen/wzPXXB

[Author]

Posts