Jens Gerlach: Animierte Bildershow

problematische Seite

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;
}
  1. problematische Seite

    Hallo Jens,

    ein Infinitiv ist nicht Infinit...

    https://developer.mozilla.org/de/docs/Web/CSS/animation-iteration-count

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      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?

    2. problematische Seite

      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;
      }
      
  2. problematische Seite

    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

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    1. problematische Seite

      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?

  3. problematische Seite

    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

    1. problematische Seite

      Ich weiß. Ich habe damit herumprobiert. Aber auch beim Original funktioniert es nicht?!

      1. problematische Seite

        Hallo,

        welche Version aus dem Wiki meinst du denn?

        Gruß
        Jürgen

        1. problematische Seite

          1. problematische Seite

            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:

            • Die Bilder liegen alle übereinander.
            • Bis auf das erste sind alle durchsichtig.
            • Durch die Animation wird jedes Bild bis auf das erste zeitverzögert kurz undurchsichtig gemacht.

            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

            1. problematische Seite

              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

          2. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              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

              --
              25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
              2. problematische Seite

                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

                1. problematische Seite

                  Hallo Jens,

                  das war ich 😀, es ist ja ein Wiki.

                  Ich guck mir das nochmal an.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                2. problematische Seite

                  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

                  --
                  sumpsi - posui - obstruxi

                  1. Der Umkehrschluss, dass Mathelehrer zwar erklären, aber kein Mathe können, ist nicht zulässig. ↩︎

                  1. problematische Seite

                    Hallo Rolf,

                    ja, so ist es wirklich verständlich!

                    Danke und Gruß

                    Jens

            2. problematische Seite

              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

            3. problematische Seite

              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