Fade Effekt für Seiten oder Elemente

Das „wei­che“ Erschei­nungs­bild bei Auf­ruf einer Sei­te, Bil­dern oder ande­ren Ele­men­ten ist schnell und ein­fach umge­setzt. Zunächst muss der Brow­ser die grund­sätz­li­che Anwei­sung erhal­ten, näm­lich das ange­ge­be­ne Ele­ment oder die Sei­te in einer bestimm­ten Zeit von unsicht­bar auf sicht­bar zu schal­ten. 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;}}

Die­ser Code ist ganz unten in die Style­sheets (style.css) einzufügen.

Wer den Fade Effekt für sei­ne gan­ze Web­sei­te haben möch­te, gibt nun für den Typ-Selek­tor body die fol­gen­de CSS-Anwei­sung an:

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

Die Anwei­sung bewirkt die Dau­er des Fade-Effekts. Die Unter­schie­de erge­ben sich bei moz-ani­ma­ti­on aus der unter­schied­li­chen Dar­stel­lung der Brow­ser. Die Zeit­dau­er kann natür­lich auch ent­spre­chend ver­län­gert wer­den. Für die­se Sei­te habe ich alle Wer­te 1 Sekun­de ver­län­gert. Aber auf­ge­passt – trotz des schö­nen Effekts; Besu­cher wol­len in ers­ter Linie etwas sehen und nicht von Effek­ten über­rascht wer­den. Es macht Sinn, den Fade Effekt zeit­mä­ßig so ein­zu­stel­len, wie die Sei­te zum Laden braucht. Dann sieht es gut aus und nervt auch nicht. Wenn die Web­sei­te aller­dings län­ger als drei vier Sekun­den lädt, nützt der schöns­te Fade-Effekt nichts. 

Das Script habe ich auf der Sei­te fastwp.de gefun­den. Der Sei­ten­be­trei­ber hat sich der Per­for­mance von Word­Press ver­schrie­ben, er hat noch eini­ge lesens­wer­te Tipps und Tricks zur Opti­mie­rung von Word-Press-Blogs. Sei­ne Sei­te lädt übri­gens in sagen­haf­ten 0,2 Sekunden.