Google-Style Element Fading Using MooTools or jQuery

By  on  

Google Homepage

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.

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Implementing Basic and Fancy Show/Hide in MooTools 1.2

    One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to...

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

Discussion

  1. needs the old: $("S").focus();

    or better: setTimeout(function(){$("S").focus();},100);

    Cool stuff though.

  2. For focusing on the element, yep. Added.

  3. Jean-Nicolas

    I still don’t see how this could be useful on a website.

  4. @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?

  5. 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??

  6. 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 ;-)

  7. Dutchie

    @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

  8. 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?

  9. Guido

    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!

  10. Sorry for not explaining the oneEvent method guys. A oneEvent event fires only once on an element. It’s the equivalent of jQuery’s one event. In MooTools 2, this will be called the flash event.

  11. 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?

  12. Very impressive and useful.

  13. Very nice!
    Does this work with jQuery 1.4?

  14. @David Walsh: Thx for the explanation!

  15. 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;
    }
    
  16. hamburger

    hey david,
    what is that line for?

    if(!e.key || e.key == 'tab') { ...
    

    is it not obsolete because

    oneEvent('mousemove',doFadeIn);
  17. 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

  18. vamsi

    Hi..
    I am planning to use this for nav bar.. will search engines be able to see links ?

  19. 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

  20. I just noticed that Google does this inline:

    <html onmousemove=”google&&google.fade&&google.fade(event)”>

  21. 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 ;)

  22. 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 ;)

  23. shenanigans

    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 :-)

  24. shenanigans

    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).oneEvent is not a function — $(document.body).oneEvent('mousemove',doFadeIn); (line19, mootools)

    any suggestions? cheers!!

  25. 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?

  26. Dimis

    @Troy: You could always detect a device’s resolution and titles and send the appropriate code. :-)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!