10/10/2018, 11:26

Share code Javascript mô phỏng logo google ngày nguyệt thực

Code chính:

PHP Code:


        Dụng cụ làm bếp:
            Firefox + Firebug
            Google Chrome, Safari, Firefox 5 (để test, vì test trên Firefox 4 sẽ ko ra hiệu ứng như mong đợi :P, chỉ na na thế)
            Notepad++
        Nguyên liệu:
            Hình ảnh:
                http://www.google.com.vn/logos/2011/eclipse/strip.jpg
                http://www.google.com.vn/logos/2011/lunareclipse11-hp-moon.jpg
                http://www.google.com.vn/logos/2011/lunareclipse11-hp-logo.png
        Kiến thức:
            Một chút HTML5
            Một chút CSS
                Sprites CSS, CSS3
            Một chút Javascript

Code:

    document.getElementById("eclipse").style.backgroundPosition = "-"+document.getElementById("slider").value*112+"px 0";

Version: 1.0

Code:

Toàn bộ code: http://jsbin.com/iyuzi4/2/edit

Demo: http://jsbin.com/iyuzi4/2 (tốt nhất nên dùng Google Chrome hoặc Safari và paste link này vào)

Version 1.1: Fix lỗi hiện hình vuông bằng cách bo tròn div, dùng border-radius (CSS3)

Code:

Toàn bộ code: http://jsbin.com/iyuzi4/8/edit

Demo: http://jsbin.com/iyuzi4/8 (tốt nhất nên dùng Google Chrome hoặc Safari và paste link này vào)

Video quá trình viết code (và giải thích sơ lược):

Bài viết có liên quan: http://www.ddth.com/showthread.php?t=396457

Nếu có trên 30 comment yêu cầu ở topic này mình sẽ code demo cái dây đàn của Google (có thể chỉ 1 dây thôi )