hoch

Axels Weihnachtskarte 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!

2014-12-14-weihnachtskarte-01.png

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
Artikel weiterempfehlen: Google + Facebook

Wenn die jQuery-Animation mit fadeIn() nicht mag

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:

Artikel weiterempfehlen: Google + Facebook