Frage zum Wiki-Artikel „Bildwechsler“

[marctrix]

Hej Thomas,

Danke Gunnar!

Hier das danach abgeänderte Script:

@keyframes bildwechsler
{
	  0% { opacity: 0 }
	 33.3% { opacity: 1 }
	 66.6% { opacity: 1 }
	100% { opacity: 0 }
} 

Jetzt startet der Übergang von transparent zu sichtbar schon direkt zu Beginn der Animation.

Schau dir noch mal die Zeichnungen von Gunnar an. Daran erkennst du, dass jeweils zwischen 20 und 40% sowie zwischen 60 und 80% ein Bild eingeblendet und ein Bild ausgeblendet wird. In den Phasen sind also beide sichtbar.

Bisher dachte ich auch, genau dieser Effekt sei gewünscht. Wenn das anders sein soll, benötigst du andere Werte für den Ablauf der Animation. Sorge dafür, dass das zweite Bild erst eingeblendet wird, wenn das erste wieder vollkommen transparent ist.

Das hat mit CSS und HTML nichts zu tun, sondern nur mit Mathematik: Du willst dass die Animation für das zweite Bild erst startet, wenn das erste Bild wieder komplett transparent ist.

Wieder ein Tipp: hör auf im Internet nach weiteren Fertig-Lösungen zu suchen. Wenn du es nciht selber machen und verstehen möchtest, weil es ein einmaliger Effekt ist, den du sowieso nie wieder umsetzen möchtest, hat Deine Adobe-suite sicher eine Möglichkeit, das ohne Code-Kenntnisse zu generieren. Dann tut es auch genau das, was du möchtest (ich gehe davon aus, dass du eine Suite hast, da du hier bereits Dreamweaver und Photoshop erwähnt hast).

Wenn du den Ehrgeiz hast, das selber hinzukriegen und dann auf Dich stolz zu sein, dann bist du jetzt auf der Zielgeraden (falls ich dich diesmal richtig verstanden habe).

Das erste Mal ist immer schwer. Aber bisher hast du alles verstanden, was du getan hast. Dann wirst du den Rest auch noch hinkriegen!

1. Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".

Man kann mit CSS das Aussehen von Schriften sehr stark verändern. Viele Effekte, die mit Photoshop möglich sind, sind mit CSS auch möglich (Thema für einen weiteren Thread, wenn du magst). Die Frage ist nur, ob du willst, dass viele Leute nicht mehr verstehen, was da auf deiner Homepage geschrieben steht.

Wenn es nur auf den Effekt ankommt und nicht darauf, dass jemand liest, was da steht, kannst du da doch auch Erdbeeren animieren.

Wenn du möchtest, dass auch Legastheniker oder Menschen mit einer Lese-Rechtschreibschwäche oder Menschen mit einer Neigung zu Migräne (unvollständige Liste) Deine Webseite benutzen, solltest du deren Bedürfnisse berücksichtigen.

Es ist keine Schande, nicht zu wissen, dass es Menschen gibt, für die animierte Schriften eine Hürde sind. Aber es ist kein feiner Zug auf die Probleme anderer Menschen zu pfeifen und umzusetzen, was einem persönlich gefällt und dadurch Menschen auszuschließen, die an ihrem Handicap keine Schuld haben.

2. Die Animation muss auf meiner Webseite nicht anhaltbar sein, denn erstens wird sie langsam sein und zweitens gibt es auf dieser Titelseite nicht allzu viel zu sehen

Dann verschenkst du viel Potential bei der Suchmaschinenoptimierung - und auch in jeder anderen Hinsicht. Intros hat man seit den 90ern nicht mehr. Aus gutem Grund. Das hat die Besucher davon abgehalten, zurück zu kommen. Nichts nervt mehr, als unnütz einen Haufen nichtssagender Daten laden zu müssen und dabei Zeit zu verlieren. Wenn ich eine Webseite besuche, möchte ich gleich sehen, was es neues gibt!

und erst recht nichts zu tun, so dass man sich eher in anderen Gefilden aufhält. Man verweilt also nur kurz dort, nicht viel länger als man braucht, um sich die Animation anzuschauen.

Warum sollte ich mir die auch nur ein einziges Mal anschauen? Geschweige denn bei jedem Seitenbesuch erneut?

Das langweilt doch spätestens beim dritten Mal. Oder lässt du dir gerne einen Witz drei mal erzählen? 😉

So oder so: du machst es deinen Besuchern unnötig schwer - unnötig lange Ladezeiten und schlecht lesbare Schrift, deren Gestaltung auch noch das Verständnis erschwert sind keine guten Voraussetzungen, um Nutzer zu halten.

Wenn du deine Seite aufpeppen möchtest, mach das abschaltbar und nicht so, dass dabei wichtige Inhalte unzugänglich werden. Wenn die Inhalte unnütz sind, nimm lieber hübsche Bilder. Wenn die Inhalte wichtig sind, mach sie zugänglich!

Übrigens geht anhalten ganz einfach. In der Regel halten Slider, Bildwechsler usw. an, wenn sie angetabbt oder mit der Maus überfahren werden (focusund hover). Ist das der Fall, genügt ein animation-state: pause — wenig Aufwand großer Nutzen! Für Handys solltest du eventuell eine ganz andere Darstellung wählen, denn dann ist die Schrift nicht nur verschnörkelt und animiert, sondern auch noch kleiner.

Und vergiss nicht die Leute, die Bilder gar nicht erst laden, weil es Ihnen zu lange dauert oder zu teuer ist. Nicht überall steht DSL-Geschwindigkeit als Flatrate zur Verfügung!

Marc