Google-Style之元素褪色(Element Fading),基于MooTools or jQuery

google-style-element-fade

如图所示:Google-Style——元素褪色(Element Fading)

谷歌最近在他们的网页上推出了一个有趣的效果:左上角和右上角的导航条不显示了,直到您移动鼠标或离开search term box。为什么?我猜测,他们是希望自己的网页,尽可能的简单;
这样的好处就是搜索框立即给予关注,至少有一半的用户可能只需输入关键字,按下回车键——没有更多的杂乱无章的需要。
Google-Style 处处体现以用户为核心的设计。

以下是如何实现这样的效果,基于MooTools or jQuery。

 

MooTools Demo jQuery Demo

The HTML Code

1
2
3
4
<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 -->

放置您喜欢的HTML,我们不需要每一个元素都加入效果,只给那些需要的元素加上淡入的CSS class.

The CSS Code

1
2
3
4
5
6
7
8
9
@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; }
}

将需要Fading效果的元素, visibility 设置为 hidden。还有我们将容纳 no-javascript的用户。

The MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 
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);
});

The jQuery Javascript

1
2
3
4
5
6
7
$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
	};
	$('body').one('mousemove',doFadeIn);
	$('#s').one('blur',doFadeIn);
});

Accommodating for No-Javascript Users

1
2
3
4
5
<noscript>
	<style type="text/css">
		.fadein	{ visibility:visible; }
	</style>
</noscript>

这是一个微妙的作用,但在谷歌的一部分,是个好主意。

 

MooTools Demo jQuery Demo

 

原文来自:Google-Style Element Fading Using MooTools or jQuery ,作者:David Walsh

 

站点统计