nicht angemeldet Jens Gerlach
Rolf B
Matthias Scharwies
JürgenB
Jens Gerlach
JürgenB
Jens Gerlach
JürgenB
Rolf B
Matthias Scharwies
Rolf B
Jens Gerlach
Jens Gerlach
Jens Gerlach
Ich möchte eine animierte Bildershow auf meiner Webseite einrichten. Ich habe mich dabei von dem Nürnberg-Beispiel inspirieren lassen. Ich habe es auf 10 Bilder erweitert. Leider läuft die Animation nur einmal durch und bleibt dann beim ersten Bild hängen. Kann mir jemand sagen, was ich falsch mache? Die Zeiten sind für den Test bewust so klein gewählt.
Beispiel siehe hier: http://www.gerlach-j.de/Kopie-index.html
HTML-Code:
style="vertical-align: top; text-align: center; width: 610px;">
<figure id="gallery"><figure><img
src="show/01.JPG"></figure><figure><img
src="show/02.JPG"></figure><figure><img
src="show/03.JPG"></figure><figure><img
src="show/04.JPG"></figure><figure><img
src="show/05.JPG"></figure><figure><img
src="show/06.JPG"></figure><figure><img
src="show/07.JPG"></figure><figure><img
src="show/08.JPG"></figure><figure><img
src="show/09.JPG"></figure><figure><img
src="show/10.JPG"></figure> </figure>
CSS:
#gallery {
position: relative;
margin: 0;
background: none;
border: none;
}
#gallery figure {
position: absolute;
display: inline-block;
animation-name: wechseln;
animation-duration: 10s;
animation-iteration-count: infinitive;
}
#gallery figure:last-of-type {
position: relative;
}
@keyframes wechseln {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#gallery figure:nth-of-type(2) {
animation-delay: 1s;
opacity: 0;
}
#gallery figure:nth-of-type(3) {
animation-delay: 2s;
opacity: 0;
}
#gallery figure:nth-of-type(4) {
animation-delay: 3s;
opacity: 0;
}
#gallery figure:nth-of-type(5) {
animation-delay: 4s;
opacity: 0;
}
#gallery figure:nth-of-type(6) {
animation-delay: 5s;
opacity: 0;
}
#gallery figure:nth-of-type(7) {
animation-delay: 6s;
opacity: 0;
}
#gallery figure:nth-of-type(8) {
animation-delay: 7s;
opacity: 0;
}
#gallery figure:nth-of-type(9) {
animation-delay: 8s;
opacity: 0;
}
#gallery figure:nth-of-type(10) {
animation-delay: 9s;
opacity: 0;
}
Hallo Jens,
ein Infinitiv ist nicht Infinit...
https://developer.mozilla.org/de/docs/Web/CSS/animation-iteration-count
Rolf
Sorry, da ist mir beim Übertagen ein Fehler unterlaufen. Natürlich steht bei mir auch "infinite" in des css-Datei, und trotzdem funktioniert es nicht?
Danke für den Link mit den Browserkompatibilitäten. Nachdem ich die -webkit-Erweiterung hinzugefügt habe pausiert die Animation nach dem letzten Bild, überspringt die ersten 5 und macht dann ab Bild 6 wieder weiter, unabhängig vom verwendeten Browser.
#gallery figure {
position: absolute;
display: inline-block;
top: 0;
left: 2em;
z-index: 1;
animation-name: wechseln;
-webkit-animation-name: wechseln;
animation-duration: 50s;
-webkit-animation-duration: 50s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
Servus!
Ich möchte eine animierte Bildershow auf meiner Webseite einrichten. Ich habe mich dabei von dem Nürnberg-Beispiel inspirieren lassen. Ich habe es auf 10 Bilder erweitert. Leider läuft die Animation nur einmal durch und bleibt dann beim ersten Bild hängen.
Auch das Wiki-Beispiel verwendet infinite.
Herzliche Grüße
Matthias Scharwies
Ja, da ist mir beim Übertagen ein Fehler unterlaufen. Natürlich steht bei mir auch "infinite" in des css-Datei, und trotzdem funktioniert es nicht?
Hallo
CSS:
@keyframes wechseln { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
im Wiki ist da aber noch eine Zeile mehr:
@keyframes wechseln {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Gruß
Jürgen
Ich weiß. Ich habe damit herumprobiert. Aber auch beim Original funktioniert es nicht?!
Hallo,
https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Bildwechsler-2.html#view_result
da läuft die Anmimation doch ohne Ende.
Der Trick dabei ist:
Bei deinen zehn Bildern muss die Zeit mit Opacität 1 daher viel kürzer sein, als im Wiki-Beispiel. Danach muss aber wieder auf Opacität 0 zurückgeschaltet werden.
Gruß
Jürgen
Vielen Dank für den Hinweis auf die "opacity" Einstellungen. Wenn ich die für 1 reduziere, bewegt sich das Ganze wirklich in die richtige Richtung. Ich muss ehrlich gestehen, dass ich diese Einstellung wohl noch nicht richtig verstanden habe und muss mich wohl nochmal belesen. Danke Jens
Hallo Jens,
die Mathematik dahinter ist nicht ganz einfach - mir raucht jedenfalls aktuell der Kopf. Im Beispiel werden 3 Bilder animiert, darum 15s total und 5s Verschiebung.
In den Keyframes wird das Bild im Bereich von 20%-40% angezeigt, vorher eingeblendet und nachher ausgeblendet. Durch den Verzug von 1/3 der Animation wird erreicht, dass das 2. Bild voll angezeigt wird, wenn die Animation des 1. Bildes bei 53% ist. Zwischen 40% und 53% ist also die Transitionsphase, wo beide Bilder teildurchsichtig sind.
Ich habe das mit Excel mal visualisiert.
Die Animation des 2. Bildes beginnt bei 33% (1/3). Das 1. Bild ist bei 20% (1/5) voll da, also bei 3/5 des Animationsverzugs. Die Dauer der Vollanzeige beträgt ebenfalls 20%, also weitere 3/5. Das Ausblenden dauert genau so lange.
Du willst 10 Bilder wechseln. D.h. die Animation des 2. Bildes beginnt bei 10%. 3/5 von 10% sind 6%.
Daraus folgt als Keyframes-Definition:
@keyframes wechseln {
0% { opacity: 0;}
6% { opacity: 1; }
12% { opacity: 1; }
18% { opacity: 0; }
100% { opacity: 0; }
}
Mein Timing-Diagramm dazu sieht dann so aus:
Probier das mal.
Rolf
Servus!
Hallo Jens,
die Mathematik dahinter ist nicht ganz einfach - mir raucht jedenfalls aktuell der Kopf.
Und da stößt die Anwendung von solchen CSS-Eigenschaften an seine Grenzen, finde ich.
Früher hatte ich so etwas versucht, um den Einsatz von weiteren JS-Scripten im CMS zu vermeiden.
Heute finde ich, dass man da JavaScript verwenden sollte.
Ein Bild wird mit JS in den Viewport geschoben und eingeblendet, während das letzte ausgeblendet wird. Die Reihenfolge läuft entweder nach dem HTML-Markup oder auch zufällig, die Animation wird nur für den einzelnen Einblende-Vorgang verwendet, nicht für das komplizierte Timing.
@Rolf B Darf ich Deine Bilder für's Wiki verwenden?
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
natürlich darfst Du meine Bilder verwenden. Dafür sind sie da.
Um das Ganze mit CSS generisch zu bekommen, muss man wohl noch etwas mit custom properties herumspielen.
Rolf
Hallo Matthias,
wie ich sehe, hast du das Wiki schon um das Beispiel mit den 10 Bildern ergänzt. Bei der Erklärung für das Beispiel der drei Bilder schreibts du "dass das erste Bild bei 3/5 der Zeit voll sichtbar sein muss". Wenn ich mir aber das Zeitdiagramm richtig ansehe, dann ist doch bei 3/5 das erste Bild schon auf 0, das zweite voll sichtbar (also auf 1) und das dritte beginnt mit der Animation. Oder?
Gruß
Jens
Hallo Jens,
das war ich 😀, es ist ja ein Wiki.
Ich guck mir das nochmal an.
Rolf
Hallo Jens,
nein, das ist richtig so. Es ist aber schwierig nachzuvollziehen, welche Angabe sich worauf bezieht.
Das erste Bild ist voll sichtbar, wenn 3/5 der Zeit bis zum Start der Bild-2 Animation vergangen sind. Also 3/5 von 33%, nicht 3/5 der Gesamtdauer.
Ich habe den Wiki-Text nochmal überarbeitet. Hoffentlich ist es jetzt nicht noch schlimmer geworden. Ich bin aber Mathematiker, kein Mathelehrer (sprich: ich kann Mathe, aber nicht erklären[1]).
Rolf
Der Umkehrschluss, dass Mathelehrer zwar erklären, aber kein Mathe können, ist nicht zulässig. ↩︎
Hallo Rolf,
ja, so ist es wirklich verständlich!
Danke und Gruß
Jens
Danke!! So hatte ich die keyframe-Einstellungen gar nicht verstanden. Ich werde das in Ruhe nochmal durchrechnen und hoffe, es dann auch zu verstehen 😉 Sobald ich wieder Zeit habe, werde ich das ausprobieren!! Vorerst schon mal vielen Dank für deine Mühe und den rauchenden Kopf! Gruß Jens
Hallo Rolf,
vielen Dank für deine Hilfe. Nach deiner Erklärung und nachdem ich mir das Ganze selbst nochmal durchgerechnet habe, hab ich´s wohl verstanden. Von allein wäre ich wohl nicht auf diese keyframe-Regel gekommen. Jetzt funktioniert mein Beispiel mit den 10 Bildern auch!
Danke und Gruß
Jens