Hallo!

Ich meine diesen Effekt:



Wenn ihr dort auf "Mac Pro" klickt, wird die aktuelle Seite schwarz, blendet sich mehr oder weniger aus, und geht dann zur Mac Pro-Seite.

Habt ihr sowas schon mal gemacht? Und wenn ja, wie baut man das nach?

Das kannst Du z.B. mit Javascript auf Basis von jquery nachbauen.

Es wird ein schwarzes Element übergeblendet, danach wird der eigentliche Link aufgerufen...

Kann man mir JavaScript ganz einfach machen - auch ohne jQuery und Konsorten...

Cheers

Ich habe solche Überblendungen mit der App »Hype« von Tumult gemacht... diese generiert vornehmlich »HTML-5«. Die App macht - zumindest mir - Spass, ist aber bei echten Programmierprofis nicht so der Burner, Testversion gibts kostenlos...

Und wie? Hast du da den Quellcode?

Ja und dann? Das Problem ist ja, der zu schnelle Wechsel der Seite.

Ja, da siehst du doch Beispielcodes, wie mit Fade Out umzugehen ist. Im Grunde dunkelt sich die aktuelle Seite in schwarz ab, und dann verzögert sich der Linkaufzruf.

Ein bisschen selbst googlen musst du schon:
Da findest du auf stackoverflow sogar einige Beispiele für die Delay-Action.

Wenn ich das richtig sehe müsste das das Javascript sein das Apple benutzt:

Hier mal meine aus dem Stegreif:


var t = window.setInterval(blend("http://www.example.com"), 50);


function blend(href){
var sE = document.getElementById("blend");

if (sE) {
var o = sE.style("opacity");

if (o == 1) {
gotoLink(href);
window.clearInterval(t);
} else {
sE.style("opacity") = o + 0.05;
}

} else {
var E = document.createElement("div");
E.setAttribute("id","blend");
E.setAttribute("style","position:absolute;left:0;top:0;right:0;bottom:0;background:#000;opacity:0");
document.body.appendChild(E);
}

}

function gotoLink(href) {
window.location.href = href;
}


So in etwa in purem JavaScript, obwohl man hier noch einiges verschachteln könnte. Auch das CSS Gedöns könnte man noch auslagern.

In jQuery wäre es eine Zeile


Cheers