Abro, Dezember 2009

Google: JS-Fade für die Startseite

Der Google JS-FadeDa geht man so nichts ahnend das hundertste mal an diesem Tag auf die Lieblingssuchmaschine und reibt sich verwundert die Augen: “Wow, wenn man so langsam online ist mit diesem Mobilstick, dann sieht das laden bei Google ja ganz schön Cool aus”. Ja vonwegen. Google hat heute seine neue Startseite mit JS-Fader gelauncht. Das Google-WatchBlog hat natürlich auch schon berichtet. (Ganz schön fix Tobi!)

Die Sache ist in Amiland wie immer schon hinlänglich bekannt. Was uns zum Schluss kommen lässt, dass das jetzt erstmal so bleibt. Werfen wir mal einen obligatorischen Blick auf den Code:

1
2
3
4
5
<!doctype html>
<html onmousemove="google&&google.fade&&google.fade()">
<head>
<!-- ... --->
<noscript><style>#fctr,#ghead,#pmocntr,#sbl,#tba,#tbe,.fade{opacity:1;}</style></noscript>

Mhja.. nicht schön, aber schnell gelöst. Und was macht fade() ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
google.fade=function(b)
{
  b = b || window.event;
  var g = 1;
  if( b && b.type=="mousemove" )
  {
    var e = b.clientX,
        f = b.clientY;
    g   = a.x || a.y ? Math.abs(a.x-e)+Math.abs(a.y-f) : 0;
    a.x = e;
    a.y = f
  }
  var d = (new Date).getTime(),
      c = d - a.a;
  if( google.fx && g && c>602 )
    if(a.f)
    {
      a.f=0;
      var i = ["fctr","ghead","pmocntr","sbl","tba","tbe"],
          h = [["span","fade"],["div","gbh"]];
      google.fx.animate(602,m(i,h,0,1))
    }
};

…Ach Closure-Compiler ich vergaß… Naja spätestens wenn man den Source für google.fx hinzunimmt kann ja wieder genug lesen um sich zu fragen “Warum bitte animiert ihr 602ms statt 600″!?

Sehr ähnliche Funktionen finden sich übrigens in der fx.js der Google Closure Lib. Ja, die Jungs und Mädels können schon was. Pech nur dass bei einigen Firefox-Usern durch die ganze JS-Spielerei schon regelmäßig der Browser abgeschmiert ist. Und mich wunderts irgendwie gar nicht.

Ich mein’ schaut allein auf das Logo. <img alt="Google" height=110 src="/intl/de_de/images/logo.gif" width=301 id=logo onload="window.lol&&lol()"> So weit ich die Sache sehe ist lol() ein Wrapper für window.resize und wechselt im speziellen zwischen CSS-Klassen, die das Element gefloatet oder absolut positionieren. Ja braucht’s das denn wirklich?

Also lieber mal gucken was andere Leute so machen. So wie ich heute bei Raphaël-JS.

[Update]
Google Fading abschalten


Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an http://koch-essen.de/kontakt/