Using Opacity to Show Focus with MooTools
I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level. One technique I like to use to achieve added dynamism is opacity. The following MooTools code grabs elements other than the one being focused on and fades them to 50%, thus increasing focus on the hovered item.
The MooTools JavaScript
(function() {
window.addEvent('domready',function() {
$$('.fade-area').each(function(container) {
container.getChildren().each(function(child) {
var siblings = child.getParent().getChildren().erase(child);
child.addEvents({
mouseenter: function() { siblings.tween('opacity',0.5); },
mouseleave: function() { siblings.tween('opacity',1); }
});
});
});
});
})();
We grab the siblings of the element group except the focused-on item and fade their opacity. Little code, little effect, big difference in perceived dynamism!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Works now.
You can delete all my comments. sorry.
Really nice effect. I’ve seen something similar which does not use opacity, but just adjusts background-position on the other elements to make them look blurred.
Nice fade out speed but the fade in speed needs to be much quicker. At the moment it delays focus on the hovered item for too long which makes the demo feel sluggish and unresponsive.
That’s a very nice feature. Have you tried it when you have more than 50 images being faded like in a gallery?
Nice, but in Firefox, when I hover on the list items (not the first one), something covers part of the 1 of the first list item…weird…
Cool demo. But I agree with Adriaan.
Weird — I can’t duplicate the issue.
@David: I sent you a screenshot.
I now also notice that if you look closely, 1 pixel on the right side of item 5, is also cut off when it is faded out…it doesn’t seem to happen with any other items, other than 1 and 5 though.
nice! can you do this on jQuery?
@Adriaan: Thanks for the screenshot, but I still can’t duplicate this. Very odd.
Lovely, great idea :)
Again, how do you come up with this stuff. Very solid and useful.
Could the collection of siblings be done once outside of the each call and an every() filter be run during the mouseenter events (mouseleave can just set every item’s opacity to full)
mouseenter: function(){ siblings.every(function(item){if(item !== this) item.tween(…
or is that more intensive?
I think you should use Fx.Elements instead of numerous Fx.Tweens. This won’t scale well…
wow! nice effect
@Aaron Newton: I see your point but I wouldn’t use this on a ton of elements — this is best for a small group of them.
@Adriaan
Is it possible you have the zoom setting in your browser turned on? That messes with all kinds of things.
Nice! I’d like to use this on my blog. Any chance of getting this in jQuery? :)
@Jeff: mmm, interesting point, my zoom is at the default setting, but when I zoom in, the problem disappears…maybe it’s because my resolution is very high: 1920×1200…
have the same problem that Adriaan has, but i use 1680×1050 maybe a moz-bug?
where is the jquery version?
Let me know when you’ve written it Javy!
Like this one! Thx.
This is a nice effect!
You can also get a similar one with just pure CSS. You won’t get that nice transition effect, but if you aren’t using Moo Tools on your site it’s a good solution. I have a working example on the horizontal nav menu on this site I designed: http://www.pacificapetcare.com/ and since you’re just changing the background image you can do other neat effects like the menu here http://www.animehotornot.com/
Simple and effective – nice one Dave!
I have just added this in an adapted form to a script that I am currently working on that was, until now, using a similar but far more complicated fade effect.
I am using it on 30 elements and it seems to be working fine.
Thanks for sharing :)
This is great. Anyone have any ideas how to adapt it to work on a data table? I’d love to use it for row highlighting.
Hi! I am from Russia. Use online translator =)
With png tried to do? In IE a black background appears … You can fix this + png fix ie 6?
Thanks)
Russia. Online Translator =)
Problem Adriaan visible with decreasing scale. (Firefox) ctrl+-
Look
http://i.imagehost.org/0630/1_10.jpg
in ie8 xhtml with a href not working ((( in html 4 work. bad…
shit! dont work on mootools 1.11 Joomla 1.5 ((
but this problem can be solved =)
solved all problems except the list item but I do not need), a good example. Thanks!!!
Great great work !!!
How can I accelerate the fading tween ?
Thx,
Alex
I have a small bug in IE 7 and 8 my styles changed ???? The typography change and my borders desapears when fading ???
Do you have an idea why ?
Very nice ;-) !!!
But do you know why in the demo with IE7 and IE8 the text change and the list disapear ?
I have the same problem with a border and texts in my new site ?
Thx
Hi,
I have the same Problem. After hovering all borders in Internet Explorer disappear? Any solution?
Very strange error, how can I have this work with images that have links? if I add links to my images there is a very strange problem in safari and ie where the fade only affects 1/4 the image?
I guess this will work.
(function() {
window.addEvent(‘domready’,function() {
$$(‘.fade-area’).each(function(container) {
container.getElements(‘img’).each(function(child) {
var siblings = child.getParent(‘div’).getElements(‘img’).erase(child);
child.addEvents({
mouseenter: function() { siblings.tween(‘opacity’,0.5); },
mouseleave: function() { siblings.tween(‘opacity’,1); }
});
});
});
});
})();
Great effect.
But what if you want links on your images or list items (it doesn’t work for me)?
By