Bilder austauschen

[( 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 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( ) oder setInterval( )? - Wirklich?

Mal abgesehen davon, dass es mit requestAnimationFrame( ) 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 zu werfen, und für „coole Effekte“ vielleicht auch noch auf CSS-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 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 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; dafür sorgen, dass nach dem letzten Bild die Geschichte wieder von vorne anfängt...

...und dann mittels @keyframe jedem Bild einen Zeitabschnitt zuweisen, indem es sichtbar ist, beispielsweise:

@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