What technology is used at the Google homepage (guitarstrings)

前端 未结 4 1891
萌比男神i
萌比男神i 2021-01-04 12:29

What technology is used at the Google homepage (9 June 2011)? They made something like a guitar pickup for the snares. When you move the mouse over it, the snares are being

相关标签:
4条回答
  • 2021-01-04 12:33

    Possibly HTML5? There is a canvas element if you inspect element in Google Chrome.

    0 讨论(0)
  • 2021-01-04 12:46

    http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html

    "If you’re curious, the doodle was made with a combination of JavaScript, HTML5 Canvas (used in modern browsers to draw the guitar strings), CSS, Flash (for sound) and tools like the Google Font API, goo.gl and App Engine."

    0 讨论(0)
  • 2021-01-04 12:50

    That's a combination of HTML5 Canvas, SVG, and JavaScript. As others have noted, Flash for the audio.

    0 讨论(0)
  • 2021-01-04 12:58

    They use a canvas

    <canvas width="474" height="175"></canvas>

    and flash

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="0" height="0" id="guitar11-sound-player" type="application/x-shockwave-flash"><param name="movie" value="/logos/swf/guitar11.swf"><param name="allowScriptAccess" value="always"><object id="guitar11-sound-player-2" type="application/x-shockwave-flash" data="/logos/swf/guitar11.swf" width="0" height="0"><param name="allowScriptAccess" value="always"></object></object>

    The flash is for the sound.

    Here's the JavaScript:

    (function() {
        var g = null,
            h;
        try {
            if (!google.doodle) google.doodle = {};
            var i, m, n, o, r, s, t, u, v, aa, w, ba, ca, da = navigator.userAgent.indexOf("MSIE") >= 0,
                ea = [[3, "#776a62", "#2063ff", 2, [[28, 23], [103, 23]]], [5, "#776a62", "#f61b33", 2, [[28, 38], [103, 38]]], [0, "#776a62", "#ffdd24", 2, [[65, 67], [318, 67]]], [2, "#776a62", "#07d238", 2, [[28, 81], [281, 81]]], [7, "#776a62", "#2063ff", 1, [[28, 96.5], [281, 96.5]]], [9, "#776a62", "#f61b33", 1, [[29, 111.5], [104, 111.5]]], [1, "#776a62", "#07d238", 2, [[358, 66], [433, 66]]], [4, "#776a62", "#2063ff", 2, [[358, 81], [433, 81]]], [6, "#776a62", "#f61b33", 2, [[330, 96], [405, 96]]], [8, "#776a62", "#ffdd24", 1, [[358, 111.5], [434, 111.5]]]],
                fa = 0,
                ga = 0,
                x = 0,
                y = 0,
                z = !0,
                A = [],
                B = g,
                C = g,
                D = function(a) {
                    a && a.parentNode && a.parentNode.removeChild(a)
                },
                E = function(a, b, c) {
                    if (a) {
                        if (!google.doodle.ba) google.doodle.ba = [];
                        google.doodle.ba.push(arguments);
                        var d = a,
                            e = b,
                            f = c;
                        d.addEventListener ? d.addEventListener(e, f, !1) : d.attachEvent("on" + e, f)
                    }
                },
                ... // A lot more [link](http://jsfiddle.net/2R4Cg/)
    

    They also have some CSS:

    #hplogo:active,#hplogo:focus {
        outline:none;
    }
    
    #hplogo-g {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0;
        height:175px;
        position:relative;
        width:474px;
    }
    
    #hplogo-click {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
        cursor:pointer;
        height:130px;
        left:0;
        position:absolute;
        top:0;
        width:474px;
    }
    
    #hplogo-lcd {
        height:30px;
        left:70px;
        position:absolute;
        top:129px;
        width:200px;
    }
    
    #hplogo-lcd-icon {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px;
        cursor:pointer;
        height:0;
        position:absolute;
        width:0;
    }
    
    #hplogo-lcd-text {
        background:transparent;
        border:0 none;
        color:#666;
        cursor:text;
        font-family:VT323,arial,sans-serif;
        font-size:14px;
        left:77px;
        position:absolute;
        top:134px;
        text-decoration:none;
        width:182px;
    }
    
    #hplogo-lcd-screen {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
        height:20px;
        left:52px;
        position:absolute;
        top:134px;
        width:214px;
    }
    
    #hplogo-on {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px;
        height:37px;
        left:272px;
        position:absolute;
        top:123px;
        width:62px;
    }
    
    #hplogo-led {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
        height:21px;
        left:292px;
        position:absolute;
        top:133px;
        width:21px;
    }
    
    .hplogo-str {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px;
        height:20px;
        position:absolute;
        width:255px;
    }
    
    #hplogot {
        -webkit-box-shadow:5px 5px 10px #ffffd;
        -moz-box-shadow:5px 5px 10px #ffffd;
        box-shadow:5px 5px 10px #ffffd;
        -webkit-transition:opacity .5s ease-out;
        -moz-transition:opacity .5s ease-out;
        -o-transition:opacity .5s ease-out;
        transition:opacity .5s ease-out;
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
        background-color:#ffffca;
        border:1px solid #b5b5b5;
        cursor:pointer;
        display:none;
        font:normal 9pt arial,sans-serif;
        left:128px;
        opacity:0;
        position:absolute;
        top:16px;
        white-space:nowrap;
        padding:2px 3px;
    }
    

    Note

    #hplogo-click {
        background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    }
    

    and <div id="hplogo-click" onclick="google.doodle.go();"></div> which contain the actual image of the guitar.

    0 讨论(0)
提交回复
热议问题