Hiệu ứng fading như trên trang chủ của Google
Bài viết được dịch lại từ David Walsh Blog
Ít bạn để ý đến hiệu ứng trên trang chủ của Google: thanh menu trên cùng và 1 số tùy chọn chỉ xuất hiện khi bạn di chuột hoặc rời khỏi nút search (Có thể là do Google muốn giữ trang chủ của họ đơn giản nhất có thể). Và nếu bạn đã biết điều này thì hãy xem cách làm hiệu ứng tương tự với jQuery & Mootools.
Trước tiên là mã 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>
<!-- Các mã HTML khác -->
</body>
Bạn có thể sử dụng mã HTML tùy thích (bài hướng dẫn chỉ nói tới hiệu ứng javascript chứ không có các hướng dẫn về style)
Mã CSS
@media all {
.fadein { visibility:hidden; }
}
@media handheld {
.fadein { visibility:visible; }
}
Bạn cần đặt visibility là hidden (sẽ đặt fadein khi có sự kiện di chuột hoặc rời khỏi search box) * bỏ qua hiệu ứng với các thiết bị di động
Mã javascript sử dụng Mootools
/* Theo @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);
});
}
});
/* Đặt sự kiện */
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);
});
Mã javascript sử dụng jQuery
$(document).ready(function() {
var doFadeIn = function() {
$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
};
$('body').one('mousemove',doFadeIn);
$('#s').one('blur',doFadeIn);
});
Với người dùng không bật javascript trên trình duyệt bạn thêm đoạn mã sau
<noscript>
<style type="text/css">
.fadein { visibility:visible; }
</style>
</noscript>
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.