Golb Slexa :: 12 2014

Nun nun rücken sie also doch endlich in greifbare Nähe: die Fest (und Fress-?) Tage. Ich wünsche meinen Besuchern eine schöne Weihnachtszeit! Geniesst die erholsamen Tage zwischen den Jahren. Nach einem Guten Rutsch ins Jahr 2015 … mögen sich neben privaten und berüflichen Wünschen auch einige der guten alten Vorsätze erfüllen!

Axel hat sich wieder ins Zeug gelegt :-)
Ich habe - zum Glück - wieder eine einfache Idee gehabt: ich brauchte nur 2 Dinge zeichnen und scannen. Und weil ich mich mit Webseiten ein klein wenig auskenne, konnte ich es auch animieren.

Für die Hintergrundmusik wurden vor Allem klassische Instrumente ins Musikprogramm gekippt - und wer denn kann: gar in 5.1 surround lässt es sich herunterladen (s. “über” auf der rechten Seite).

Viel Spass!

weiterführende Links:

1. Weihnachtskarte 2014
2. Hintergrundmusik zum Download in stereo mp3 ogg … und 5.1 surround: m4a ogg
3. Hintergrundmusik auf Soundcloud

Ach, meine Kollegen… wo denn meine Weihnachtskarte bliebe, wurde ich gefragt…

Dabei bin ich doch dran!! Vor 3 Wochen war die Musik fertig. Die Idee für Grafik und Animation steht auch … an der Umsetzung bin ich just dabei. Und hier stiess auf eine Merkwürdigkeit: In jQuery gibt es die Möglichkeit, mit der fadeIn Funktion etwas schööön sanft einblenden zu lassen:

$('#content').fadeIn(5000);

Ich hab die Funktion so oft genutzt - aber bei diesem Element ging es einfach nicht. Plopp - mein Element war sofort da.

Ursache: die CSS-Definition dieser ID - diese enthielt ein transition Attribut:

#content{
(...)
transition: all 1s ease-in-out;
(...)
}

… tja, und wenn ein solches existiert, dann funktioniert eine jQuery-Animation nicht.

Abhilfe:
Entweder:

• In der CSS Deklaration entfernt man die Definition für transition.
• erst nach der gewünschten Animation setzt man transition:

  $('#content').css('transition', 'all 1s ease-in-out');

Oder: man verwirft fadeIn() und macht es rein mit CSS3: man setzt per transition die Zeitdauer und wechselt den Wert von opacity.

Weiterführende Links:

• jQuery: fadeIn()
• W3C: css3 transitions