Skip to content

Instantly share code, notes, and snippets.

@gpiancastelli
Created December 26, 2009 21:13
Show Gist options
  • Save gpiancastelli/264042 to your computer and use it in GitHub Desktop.
Save gpiancastelli/264042 to your computer and use it in GitHub Desktop.
/*
Functions used for the fade-in effect on Google's home page.
To reuse it, link this JavaScript file from your HTML source in a <script>
element; then, set the onmousemove attribute of the chosen element (e.g. <p>,
or <html> as Google did) to call the google.fade function.
<html onmousemove="google.fade()">
(Actually, Google setting is "google&&google.fade&&google.fade()". YMMV.)
You also need to change the i and h variables in the google.fade function to
the id and the [element, class] pairs of the elements you want to fade in,
respectively. Those elements must be initially styled with "opacity: 0;" in
your CSS file.
(C) 2009 Google, I guess. I still don't know anything about licensing terms.
*/
window.google = {};
google.time = function() { return (new Date).getTime() };
(function() {
var a = window.google.f = {};
a.f = 1; a.s = 1; a.a = (new Date).getTime();
function m(b, g, e, f) {
var d, c = [], i = [];
for (var h = 0, k; k = b[h++];) {
var l = document.getElementById(k);
if (l)
c.push(l)
}
for (var h = 0, j; j = g[h++];) {
var o = n(j[0], j[1]);
while (d = o.pop())
c.push(d)
}
while (d = c.pop())
i.push([d, "opacity", e, f, 0, ""]);
return i
};
function n(b, g) {
var e = [];
for (var f = document.getElementsByTagName(b), d = 0, c = f[d]; c = f[d++];)
if (c.className == g)
e.push(c);
return e
};
google.fade = function(b) {
b = b || window.event;
var g = 1;
// if you decide to associate the fade effect with a different event,
// just change the expected string value corresponding to b.type
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;
// i contains the ids of elements you want to fade-in
// h contains [element, class] pairs for elements you want to fade-in
var i = ["fctr", "ghead", "pmocntr", "sbl", "tba", "tbe"], h = [["span", "fade"], ["div", "gbh"]];
google.fx.animate(602, m(i, h, 0, 1))
}
};
// Now suppose you also want a corresponding fade-out effect. A possible
// google.unfade function is very similar to google.fade, except the last 'if'
// statement. There, the logic must be inverted; also, m needs to be called
// with inverted opacity extremes.
//
// For example:
//
// google.unfade = function(b) {
// // ...
// if (...)
// if (!a.f) {
// a.f = 1;
// var i = ..., h = ...;
// google.fx.animate(602, m(i, h, 1, 0))
// }
// };
//
// Of course, you may want to modify google.fade in order to avoid code
// duplication. This example is just intended to help you understand a
// little how things work.
})();
(function() {
var fn = 0, g = [];
google.fx = {};
google.fx.linear = function(a) { return a };
google.fx.animate = function(a, d, e) {
for (var c = 0, b; b = d[c++];) {
b[5] = b[5] == null ? "px" : b[5];
b[4] = b[4] || google.fx.linear;
h(b[0], b[1], b[2] + b[5])
}
g.push({b : a, a : e, d : google.time(), c : d});
fn = fn || window.setInterval(i, 15)
};
function i() {
for (var a = 0, d; d = g[a++];)
j(d) || g.splice(--a, 1);
if (!g.length) {
window.clearInterval(fn);
fn = 0
}
};
function j(a) {
var d = google.time() - a.d;
if (d >= a.b) {
for (var e = 0, c; c = a.c[e++];)
h(c[0], c[1], c[3] + c[5]);
a.a && a.a();
return 0
} else {
for (var e = 0, c; c = a.c[e++];) {
var b = c[2] + (c[3] - c[2]) * c[4](d / a.b);
if (c[5] == "px")
b = Math.round(b);
h(c[0], c[1], b + c[5])
}
return 1
}
};
function h(a) {
for( var d = 1; d < arguments.length; d += 2) {
var e = arguments[d], c = arguments[d + 1], b = a.style;
if (b && e in b)
b[e] = c;
else if (e in a)
a[e] = c;
}
return a
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment