Frage zum Wiki-Artikel „Bildwechsler“

[marctrix]

Hej Thomas,

Du musst bei fünf Bildern beispielsweise dafür sorgen, dass 4/5 der Zeit die Bilder nicht zu sehen sind. Und die delays für die Bilder jeweils um 1/5 versetzen,

Es tut mir leid, aber ich verstehe halt leider nicht, wie Dein Script funktioniert.

Das ist im Detail auch gar nicht nötig. Du hast ja jetzt schon mal geschafft, dass eine Animation läuft.

Zum Experimentieren ist Codepen eine prime Sache. Da kannst du ein „Widget“ wie z.B. einen Bildwechsler nicht nur losgelöst vom Rest bearbeiten, ohne dass dir anderes CSS, das du in Deinem Projekt verwendest dazwischen funkt. Du kannst das erstellte Beispiel dann auch später leicht wiederfinden und in anderen Projekten wiederverwenden. Vor allem aber fällt das Experimentieren leicht. Unter anderem, weil sich alle Änderungen (fast) sofort auswirken. Nebenbei kannst du deine Experimente noch teilen und Hilfe erhalten.

Der absolute Clou. Du kannst ein Beispiel wie von mir auch Clonen und Deine eigenen Experimente darauf aufbauen.

Das ganze ist auch noch kostenlos (wenn du nicht die Pro-Variante benötigst. Ich brauche die bisher nicht).

Ich weiß nicht, wie ich dafür sorgen soll, dass bei meinen drei Bilder 2/3 der Zeit die Bilder nicht zu sehen sind. Und wie/wo versetze ich Delays für diese Bilder?

Wenn du so ein Stichwort hat, nutze doch einfach mal "CSS animation Delay" als Suchbegriff 😉

Ich habe versucht, mit den verschiedenen Zahlen rumzuspielen, aber ohne Erfolg. Auch mit der Hilfe eines Informatikstudenten wurde ich nicht schlauer.

Tja, im Informatik-Studium ist Frontend wohl kein Thema…

Zu einfach für den Lehrplan, vermute ich mal (nein, ich weiß es besser: mein CSS-Buch wird an Unis genutzt. Anscheinend aber nicht an jeder).

Hier noch mal das Script, wie es bei mir jetzt aussieht:

Dazu erst mal ein paar Denkanstöße (s.u.). Ich bin mir fast sicher, dass du alleine drauf kommst:

img {
	--animation-duration: 5s;
	position: absolute;
	-webkit-mix-blend-mode: multiply;
	mix-blend-mode: multiply;

Wozu brauchst du mix-blend-mode? - Wie ich schon sagte: mach es Dir nicht unnötig kompliziert. Du animierst doch die Bilder und wir wollten doch alle transparent machen, bis auf eines. Was soll mix-blend-mode da noch regeln?

Falls du nicht genau weißt, was das tut, benutz das nicht. 😉

Lies dir erst durch, was sich hinter dem Link verbirgt.

Weiter im (Quell-)text:

animation: var(--animation-duration) springenderPunkt infinite;
}

img:nth-of-type(2n)
{
	animation-delay: calc(var(--animation-duration)*2/3);
}

Funktioniert das? Ich weiß jetzt nicht aus dem Kopf, ob bei * und / ein Leerzeichen sein muss — bei einem minus brauchst du das auf jeden Fall. Also so:

animation-delay: calc(var(--animation-duration) * 2 / 3);

Hat was mit der Zukunftssicherheit zu tun. Da wird es Keywords geben, in denen mindestens das minus erlaubt sein wird. Das dient dann (nicht separiert durch Leerzeichen) nicht als Rechenzeichen, sondern als Satzzeichen.

Du hast jetzt implizit das Verhalten für img:nth-of-type(1n) (jedes Element) festgelegt (kein delay) und für jedes zweite Element: img:nth-of-type(2n) — kann sein, dass du da meinen Fehler übernommen hast? Gemeint war genau das zweite Element. Das schreibt sich dann so: img:nth-of-type(2) (ohne n).

Sorry, wenn ich das falsch vorgegeben habe.

@keyframes springenderPunkt
{
	  0% { opacity: 0 }
	 20% { opacity: 0 }
	 40% { opacity: 1 }
	 60% { opacity: 1 }
	 80% { opacity: 0 }
	100% { opacity: 0 }
}

Drei Drittel — passt gut für drei Bilder. Leg jetzt noch das delay für das dritte Bild fest mit img:nth-of-type(3) und wie gesagt benutz am besten so was wie Codepen für Deine Experimente. Du bist nah dran!

Noch drei Tipps, für das Debuggen, um das eigentliche Problem herauszukitzeln und das Beispiel erst mal so einfach und verständlich wie möglich zu machen:

1.) Benutz nicht die Kurzschreibweise, dann weißt du auch genau wofür welcher Wert steht. Statt animation also: 2.) Verzichte auf Variablen. Das Beispiel ist so simpel (für allem wenn du 6 Sekunden für die Animation ansetzt statt 5), dass das prima im Kopf zu rechnen ist 3.) Verwende passende sprechende Namen. In Deinem Fall also nicht springenderPunkt, denn den hast du ja nciht, sondern z.B. ´bildwechsler`

Dann solltest du etwas in dieser Art bekommen:

animation-name:  bildwechsler;
animation-duration: 6s;
animation-iteration-count: infinite;

Für animation-delay brauchst du dann 1/3 von 6s und 2/3 von 6s. Kannst ja einen Taschenrechner nehmen 😉

SCNR…

Wenn es dann erst mal läuft, kannst du den Code ja immer noch kürzen und optimieren.

Marc

PS: Sorry, dass es so lange Pausen zwischen meinen Antworten gibt, aber ich sitze nciht den ganzen Tag am Rechner. Vermutlich wird die nächste Antwort erst morgen kommen…