Fade Effekt für Seiten oder Elemente

Das „weiche“ Erscheinungsbild bei Aufruf einer Seite, Bildern oder anderen Elementen ist schnell und einfach umgesetzt. Zunächst muss der Browser die grundsätzliche Anweisung erhalten, nämlich das angegebene Element oder die Seite in einer bestimmten Zeit von unsichtbar auf sichtbar zu schalten. Das geht mit dem Code:

@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

Dieser Code ist ganz unten in die Stylesheets (style.css) einzufügen.

Wer den Fade Effekt für seine ganze Webseite haben möchte, gibt nun für den Typ-Selektor body die folgende CSS-Anweisung an:

animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;

Die Anweisung bewirkt die Dauer des Fade-Effekts. Die Unterschiede ergeben sich bei moz-animation aus der unterschiedlichen Darstellung der Browser. Die Zeitdauer kann natürlich auch entsprechend verlängert werden. Für diese Seite habe ich alle Werte 1 Sekunde verlängert. Aber aufgepasst – trotz des schönen Effekts; Besucher wollen in erster Linie etwas sehen und nicht von Effekten überrascht werden. Es macht Sinn, den Fade Effekt zeitmäßig so einzustellen, wie die Seite zum Laden braucht. Dann sieht es gut aus und nervt auch nicht. Wenn die Webseite allerdings länger als drei vier Sekunden lädt, nützt der schönste Fade-Effekt nichts.

Das Script habe ich auf der Seite fastwp.de gefunden. Der Seitenbetreiber hat sich der Performance von WordPress verschrieben, er hat noch einige lesenswerte Tipps und Tricks zur Optimierung von Word-Press-Blogs. Seine Seite lädt übrigens in sagenhaften 0,2 Sekunden.

This article was written by [pelo].

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.