CSS3 Fade In Effekt für die Website
Gemeint ist das sanfte Einblenden des Contents, welches bei jedem neuen Seitenaufruf generiert wird. Eigentlich bin ich kein Freund von derartigen Spielereien, doch mit CSS3 ist der Fade-In Effekt keine echte Belastung mehr, auch nicht in Sachen Performance. Für mich persönlich macht der Fade-Effekt das Erlebnis allerdings runder, weil Seiten weich eingeblendet werden und es so keine störenden Verzögerungen oder ähnliches mehr gibt. Alles wirkt flüssiger und verbundener.
Am Ende ist es Geschmackssache, doch da so viele Anfragen kamen, wie ich den Fade-Effekt für die komplette Website umsetzte, möchte ich diese nun einmal beantworten. Wie schon gesagt: Ein Fade-Effekt ist mit CSS3 gar nicht so schwer zu realisieren, vor allem ist das schnell und simpel erledigt.
Um einen Fade-In hinzuzufügen, müsst ihr zunächst einmal folgendes ganz unten in eure CSS einfügen:
@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;}}
Jetzt müsst ihr euch selbst die Frage stellen, welches Div-Element den CSS3 Fade-In Effekt bekommen soll. Nur Bilder vielleicht? Oder doch die komplette Website, also den Body? Oder nur bestimmte Elemente, wie Artikel, die Schrift, nur die Sidebar, oder etwas ähnliches?
Je nachdem für was ihr euch entscheidet, müsst ihr dem entsprechenden Element in eurer CSS nun die oben eingefügte CSS3 Animation hinzufügen. Also einfach beim entsprechenden Element in eurer CSS den unteren Code hinzufügen, schon bekommt das entsprechende Div-Element die Fade-In Animation zugewiesen, also den CSS3 Fade-in Effekt von oben. Ganz ohne Javascript und Zauberei, einfach so mit minimalistischen Mitteln und wenig Aufwand.
Folgendes bei dem gewünschten Element in eurer CSS hinzufügen:
animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;
Wer sich nun darüber wundert, dass die -moz-animation etwas länger geht, dem sei gesagt, dass der Firefox selbige ein wenig anders darstellt. Mit der etwas höheren Zeit wird dies also nur ausgeglichen, so dass der Fade-In Effekt auch im Firefox noch relativ normal aussieht bzw. genau wei im Chrome und im Internet Explorer.
Weiches einblenden mit CSS3 Fade-In
Im Grunde war es das nun schon. Natürlich könnt ihr die Länge der Animation frei nach euren Wünschen anpassen, in dem ihr einfach die Sekundenzahl verändert. Wie lange die Animation gehen soll, ist reine Geschmackssache. Allerdings empfinde ich die eingestellte Zeit als nahezu perfekt, denn bedenkt bitte, dass der Fade-Effekt am Ende überflüssig bleibt. Für mich bringt selbiger einen weichen Seitenwechsel mit sich, macht das surfen auf der Website daher ein wenig angenehmer. Doch wenn dieser Fade-Effekt zu lange dauert, dann wirkt er auch sehr schnell störend. Mein Ziel war es mit dem CSS3 Fade-In, schlichtweg die Ladezeit zu überbrücken.
Während Bilder etc. also noch nicht korrekt angezeigt werden, spielt sich einfach der Fade-In Effekt ab und wenn dieser dann fertig ist, sieht die Website super aus und kann vollständig bedient werden. Das war mein Ziel, als ich mich damals für das weiche einblenden der Seiten mit CSS3 entschied. Was ist damit am Ende eigentlich nur sagen will: Übertreibt es nicht, nur weil der Fade-Effekt am Anfang so hübsch und eindrucksvoll wirkt. Minimalismus ist Trumpf und wenn Nutzer warten müssen, um eure Website zu sehen, dann nervt es sie. Die Kunst ist also den Fade-Effekt genau so kurz zu halten, wie es gerade so nötig ist. Dann stört er nicht, dann überbrückt er Ladezeiten und macht das wechseln der Seiten für das Auge einfach angenehmer.
