Ja, so kann dat ja nicht gehen:
Ich hatte noch eine front-page.php im Ordner herumliegen, die mich veräppelt hat.
(Was ist überhaupt der Unterschied zwischen home und front-page...?)
Inzwischen ist sie weg, header, sidebar, footer anständig ausgelagert - das Skript funktioniert auch - alles bestens...
...und zwar so bestens, dass ich auf meinen ursprünglichen Betreff zurückkomme: Animation
Anstatt zu springen, soll der Übergang zwischen Homepage-Header und "Sonstiges"-Header sanft stattfinden.
Ich habe auch ein Javascript gefunden, dass im Zusammenhang mit CSS3-Attributen funktioniert. Ein kleiner Dummy mit zwei HTM-Seiten zum Hin- und Herschalten funktioniert wunderbar und macht genau das, was ich will: Die beiden Seiten enthalten unterschiedliche IDs, ein Mal #header, ein Mal #headerhome, beide unterscheiden sich in der Höhe. Durch Umschalten wird der Header innerhalb einer Sekunde höher oder niedriger - toll.
Der Haken: Im Javascript gibt's ein Element el, das den Wert der CSS-ID abgreift:
Es gibt auch einen querySelector, der ebenfalls als Attribut die ID zugewiesen bekommt, das sieht dann so aus:
el = document.querySelector("div#header");
Nur, wie muss man das schreiben, damit die Klasse .home zusammen mit der ID #header abgefragt wird?
Die Klasse wird über el.className abgefragt, aber wie die Kombination aus beiden, also ".home #header {}"
Meine diversen Schreibversuche haben nicht hingehauen.
Gibt's jemanden hier, der sich mit JS entsprechend auskennt?
Anbei das komplette Skript:
function headertransition() {
var el = updateTransition();
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div#homeheader");
if (el) {
el.id = "header";
} else {
el = document.querySelector("div#header");
el.id = "homeheader";
}
return el;
}
Alles anzeigen
und dass CSS hierzu:
#header, #homeheader{
position: absolute;
-moz-transition-property: height;
-moz-transition-duration: 1s;
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-o-transition-property: height;
-o-transition-duration: 1s;
width: 750px;
background:#eee url("header_bg.png");
}
#header {
height: 154px;
}
#homeheader {
height: 224px;
}
Alles anzeigen
Ach so: Funktioniert nicht in Firefox, aber in Safari 5 und Opera 10.6 (was ich in Kauf nehme. Firefox 4 soll damit klar kommen, sagt man, und wer die Transition nicht bekommt, vermisst sie vielleicht auch gar nicht...).
