Frage zum Wiki-Artikel „Bildwechsler“

[marctrix]

Hej Thomas,

Ich sitze hier in einer Firma, deren Homepage ich machen soll. Ich verschwende jetzt schon seit zehn Tagen Stunden um Stunden meiner Arbeitszeit damit, den lächerlichen Austausch von drei popligen Bildern hinzubekommen.

Wenn es lächerlich (im Sinne von lächerlich einfach) ist, wären wir längst fertig.

Offenbar möchte jemand, der es selber nicht kann und die Komplexität nicht versteht, dass jemand anders, dem er keine Schulung gönnt (du), das mal eben so nebenher macht. Gibt ihm dazu haufenweise komplexe Werkzeuge an die Hand (Photoshop, Dreamwever, in die du vermutlich auch nicht eingarbeitet wurdest) und lässt dich dann doof dastehen, weil du diese scheinbar kleine Aufgabe nicht gelöst bekommst.

Wer immer das will, hätte einem der es kann, ein bis zwei Stunden bezahlen müssen, dann hätte er das gewünschte Ergebnis so wie es sein soll: barrierefrei und suchmaschinenfreundlich.

Verschwendet ist die Zeit nicht. Dein Informatik-Kollege ist sicher schlau. Aber er hat eben kein Frontend gelernt. Oft ist Mathematik hilfreich, hier reicht aber das einmaleins und das Wissen, dass 100% ein Ganzes sind.

Es geht nur noch darum, das Ganze sinnvoll nach Euren Vorstellungen aufzuteilen.

Auch ist deine Arbeitszeit nicht verschwendet.

Du erlernst Fähigkeiten, die dir bei der weiteren Pflege Eurer Homepage zugute kommen werden. Kompetenz in der Firma zu haben ist sinvoll.

Eine CSS-Schulung kostet je nach Dozent und Bildungsträger etwa 800,- bis 2000,- EUR am Tag. Je nach Dozent oder Bildungsträger. Hier kostet es nichts, dafür geht es langsamer voran.

Mag sein, dass es dir zu langsam geht. Aber Verständnis braucht Zeit.

In einem anderen Forum hätten Dir Leute, die es selber vielleicht auch nicht, hinbekommen einen Link zu etwas wie Slick Caroussel (Ich habe aber so meine Zweifel, dass du damit glücklich wirst ohne Anleitung). Dann hättest du eine Anwendung, die mit viel JavaScript und Kilobyte Eure Webseite langsam macht. Einarbeiten müsstest du dich trotzdem, gerade weil das Slick Caroussel „alles“ kann.

Daher bleibt lieber auf einem Weg und gehe den erst einmal zu Ende.

Hier gibt es Leute, die mit viel Zeit und Geduld die Grundlagen erklären und Deinen Code korrigieren und auf Fehler hinweisen, bis es funktioniert.

Deine Ungeduld kann ich trotzdem verstehen. Aber es ist eben das, was ich kostenlos anbiete: ich bringe Leuten das Fischen bei, statt Fische zu verschenken. Weil mir das Beibringen Spaß macht. Das Fischen mache ich weniger gern und daher nur zum Broterwerb, also gegen Bezahlung.

Als animated Gif (Photoshop und auch andere Programme) habe ich es auch nicht hingekriegt, weil das wegen der Transparenzen oder auch Farben immer mies aussah. Genau deshalb will ich es ja mit CSS machen.

Und nein, ich habe bestimmt schon lange nicht mehr den Ehrgeiz, es selbst hinzubekommen, und es ist mir mittlerweile auch völlig egal, ob ich dann stolz auf mich sein kann, oder nicht.

Das sollte es nicht! (Auch wenn „Stolz“ ein von mir falsch gewähltes Wort war)

Arbeit sollte zufrieden machen und selbstbewusst und am Ende auch Freude bereiten.

Zurück zur eigentlichen Aufgabenstellung:

Du hast jetzt schon mehrfach gemerkt, dass die Transparenz Probleme macht. Wir haben hier zwar gezeigt, wie man technisch einen Teil dieser Probleme löst, aber ein Problem, dass du noch gar nciht bemerkt hast, bleibt trotz der hier gezeigten Lösung.

Es gibt relativ viele Menschen mit einer Blendempfindlichkeit. Mit zunehmenden Alter betrifft uns das fast alle.

Man kann als Nutzer leicht die Hintergrundfarbe anpassen. Wie sieht Deine Animation auf schwarzem Hintergrund aus?

Tipp: verwende keine Transparenz in den Bildern, die du animieren möchtest, sondern einen deckenden weißen Hintergrund (wenn es denn weiß sein soll).

Kann mir denn nicht bitte bitte bitte irgendeiner hier bei meinem anderen Script, das ich hier schon gepostet hatte, bei dem ja schon fast alles funktioniert hatte, nur noch sagen, welche Codezeile darin noch wie falsch ist? Der einzige Fehler hierbei ist, dass im allerersten Durchgang das Fading nicht ganz stimmt. Nach dem langsamen Verschwinden eines Bildes erscheint aprupt das nächste anstatt langsam fadend zu erscheinen.

Klar: die Animation beginnt mit opacity: 1 - also voll deckend!

In allen weiteren Durchgängen der Animation stimmt dann alles.

Weil das darüberliegende Bild in den weiteren Durchgängen nur allmählich verschwindet (transparenter wird).

(In diesem Script verstehe ich die verschiedenen Keyframezahlen übrigens wieder überhaupt nicht, aber trotzdem machen sie genau das gleiche wie im anderen Script.)

Nein, eben nicht.

Also um Deine Frage zu beantworten: in diesem Beispiel ist die Animation (also das was bei keyframes angegeben ist) nicht in Ordnung. Bei der anderen schon näher dran.

Du solltest wirklich bei einem Beispiel bleiben. Sonst werden wir niemals fertig…

Was du an der anderen Animation noch ändern musst, hatte ich dir gestern gesagt. Jetzt noch einmal mit anderen Worten: Derzeit hats du in der Animation an der wir gestern saßen Zeiträume, in denen zwei Dinge gleichzeitig geschehen: ein Bild wird eingeblendet und eines wird ausgeblendet, wodurch beide für eine Weile gleichzeitig sichtbar sind.

Du brauchst also für das Ausblenden des einen Bildes und für das Einblenden des anderen Bildes zwei getrennte Phasen.

Die erstellst du mittels keyframes. Sorge mit der Zeit für das delay dafür, dass sich die Ein- und Ausblendphasen nicht überlappen!

Und wie ich schon sagte: in einem Codepen hätten wir gemeinsam dran arbeiten können.

Marc