Google-Style Element Fading Using MooTools or jQuery
Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter -- no need for more clutter. Here's how you can implement a similar system with MooTools or jQuery.
The HTML
<body>
<div id="fade1" class="fadein">{ fade area 1 }</div>
<div id="fade2" class="fadein">{ fade area 2 }</div>
<div id="fade3" class="fadein">{ fade area 3 }</div>
<!-- other stuff here -->
</body>
Place the HTML where you'd like -- it has no bearing on our system besides needing each element to have the fadein CSS class.
The CSS
@media all {
.fadein { visibility:hidden; }
#fade1 { /* place wherever on the page */ }
#fade2 { /* place wherever on the page */ }
#fade3 { /* place wherever on the page */ }
}
@media handheld {
.fadein { visibility:visible; }
}
The elements that will fade in will need to have their visibility set to hidden. We'll accommodate for the no-JavaScript user below.
The MooTools JavaScript
/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
oneEvent: function(type, fn) {
return this.addEvent(type, function() {
this.removeEvent(type, arguments.callee);
return fn.apply(this, arguments);
});
}
});
/* make it happen! */
window.addEvent('domready',function() {
var fades = $$('.fadein').setStyle('opacity',0);
var doFadeIn = function(e) {
if(!e.key || e.key == 'tab') {
fades.fade('in');
}
};
$(document.body).oneEvent('mousemove',doFadeIn);
$('s').oneEvent('blur',doFadeIn);
});
When the DOM is ready, we grab all of the elements that are mean to fade in and...get this...fade them in.
The jQuery JavaScript
$(document).ready(function() {
var doFadeIn = function() {
$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
};
$('body').one('mousemove',doFadeIn);
$('#s').one('blur',doFadeIn);
});
This is the equivalent jQuery JavaScript code.
Accommodating for No-Javascript Users
<noscript>
<style type="text/css">
.fadein { visibility:visible; }
</style>
</noscript>
We undo the initial hiding of the elements. Duh.
It's a subtle effect but a good idea on Google's part.
needs the old:
$("S").focus();or better:
setTimeout(function(){$("S").focus();},100);Cool stuff though.
For focusing on the element, yep. Added.
I still don’t see how this could be useful on a website.
@Jean-Nicolas: I think it keeps the website from having unnecessary “clutter” until there’s a hint that the user may want it. Most people probably don’t do anything but search from that page — thus, keep it simple.
You’d think that you can implement a version that has the divs not only fade in when the mouse enters but also to fade back out after the mouse is idle?
I can see that this could become useful to keep a user’s focus on a small subset of a page. But without an automatic time-out the user might just leave without exploring. Who really has time to do an easter-egg hunt for hidden content on a web page?? 5 seconds??
Hi David, I tried your demopages, but only got some green stuff on the top of the page saying fade area 1, 2 and 3. But no fading. Tried on WinXP with Opera 10.10 and IE6. Visiting Google with these browser IE6 doesn’t do the fade but Opera does.
In Safari the fade is on-page-load in your example. Only FF does the same as Google with your demos. Sorry I couldn’t give you a more helpful comment ;-)
@David, I think it would help your less experienced (moo) users if you explain what you are doing with the oneEvent/implement thing there. Now, I could have tried doing it myself, but I (still) have to do the dishes first! :) lol
With Opera 10.10 i get the effect on-page-load – same as Sebastiaan with Safari. Tried both examples. FF 3.6 works well.
Question(s): What’s “oneEvent” ? It’s not “onEvent”, right?
What’s it’s advantage?
I want to add a event to Fade it Out.
When they put the mouse out of the window I want that it disappear again.
Could you make that for me?
btw. very nice effect!
Sorry for not explaining the
oneEventmethod guys. AoneEventevent fires only once on an element. It’s the equivalent of jQuery’soneevent. In MooTools 2, this will be called theflashevent.I already made my own version to google’s for a client, which is similar to yours David, funny enough.
I must admit, the oneEvent is entirely new to me. You say it fires only once on an element? How do you need to see this when it’s put into practice?
Very impressive and useful.
Very nice!
Does this work with jQuery 1.4?
@David Walsh: Thx for the explanation!
Another great work from you David :)
I think pure CSS also can do this, here is my pseudo-code :
body:hover .content { opacity: 1; } .content { -webkit-transition: all .5s ease-in-out; opacity: 0; }hey david,
what is that line for?
if(!e.key || e.key == 'tab') { ...is it not obsolete because
oneEvent('mousemove',doFadeIn);Great!
Exactly what i was looking for, any idea how to fade out again if there is no user input (mouse or keyboard). Im using jquery
David
Hi..
I am planning to use this for nav bar.. will search engines be able to see links ?
Hi David.
I am developing a new Website Using Joomla 1.5.15. Joomla 1.5 Is using MOOTOOLS 1.12 :(
please help me To Use this Tips With Mootools 1.12
Best regards. Thanks For The Tips
I just noticed that Google does this inline:
<html onmousemove=”google&&google.fade&&google.fade(event)”>
I love your tutorials.. :) Just did this tut, and its active on my site: http://www.onlinebrand.dk .. just move the mouse around, and you will see :)
Thanks alot. All Credit to your awsome tut..
One might wonder, why google choose to do it online, maby somthing to do with speed? Thats why they dont bother to validate ;)
I don´t think ie8 likes thsi script that much, it loades even if I dont move the mouse.
And I get some sort of wierd load of content.. Ill guess Ill wait until CSS3 is implemented overall.. and use Hidayat Sagita suggestion ;)
hey there,
I tried to implement the fading effect in a website of mine. I need to confess, that I am a bloody beginner, when it comes to Mootools and jQuery. I added the code to separate .js files, which I linked to my html file (via the header). I also modified my css-file and added the class to the DIV I’d like to appear. However, this causes the whole DIV to disappear without showing up again. Firebug states that “$ is not defined — [Break on this error] $(document).ready(function() { ” (line1, jquery file) and ” Native is not defined
[Break on this error] Native.implement([Element, Window, Document, Events], { ” (line 2, mootools file).
As I said, I am really new to this — what could be the cause of my trouble, what do I have to modify and define? Where could I get further information regarding the implementation of mootools and jquery?
Thanks a lot in advance, any help is appreciated :-)
aaaah… stupid me, didn’t include the the core files ;-) yep, I am a real beginner, so sorry for that ;-) it works!
however, firebug now complains about
$(document.body).oneEventis not a function —$(document.body).oneEvent('mousemove',doFadeIn); (line19, mootools)any suggestions? cheers!!
This doesnt seem to work with iPhone until you click something, swiping has no effect. I would assume it wouldnt work with iPad either….
Any ideas?
@Troy: You could always detect a device’s resolution and titles and send the appropriate code. :-)