Hiệu ứng fading như trên trang chủ của Google

Xem: 1097    Tải: 0   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử


Í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>

Hiệu ứng fading như trên trang chủ của Google

Hiệu ứng fading như trên trang chủ của Google Đăng ngày 03-10-2013  Í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. 5/10 1097

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn