Hallo Robert > Guck doch mal hier > <http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework> Nichts für ungut, aber ich habe da so meine Zweifel, ob _dieses_ Tutorial hier wirklich (und vor allem uneingeschränkt und unkommentiert) so hilfreich ist... Erstens setzt es Fähigkeiten in JavaScript voraus, die nach dem [eigenen Bekunden](http://forum.selfhtml.org/self/2015/aug/2/bilder-austauschen/1647004#m1647004) des TO hier _nicht_ gegeben sind, und zweitens erscheint mir dieses Tutorial doch etwas _angestaubt_ zu sein: Ich meine: Animieren _in JavaScript_? - Und auch noch mit `setTimeout( )`{: .language-javascript} oder `setInterval( )`{: .language-javascript}? - Wirklich? Mal abgesehen davon, dass es mit `requestAnimationFrame( )`{: .language-javascript} mittlerweile eine deutlich performantere Alternative gäbe, halte ich es grundsätzlich für _völlig unnötig_ und mithin für _bad practice_, so wie in diesem Tutorial beschrieben die Animationen über JavaScript zu steuern! Statt Style-Eigenschaften über JavaScript zu setzen und sich mit dem Timing einen abzubrechen würde ich eher empfehlen, einmal einen Blick auf die Möglichkeiten von [Animationen in CSS](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation) zu werfen, und für „coole Effekte“ vielleicht auch noch auf [CSS-Transformationen](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Transformationen). Solange _keine_ Benutzerinteraktion gefordert ist, lässt sich sowas _komplett ohne JavaScript_ machen, und falls doch gewünscht ist, dass der Benutzer in die Steuerung eingreifen kann, dann sollte dies so umgesetzt werden, dass nur die Klasse der Elemente in JavaScript gewechselt wird. Wenn es **zum Beispiel** nur um den in dem Tutorial beschriebenen „Fader-Effekt“ geht, also lediglich Bilder in regelmäßigen Abständen übergeblendet werden sollen, dann wäre die Umsetzung mit CSS mit ein wenig Übung echt _kein_ Problem: Einfach die Bilder innerhalb ihres Elternelementes mit `position: absolute`{: .language-css} exakt gleich positionieren, so dass sie genau _übereinander_ liegen (wobei noch erwähnt sei, dass hierfür das Elternelement ebenfalls _positioniert_ werden muss)... ...dann mit `animation-duration`{: .language-css} einen Wert für die _gesamte Dauer_ der Animation festlegen, also die Zeit, wie lange es dauert, bis alle Bilder den Zyklus einmal durchlaufen haben... ...mit `animation-iteration-count: infinite;`{: .language-css} dafür sorgen, dass nach dem letzten Bild die Geschichte wieder von vorne anfängt... ...und dann mittels `@keyframe`{: .language-css} jedem Bild einen _Zeitabschnitt_ zuweisen, indem es _sichtbar_ ist, beispielsweise: ~~~ css @keyframe fadePic1 { 0% {opacity: 0} 5% {opacity: 1} 15% {opacity: 1} 20% {opacity: 0} 100% {opacity: 0} } @keyframe fadePic2 { 0% {opacity: 0} 15% {opacity: 0} 20% {opacity: 1} 30% {opacity: 1} 35% {opacity: 0} 100% {opacity: 0} } ~~~ ...wobei das wahrscheinlich auch noch etwas eleganter geht (habe mich schon länger nicht damit befasst). Jedenfalls würde ich empfehlen, die beiden von mir verlinkten Seiten aus dem _selfWiki_ einmal etwas genauer zu studieren und mit der Materie zu experimentieren, um dann gegebenenfalls noch einmal unter den entsprechenden Begriffen in der Suchmaschine der Wahl nach einschlägigen Beispielen zu suchen. Ein wenig Eigenengagement vorausgesetzt, wird sich so IMHO auch _ohne JavaScript_ eine (vermutlich mehr als) befriedigende Lösung finden. Gruß, HAL

Hallo Robert > Guck doch mal hier > <http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework> Nichts für ungut, aber ich habe da so meine Zweifel, ob _dieses_ Tutorial hier wirklich (und vor allem uneingeschränkt und unkommentiert) so hilfreich ist... Erstens setzt es Fähigkeiten in JavaScript voraus, die nach dem [eigenen Bekunden](http://forum.selfhtml.org/self/2015/aug/2/bilder-austauschen/1647004#m1647004) des TO hier _nicht_ gegeben sind, und zweitens erscheint mir dieses Tutorial doch etwas _angestaubt_ zu sein: Ich meine: Animieren _in JavaScript_? - Und auch noch mit `setTimeout( )`{: .language-javascript} oder `setInterval( )`{: .language-javascript}? - Wirklich? Mal abgesehen davon, dass es mit `requestAnimationFrame( )`{: .language-javascript} mittlerweile eine deutlich performantere Alternative gäbe, halte ich es grundsätzlich für _völlig unnötig_ und mithin für _bad practice_, so wie in diesem Tutorial beschrieben die Animationen über JavaScript zu steuern! Statt Style-Eigenschaften über JavaScript zu setzen und sich mit dem Timing einen abzubrechen würde ich eher empfehlen, einmal einen Blick auf die Möglichkeiten von [Animationen in CSS](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation) zu werfen, und für „coole Effekte“ vielleicht auch noch auf [CSS-Transformationen](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Transformationen). Solange _keine_ Benutzerinteraktion gefordert ist, lässt sich sowas _komplett ohne JavaScript_ machen, und falls doch gewünscht ist, dass der Benutzer in die Steuerung eingreifen kann, dann sollte dies so umgesetzt werden, dass nur die Klasse der Elemente in JavaScript gewechselt wird. Wenn es **zum Beispiel** nur um den in dem Tutorial beschriebenen „Fader-Effekt“ geht, also lediglich Bilder in regelmäßigen Abständen übergeblendet werden sollen, dann wäre die Umsetzung mit CSS mit ein wenig Übung echt _kein_ Problem: Einfach die Bilder innerhalb ihres Elternelementes mit `position: absolute`{: .language-css} exakt gleich positionieren, so dass sie genau _übereinander_ liegen (wobei noch erwähnt sei, dass hierfür das Elternelement ebenfalls _positioniert_ werden muss)... ...dann mit `animation-duration`{: .language-css} einen Wert für die _gesamte Dauer_ der Animation festlegen, also die Zeit, wie lange es dauert, bis alle Bilder den Zyklus einmal durchlaufen haben... ...mit `animation-iteration-count: infinite;`{: .language-css} dafür sorgen, dass nach dem letzten Bild die Geschichte wieder von vorne anfängt... ...und dann mittels `@keyframe`{: .language-css} jedem Bild einen _Zeitabschnitt_ zuweisen, indem es _sichtbar_ ist, beispielsweise: ~~~ css @keyframe fadePic1 { 0% {opacity: 0} 5% {opacity: 1} 15% {opacity: 1} 20% {opacity: 0} 100% {opacity: 0} } @keyframe fadePic2 { 0% {opacity: 0} 15% {opacity: 0} 20% {opacity: 1} 30% {opacity: 1} 35% {opacity: 0} 100% {opacity: 0} } ~~~ ...wobei das wahrscheinlich auch noch etwas eleganter geht (habe mich schon länger nicht damit befasst). Jedenfalls würde ich empfehlen, die beiden von mir verlinkten Seiten aus dem _selfWiki_ einmal etwas genauer zu studieren und mit der Materie zu experimentieren, um dann gegebenenfalls noch einmal unter den entsprechenden Begriffen in der Suchmaschine der Wahl nach einschlägigen Beispielen zu suchen. Ein wenig Eigenengagement vorausgesetzt, wird sich so IMHO auch _ohne JavaScript_ eine (vermutlich mehr als) befriedigende Lösung finden! ;-) Gruß, HAL