nicht angemeldet
marctrix
marctrix
Gunnar Bittersmann
marctrix
marctrix
Gunnar Bittersmann
JürgenB
Gunnar Bittersmann
marctrix
Gunnar Bittersmann
marctrix
marctrix
marctrix
Hallo lieber Bildwechselprofi! :)
Dein Bildwechsler ist sehr schön. Wie aber würde man es mit transparenten Bildern machen? Diese dürfen ja nicht von vornherein übereinanderliegen, sondern müssten wirklich ausgetauscht werden, sonst würde man ja immer alle Bilder gleichzeitig sehen. Mir geht es auch gar nicht um besondere Fadingeffekte. Ich möchte einfach nur in CSS (nicht in Javascript) programmieren, dass mehrere transparente Bilder automatisch mit einem Zeitabstand miteinander ausgetauscht werden. Für Deine Hilfe wäre ich sehr dankbar.
Liebe Grüße Thomas
Hej Thomas,
Ich möchte einfach nur in CSS (nicht in Javascript) programmieren, dass mehrere transparente Bilder automatisch mit einem Zeitabstand miteinander ausgetauscht werden. Für Deine Hilfe wäre ich sehr dankbar.
Ich habe mal einen zum Spaß gebaut, ist nicht perfekt, was die Zugänglichkeit angeht, aber vermutlich besser als die meisten. Funktion7mit Maus und tastat7, aber weil ich den checkbox-hack verwende, bekommen blinde seltsame Dinge vorgelesen.
Nichtsdestotrotz kommen auch blinde an alle Inhalte ran.
Falls du Interesse hast:
Mir ging es vor allem um die prinzipielle Machbarkeit. Man kann die Richtung ändern, die Art des Einblendfensters und so weiter.
Funktioniert nicht mit beliebig vielen slides. Dafür wäre dann doch noch ein bisschen JS nötig.
Marc
Hallo Marc!
Vielen Dank für Deine Bemühungen und Dein Script. :) Aber ich würde nur einen Bildwechsler, keinen Slider benötigen. Es ist also viel simpler: Es sollen nur mehrere transparente Bilder miteinander ausgetauscht werden, sonst nichts. (Es soll sich nichts bewegen.)
Wenn Du dazu auch ein Script hättest, wäre das toll. :D
Liebe Grüße Thomas
Hej Thomas,
Vielen Dank für Deine Bemühungen und Dein Script. :) Aber ich würde nur einen Bildwechsler, keinen Slider benötigen. Es ist also viel simpler: Es sollen nur mehrere transparente Bilder miteinander ausgetauscht werden, sonst nichts. (Es soll sich nichts bewegen.)
Ist ja egal ob man eine Animation benutzt oder display: block | none;
Aber fertig habe ich das nicht.
Übrigens: alle bewegten Inhalte müssen angehalten werden können. Sonst ist deine Seite nicht vernünftig nutzbar. Bewegte Inhalte lenken zu sehr ab!
Marc
Vielen Dank, Marc. ☺️☺️☺️ Ich hoffe, ich kann das nach Deinem Script für mich umsetzen. Komme erst nächste Woche dazu.
@@Thomas
Dein Bildwechsler ist sehr schön. Wie aber würde man es mit transparenten Bildern machen? Diese dürfen ja nicht von vornherein übereinanderliegen, sondern müssten wirklich ausgetauscht werden, sonst würde man ja immer alle Bilder gleichzeitig sehen.
Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?
LLAP 🖖
Hej Gunnar,
@@Thomas
Dein Bildwechsler ist sehr schön. Wie aber würde man es mit transparenten Bildern machen? Diese dürfen ja nicht von vornherein übereinanderliegen, sondern müssten wirklich ausgetauscht werden, sonst würde man ja immer alle Bilder gleichzeitig sehen.
Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?
Na gut, hier wird nur eine Farbe geändert - von transparent auf teiltransparent nehme ich mal an, habe jetzt nicht ins svg geschaut.
Aber man kann natürlich auch normale Bilder mit opacity komplett verschwinden lassen. Der Effekt beim überblenden ist sicher hübsch!
Guter Hinweis, habe ich überhaupt nicht dran gedacht…
Marc
Hej marctrix,
Na gut, hier wird nur eine Farbe geändert - von transparent auf teiltransparent nehme ich mal an, habe jetzt nicht ins svg geschaut.
Das svg ist ja mit drin im Beispiel (auch noch ganz am Anfang😀): also von gar keiner Farbe zu einer teiltransparenten. Das ist noch eine Spur kürzer!
Marc
@@marctrix
Na gut, hier wird nur eine Farbe geändert
?? Nö, es wird die Opazität der Bilder geändert. Dass das ich dafür der Einfachheit halber einfarbige genommen habe, tut nichts zur Sache …
Aber man kann natürlich auch normale Bilder mit
opacitykomplett verschwinden lassen.
… eben. Es hätten genausogut mehrfarbige SVGs oder PNGs oder GIFs oder JPEGs (dann freilich nicht mit Transparenz) sein können.
Der Effekt beim überblenden ist sicher hübsch!
Veni, vidi, da Vinci.
LLAP 🖖
Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?
Also wenn ich mit dem ursprünglichen Wiki-Script "Bildwechsler" transparente GIFs benutze, dann scheinen die alle durch, weil sie übereinanderliegen. Es tut mir schrecklich leid, aber ich bin leider zu sehr Anfänger, um Eure weiteren Scripts, Marc und Gunnar, so weit zu verstehen, dass ich sie für mich adaptieren könnte. Ich möchte einfach nur PNGs wechseln, ohne dass sie durchscheinen, ohne Bewegungen, Opazitäten oder sonstige Spielereien.
Hallo,
Also wenn ich mit dem ursprünglichen Wiki-Script "Bildwechsler" transparente GIFs benutze, dann scheinen die alle durch, weil sie übereinanderliegen.
alles andere würde mich auch verwundern. Hast du mal einen Link zu deiner Testseite?
Gruß
Jürgen
Hallo Jürgen! :)
Hier die Url: http://www.fotosatzpfeifer.de/html/test_bildwechsel5.html Dieser Bildwechsel basiert jetzt auf dem Script "Bildwechsler" unter "CSS/Tutorials" hier im Wiki. Wie gesagt bräuchte ich die Fadingeffekte eigentlich gar nicht. Schön wäre es zwar schon, aber wenn es dadurch Probleme gibt, können sie auch wegfallen. Letztendlich geht es einfach nur darum, mehrere Bilder automatisch hintereinander mit Zeitverzögerung ohne Javascript miteinander auszuwechseln.
Vielen Dank im Voraus Thomas
@@Thomas
Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?
Also wenn ich mit dem ursprünglichen Wiki-Script "Bildwechsler" transparente GIFs benutze, dann scheinen die alle durch, weil sie übereinanderliegen. Es tut mir schrecklich leid, aber ich bin leider zu sehr Anfänger, um Eure weiteren Scripts, Marc und Gunnar, so weit zu verstehen, dass ich sie für mich adaptieren könnte.
Du musst schon genauer werden, was du nicht verstehst. Dann können wir dir weiterhelfen.
Oder du sagst: keine Zeit, das zu verstehen. Ist auch OK, das kannst du mit Geld aufwiegen, das du demjenigen zukommen lässt, der dir das baut. Auch dann können wir dir weiterhelfen.
Wähle 2, nicht 3.
Ich möchte einfach nur PNGs wechseln, ohne dass sie durchscheinen, ohne Bewegungen, Opazitäten oder sonstige Spielereien.
Die Umschaltung der Opazität zwischen 0 und 1 ist keine Spielerei, sondern essentiell. Ob die Umschaltung nun abrupt oder fließend verläuft, ist vielleicht Spielerei; die gibt’s aber gratis dazu.
LLAP 🖖
Ich habe jetzt versucht, das Script mit den SVGs auf meinen Fall (erst mal mit zwei Bildern) umzuschreiben. Da stehen dann einfach nur die beiden Bilder untereinander und nichts passiert. Was mache ich falsch?
Auge
Henry
Matthias Apsel<style type="text/css">
#template { display: none }
div { position: relative }
svg {
--animation-duration: 5s;
position: absolute;
-webkit-mix-blend-mode: multiply;
mix-blend-mode: multiply;
animation: var(--animation-duration) springenderPunkt infinite;
}
#right
{
animation-delay: calc(var(--animation-duration)*2/3);
}
@keyframes springenderPunkt
{
0% { opacity: 0 }
20% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<svg id="template"><img src="FSP-Eigenschaften1.png"></svg>
<div>
<svg id="right"><img src="FSP-Eigenschaften2.png"></svg>
</div>
Hej Thomas,
Ich habe jetzt versucht, das Script mit den SVGs auf meinen Fall (erst mal mit zwei Bildern) umzuschreiben. Da stehen dann einfach nur die beiden Bilder untereinander und nichts passiert. Was mache ich falsch?
Als erstes: du machst es zu kompliziert. Lass die SVG-Elemente weg, wenn du keine SVGs benutzt.
Und wenn Du einen Container benutzt, um die Bilder dadrinnen absolute auszurichten, solltest du vielleicht die Bilder auch beide in diesen Container packen 😉 Ich habe das mal gemacht… — sieht doch schon ganz gut aus! - Jetzt kannst du an den Feinheiten schrauben!
Marc
@@Thomas
Ich habe jetzt versucht, das Script mit den SVGs auf meinen Fall (erst mal mit zwei Bildern) umzuschreiben.
Dann solltest du anstelle der svg-Elemente deine img in dem div haben. (Das Element <svg id="template"> entfällt ganz.
Und im Stylesheet die Selektoren von svg auf img ändern. Dann sollte es in etwa so aussehen wie das bereits verlinkte Bespiel mit da Vinci.
Was mache ich falsch?
<img src="FSP-Eigenschaften1.png"> <img src="FSP-Eigenschaften2.png">
Du hast das zwingend notwendige alt-Attribut vergessen.
LLAP 🖖
Vielen Dank, Marc und Gunnar. :) Mit Euren Änderungen habe ich jetzt wieder einen Bildwechsel. Aber es besteht wieder das gleiche Problem mit meinen transparenten PNGs. Die liegen übereinander und scheinen durch. heul
Hej Thomas,
Vielen Dank, Marc und Gunnar. :) Mit Euren Änderungen habe ich jetzt wieder einen Bildwechsel. Aber es besteht wieder das gleiche Problem mit meinen transparenten PNGs. Die liegen übereinander und scheinen durch. heul
Nicht doch! 😉
Der „Trick“ ist, dass alle Bilder vollständig durchsichtig sein müssen, abgesehen von dem einen, was gerade angezeigt wird.
Das meinte ich mit rumspielen. Ist ein reines Rechenexempel. Du musst bei fünf Bildern beispielsweise dafür sorgen, dass 4/5 der Zeit die Bilder nicht zu sehen sind. Und die delays für die Bilder jeweils um 1/5 versetzen, so dass sie nicht alle gleichzeitig eingeblendet werden 😉
Da ich jetzt Dein Beispiel zum ersten Mal sehe: Texte sollten nicht als Bilder realisiert werden. Schon gar nicht animiert.
Wichtig auch: die Animation muss angehalten werden können.
Geht auch alles. Wie das geht, kannst du in meinem Beispiel nachschauen.
Marc
Hallo Marc!
Du musst bei fünf Bildern beispielsweise dafür sorgen, dass 4/5 der Zeit die Bilder nicht zu sehen sind. Und die delays für die Bilder jeweils um 1/5 versetzen,
Es tut mir leid, aber ich verstehe halt leider nicht, wie Dein Script funktioniert. Ich weiß nicht, wie ich dafür sorgen soll, dass bei meinen drei Bilder 2/3 der Zeit die Bilder nicht zu sehen sind. Und wie/wo versetze ich Delays für diese Bilder? Ich habe versucht, mit den verschiedenen Zahlen rumzuspielen, aber ohne Erfolg. Auch mit der Hilfe eines Informatikstudenten wurde ich nicht schlauer. Hier noch mal das Script, wie es bei mir jetzt aussieht:
<style type="text/css">
div { position: relative }
img {
--animation-duration: 5s;
position: absolute;
-webkit-mix-blend-mode: multiply;
mix-blend-mode: multiply;
animation: var(--animation-duration) springenderPunkt infinite;
}
img:nth-of-type(2n)
{
animation-delay: calc(var(--animation-duration)*2/3);
}
@keyframes springenderPunkt
{
0% { opacity: 0 }
20% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<div>
<img src="FSP-Eigenschaften1.png">
<img src="FSP-Eigenschaften2.png">
<img src="FSP-Eigenschaften3.png">
</div>
Und hier das Ergebnis: http://www.fotosatzpfeifer.de/html/test_bildwechsel4c.html
Hej Thomas,
Du musst bei fünf Bildern beispielsweise dafür sorgen, dass 4/5 der Zeit die Bilder nicht zu sehen sind. Und die delays für die Bilder jeweils um 1/5 versetzen,
Es tut mir leid, aber ich verstehe halt leider nicht, wie Dein Script funktioniert.
Das ist im Detail auch gar nicht nötig. Du hast ja jetzt schon mal geschafft, dass eine Animation läuft.
Zum Experimentieren ist Codepen eine prime Sache. Da kannst du ein „Widget“ wie z.B. einen Bildwechsler nicht nur losgelöst vom Rest bearbeiten, ohne dass dir anderes CSS, das du in Deinem Projekt verwendest dazwischen funkt. Du kannst das erstellte Beispiel dann auch später leicht wiederfinden und in anderen Projekten wiederverwenden. Vor allem aber fällt das Experimentieren leicht. Unter anderem, weil sich alle Änderungen (fast) sofort auswirken. Nebenbei kannst du deine Experimente noch teilen und Hilfe erhalten.
Der absolute Clou. Du kannst ein Beispiel wie von mir auch Clonen und Deine eigenen Experimente darauf aufbauen.
Das ganze ist auch noch kostenlos (wenn du nicht die Pro-Variante benötigst. Ich brauche die bisher nicht).
Ich weiß nicht, wie ich dafür sorgen soll, dass bei meinen drei Bilder 2/3 der Zeit die Bilder nicht zu sehen sind. Und wie/wo versetze ich Delays für diese Bilder?
Wenn du so ein Stichwort hat, nutze doch einfach mal "CSS animation Delay" als Suchbegriff 😉
Ich habe versucht, mit den verschiedenen Zahlen rumzuspielen, aber ohne Erfolg. Auch mit der Hilfe eines Informatikstudenten wurde ich nicht schlauer.
Tja, im Informatik-Studium ist Frontend wohl kein Thema…
Zu einfach für den Lehrplan, vermute ich mal (nein, ich weiß es besser: mein CSS-Buch wird an Unis genutzt. Anscheinend aber nicht an jeder).
Hier noch mal das Script, wie es bei mir jetzt aussieht:
Dazu erst mal ein paar Denkanstöße (s.u.). Ich bin mir fast sicher, dass du alleine drauf kommst:
img {
--animation-duration: 5s;
position: absolute;
-webkit-mix-blend-mode: multiply;
mix-blend-mode: multiply;
Wozu brauchst du mix-blend-mode? - Wie ich schon sagte: mach es Dir nicht unnötig kompliziert. Du animierst doch die Bilder und wir wollten doch alle transparent machen, bis auf eines. Was soll mix-blend-mode da noch regeln?
Falls du nicht genau weißt, was das tut, benutz das nicht. 😉
Lies dir erst durch, was sich hinter dem Link verbirgt.
Weiter im (Quell-)text:
animation: var(--animation-duration) springenderPunkt infinite;
}
img:nth-of-type(2n)
{
animation-delay: calc(var(--animation-duration)*2/3);
}
Funktioniert das? Ich weiß jetzt nicht aus dem Kopf, ob bei * und / ein Leerzeichen sein muss — bei einem minus brauchst du das auf jeden Fall. Also so:
animation-delay: calc(var(--animation-duration) * 2 / 3);
Hat was mit der Zukunftssicherheit zu tun. Da wird es Keywords geben, in denen mindestens das minus erlaubt sein wird. Das dient dann (nicht separiert durch Leerzeichen) nicht als Rechenzeichen, sondern als Satzzeichen.
Du hast jetzt implizit das Verhalten für img:nth-of-type(1n) (jedes Element) festgelegt (kein delay) und für jedes zweite Element: img:nth-of-type(2n) — kann sein, dass du da meinen Fehler übernommen hast? Gemeint war genau das zweite Element. Das schreibt sich dann so: img:nth-of-type(2) (ohne n).
Sorry, wenn ich das falsch vorgegeben habe.
@keyframes springenderPunkt
{
0% { opacity: 0 }
20% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
Drei Drittel — passt gut für drei Bilder. Leg jetzt noch das delay für das dritte Bild fest mit img:nth-of-type(3) und wie gesagt benutz am besten so was wie Codepen für Deine Experimente. Du bist nah dran!
Noch drei Tipps, für das Debuggen, um das eigentliche Problem herauszukitzeln und das Beispiel erst mal so einfach und verständlich wie möglich zu machen:
1.) Benutz nicht die Kurzschreibweise, dann weißt du auch genau wofür welcher Wert steht. Statt animation also:
2.) Verzichte auf Variablen. Das Beispiel ist so simpel (für allem wenn du 6 Sekunden für die Animation ansetzt statt 5), dass das prima im Kopf zu rechnen ist
3.) Verwende passende sprechende Namen. In Deinem Fall also nicht springenderPunkt, denn den hast du ja nciht, sondern z.B. ´bildwechsler`
Dann solltest du etwas in dieser Art bekommen:
animation-name: bildwechsler;
animation-duration: 6s;
animation-iteration-count: infinite;
Für animation-delay brauchst du dann 1/3 von 6s und 2/3 von 6s. Kannst ja einen Taschenrechner nehmen 😉
SCNR…
Wenn es dann erst mal läuft, kannst du den Code ja immer noch kürzen und optimieren.
Marc
PS: Sorry, dass es so lange Pausen zwischen meinen Antworten gibt, aber ich sitze nciht den ganzen Tag am Rechner. Vermutlich wird die nächste Antwort erst morgen kommen…
Hallo Marc!
Zunächst mal vielen Dank, dass Du Dir so viel Mühe mit mir gibst.
Dennoch komme ich leider immer noch nicht den geringsten Schritt weiter.
(Ich arbeite übrigens mit Dreamweaver, bei dem ich mir wunderbar mit einem Tastendruck immer das Ergebnis anschauen kann. Deshalb und weil ich mich ungern im Internet irgendwo anmelde und nicht noch mehr Tage damit verschwenden will, mich auch noch mit einer Entwicklerumgebung auseinanderzusetzen, sehe ich jetzt für mich nicht den großen Vorteil eines Codepen.)
Hier zunächst mal wieder mein neuestes Script:
div { position: relative }
img {
animation-name: bildwechsler;
animation-duration: 6s;
animation-iteration-count: infinite;
position: absolute;
}
img:nth-of-type(2)
{
animation-delay: 2;
}
img:nth-of-type(3)
{
animation-delay: 4;
}
@keyframes bildwechsler
{
0% { opacity: 0 }
20% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<div>
<img src="FSP-Eigenschaften1.png">
<img src="FSP-Eigenschaften2.png">
<img src="FSP-Eigenschaften3.png">
</div>
Und hier wieder das (immer gleiche) Ergebnis:
http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html
Ich sage Dir jetzt, was ich verstehe und was ich nicht verstehe.
Ich verstehe, dass ich mit "animation-name" meine Animation jetzt "bildwechsler" genannt habe.
Ich verstehe, dass die Animation insgesamt 6 Sekunden läuft (vom leeren Bildschirm über das langsame Erscheinen der Bilder, deren langsames Verschwinden und wieder bis zum leeren Bildschirm). (Dass 6 Sekunden eigentlich viel zu schnell für meine Zwecke wären, spielt jetzt erst mal überhaupt keine Rolle. Eigentlich sollte jedes meiner 3 Bilder vielleicht ca. 6 Sekunden lang zu sehen sein, aber um es zu testen, muss ich so wenigstens nicht so lange warten.)
Ich verstehe, dass ich mit "animation-iteration-count" meine Animation sich unendlich oft wiederholen lasse.
Ich verstehe, dass "img:nth-of-type(2)" mein zweites Bild betreffen soll. Aber völlig egal, was ich dann dort bei "animation-delay", von dem ich verstehe, dass es in Sekunden angegeben meine Animation verzögern soll, eingebe, es ändert sich nichts. Ich dachte, dass ich hier bestimmen könnte, wann das zweite Bild erscheint, aber Pustekuchen. Diese Teile meines CSS-Scripts sind also komplett nichtig.
Ich verstehe, dass "@keyframes" das Fading über die ganze Animation hinweg verursacht (das ich ja eigentlich gar nicht bräuchte, aber es ist ganz nett).
Aber ich bin anscheinend noch Kilometer davon entfernt, zu verstehen, wie ich Bild 2 sage, dass es erst nach 2 Sekunden erscheinen und nach 4 Sekunden wieder verschwinden soll, während Bild 1 beim Erscheinen von Bild 2 wieder verschwinden soll. Und Bild 3 soll nach 4 Sekunden erscheinen und damit Bild 2 verschwinden.
Dass ich das Verschwinden und Erscheinen wohl mit "opacity: 1" bzw. "opacity: 0" machen soll, ist mir auch klar, aber wie soll ich das den einzelnen Bildern zuordnen und das auch noch mit 1 oder 0 zu den verschiedenen Zeitpunkten?
Egal, was ich an meinem Script verändere, das Ergebnis ist immer das gleiche. Alle Bilder stehen übereinander, und ein Bildwechsel findet nicht statt. Ich verstehe nun halbwegs die Animation, aber die Animation ist ja eigentlich gar nicht das Problem, sondern der völlig fehlende Bildwechsel.
Hallo
Wenn du eine Verzögerung per animation-delay einbaust, dann solltest du auch gültige Werte verwenden. Ein Blick in den Inspektor der Entwicklertools meines Browsers gibt mir bei animation-delay: 2; (bzw. 4) die Fehlermeldung „Ungültiger Wert für Eigenschaft“. Ein Blick ins Wiki zeigt mir, dass der Wert eine Einheit für die Zeit haben soll. Und siehe da, mit den Werten 2s und 4s funktioniert das auf einmal grundsätzlich.
Es sieht aber nicht wirklich schön aus, da sich die Animationsphasen des ein- und ausblendens der einzelnen Bilder überlagern. Da musst du noch ein wenig mit den Zeit- und Prozentwerten herumspielen.
Davon abgesezhen bleibt der hier schon recht früh geäußerte Einwand, dass du Text nicht als Bilder sondern eben als Text benutzen sollst. Damit wären die Texte auch für Suchmaschinen erreichbar. Das ein- und ausblenden funktioniert schließlich auch mit Containern, die Text enthalten.
Tschö, Auge
@@Auge
Davon abgesezhen bleibt der hier schon recht früh geäußerte Einwand, dass du Text nicht als Bilder sondern eben als Text benutzen sollst. Damit wären die Texte auch für Suchmaschinen erreichbar. Das ein- und ausblenden funktioniert schließlich auch mit Containern, die Text enthalten.
Wenn es darum geht, sollte der Einwand eher lauten: Verwende Text –und zwar den vollständigen – und verzichte auf den Schnickschnack des Wechselns.
LLAP 🖖
Hej Thomas,
Dennoch komme ich leider immer noch nicht den geringsten Schritt weiter.
Doch, das was du da hast, das verstehst du und es funktioniert auch, wenn du noch eine winzige Kleinigkeit änderst (s.u.)
img:nth-of-type(2)
{
animation-delay: 2;
}
Zwei was? Kartoffeln oder Gurken? 😉
Marc
Ihr habt natürlich beide vollkommen Recht. Das "s" hatte ich leider vergessen.
Aber auch mit "s" funktioniert das ganze immer noch lange nicht. Das Ergebnis sieht zwar schon besser aus, aber immer noch sehr fehlerhaft.
http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html
Ich habe mittlerweile auch mal ein anderes, sehr ähnliches Script aus dem Internet ausprobiert bzw. umgeschrieben, aber es passiert immer im ersten Durchgang der Animation etwas anderes als in allen weiteren Durchgängen. Wenigstens funktioniert es schon fast. Der Fehler liegt nur noch im Fading des ersten Durchgangs. Aber auch hier bekomme ich es nicht richtig hin. Das Script sieht folgendermaßen aus:
#gallery {
position: relative;
}
#gallery figure {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#gallery figure {
animation: wechseln 15s infinite;
}
@keyframes wechseln {
0% {opacity: 1;}
25% {opacity: 1;}
40% {opacity: 0;}
92% {opacity: 0;}
100% {opacity: 1;}
}
#gallery figure:nth-of-type(2) {
animation-delay: 5s;
opacity: 0;
}
#gallery figure:nth-of-type(1) {
animation-delay: 10s;
opacity: 0;
}
</style>
</head>
<body>
<div id="gallery">
<figure>
<img src="FSP-Eigenschaften1.png" alt="bild1">
</figure>
<figure>
<img src="FSP-Eigenschaften2.png" alt="bild2">
</figure>
<figure>
<img src="FSP-Eigenschaften3.png" alt="bild3">
</figure>
</div>
Und das Ergebnis:
@@Thomas
@keyframes bildwechsler { 0% { opacity: 0 } 20% { opacity: 0 } 40% { opacity: 1 } 60% { opacity: 1 } 80% { opacity: 0 } 100% { opacity: 0 } }
Das tut folgendes: Am Anfang ist die Opazität 0, d.h. das Ding transparent, also nicht sichtbar. Nach 20% der Dauer der Animation immer noch. Nach 40% der Dauer der Animation ist die Opazität 1, d.h. das Ding ist nicht transparent, sondern sichtbar. Nach 60% immer noch. Nach 80% nicht mehr. Am Ende auch nicht.
Wozu nun die ganzen Werte; reichen nicht auch 0%, 40%, 60%, 100%? Nein, das wäre ein anderer Übergang. Der soll sich zwischen 20% und 40% bzw. zwischen 60% und 80% abspielen. Aufgemalt:
(Der Defaultwert der animation-timing-function-Eigenschaft ist ease, also ein allmählicher Übergang, kein Sprung.)
Dass ich das Verschwinden und Erscheinen wohl mit "opacity: 1" bzw. "opacity: 0" machen soll, ist mir auch klar, aber wie soll ich das den einzelnen Bildern zuordnen und das auch noch mit 1 oder 0 zu den verschiedenen Zeitpunkten?
Die Animation lässt du nun wiederholen. Für die anderen beiden Bilder jeweils zeitversetzt: fürs eine um ein Drittel der Periodendauer (Dauer einer Animation), fürs andere um zwei Drittel der Periodendauer. Aufgemalt:
LLAP 🖖
Danke Gunnar!
Hier das danach abgeänderte Script:
div { position: relative }
img {
animation-name: bildwechsler;
animation-duration: 6s;
animation-iteration-count: infinite;
position: absolute;
}
img:nth-of-type(2)
{
animation-delay: 2s;
}
img:nth-of-type(3)
{
animation-delay: 4s;
}
@keyframes bildwechsler
{
0% { opacity: 0 }
33.3% { opacity: 1 }
66.6% { opacity: 1 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<div>
<img src="FSP-Eigenschaften1.png">
<img src="FSP-Eigenschaften2.png">
<img src="FSP-Eigenschaften3.png">
</div>
Und hier das Ergebnis:
http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html
Übrigens für alle, die bisher die Hinweise darüber gegeben haben, dass man Texte nie als Bilder erstellen sollte und dass Animationen immer anhaltbar sein müssen:
Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".
Die Animation muss auf meiner Webseite nicht anhaltbar sein, denn erstens wird sie langsam sein und zweitens gibt es auf dieser Titelseite nicht allzu viel zu sehen und erst recht nichts zu tun, so dass man sich eher in anderen Gefilden aufhält. Man verweilt also nur kurz dort, nicht viel länger als man braucht, um sich die Animation anzuschauen.
Hallo
img:nth-of-type(2) { animation-delay: 2s; } img:nth-of-type(3) { animation-delay: 4s; } @keyframes bildwechsler { 0% { opacity: 0 } 33.3% { opacity: 1 } 66.6% { opacity: 1 } 100% { opacity: 0 } }Und hier das Ergebnis: http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html
Nix für ungut, aber das sieht schlimmer aus als vorher. Du hast verstanden, was Gunnar in seinen Bildern gezeigt hat? Die Animationen der einzelnen Bilder überlagern sich zeitlich, weshalb während der Übergänge die zwei beteiligten Bilder gleichzeitg zu sehen sind.
Mit deiner Ausdünnung der Keyframes hast du nun noch weniger Stützpunkte, weshalb die Bilder noch länger gleichzeitig zu sehen sind.
Übrigens für alle, die bisher die Hinweise darüber gegeben haben, dass man Texte nie als Bilder erstellen sollte und dass Animationen immer anhaltbar sein müssen:
- Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".
Du meinst der Lichtspot auf den Anfangsbuchstaben?
2. Die Animation muss auf meiner Webseite nicht anhaltbar sein, denn erstens wird sie langsam sein und zweitens gibt es auf dieser Titelseite nicht allzu viel zu sehen und erst recht nichts zu tun, so dass man sich eher in anderen Gefilden aufhält. Man verweilt also nur kurz dort, nicht viel länger als man braucht, um sich die Animation anzuschauen.
Eine Seite ohne nennenswerten Inhalt, die man als Besucher auf dem Weg woanders hin praktisch nur überspringt? Quasi eine Seite, so nötig wie ein Kropf?
Tschö, Auge
Offensichtlich habe ich es nicht verstanden. Und jetzt weiß ich immer noch nicht weiter.
Eine Seite ohne nennenswerten Inhalt, die man als Besucher auf dem Weg woanders hin praktisch nur überspringt? Quasi eine Seite, so nötig wie ein Kropf?
ca. 99,99% aller Websites sind so nötig wie ein Kropf. Was die Gesellschaft aus dem WWW gemacht hat, ist erschreckend. Aus der guten Idee von Berners-Lee wurde ein riesiges Übel der Menschheit. Und als Webentwickler/Webdesigner unterstützt man diesen Quatsch in der Regel auch noch. Wir schaffen super Platformen, Practices, Protokolle, Sprachen, Innovationen wofür? Damit die Werbeindustrie noch präziser und noch zuverlässiger ihren Werbemüll an den Mann bringt. Ohne uns gäbe es diese ganze Werbe- und Schrottinformationsflut überhaupt nicht. Huren der Wirtschaft, wieder mal.
Hochglanzpolierte Websites mit perfektem HTML- und CSS Code für Brainwashing und Manipulation. Strahlendes Lächeln überall. Bravo!
Deshalb habe ich mich auch vor einigen Jahren aus diesem Berufsfeld zurückgezogen und mich wieder in die Wissenschaft verkrümelt. Ich konnte es mit meinem Gewissen nicht mehr vereinbaren, ein Rädchen in der Medienindustrie zu sein. Wir hätten es bei der Ur-Idee des WWW belassen sollen, als diese Plattform der Werbeindustrie zu öffen. Für die reine Information wäre ein Terminal vollkommen ausreichend. Wofür muss ich wissen, wie die Zahnarzthelferin aussieht, wenn ich nur die beknackte Telefonnnummer der Praxis will?
Tja, und jetzt sitzen Milliarden von Menschen tagein, tagaus vor ihren hach so tollen mobilen und nicht-mobilen Devices und posten und konsumieren Müll. Das Web ist das wahrgewordene Junk-Food.
Hej Thomas,
Danke Gunnar!
Hier das danach abgeänderte Script:
@keyframes bildwechsler { 0% { opacity: 0 } 33.3% { opacity: 1 } 66.6% { opacity: 1 } 100% { opacity: 0 } }
Jetzt startet der Übergang von transparent zu sichtbar schon direkt zu Beginn der Animation.
Schau dir noch mal die Zeichnungen von Gunnar an. Daran erkennst du, dass jeweils zwischen 20 und 40% sowie zwischen 60 und 80% ein Bild eingeblendet und ein Bild ausgeblendet wird. In den Phasen sind also beide sichtbar.
Bisher dachte ich auch, genau dieser Effekt sei gewünscht. Wenn das anders sein soll, benötigst du andere Werte für den Ablauf der Animation. Sorge dafür, dass das zweite Bild erst eingeblendet wird, wenn das erste wieder vollkommen transparent ist.
Das hat mit CSS und HTML nichts zu tun, sondern nur mit Mathematik: Du willst dass die Animation für das zweite Bild erst startet, wenn das erste Bild wieder komplett transparent ist.
Wieder ein Tipp: hör auf im Internet nach weiteren Fertig-Lösungen zu suchen. Wenn du es nciht selber machen und verstehen möchtest, weil es ein einmaliger Effekt ist, den du sowieso nie wieder umsetzen möchtest, hat Deine Adobe-suite sicher eine Möglichkeit, das ohne Code-Kenntnisse zu generieren. Dann tut es auch genau das, was du möchtest (ich gehe davon aus, dass du eine Suite hast, da du hier bereits Dreamweaver und Photoshop erwähnt hast).
Wenn du den Ehrgeiz hast, das selber hinzukriegen und dann auf Dich stolz zu sein, dann bist du jetzt auf der Zielgeraden (falls ich dich diesmal richtig verstanden habe).
Das erste Mal ist immer schwer. Aber bisher hast du alles verstanden, was du getan hast. Dann wirst du den Rest auch noch hinkriegen!
- Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".
Man kann mit CSS das Aussehen von Schriften sehr stark verändern. Viele Effekte, die mit Photoshop möglich sind, sind mit CSS auch möglich (Thema für einen weiteren Thread, wenn du magst). Die Frage ist nur, ob du willst, dass viele Leute nicht mehr verstehen, was da auf deiner Homepage geschrieben steht.
Wenn es nur auf den Effekt ankommt und nicht darauf, dass jemand liest, was da steht, kannst du da doch auch Erdbeeren animieren.
Wenn du möchtest, dass auch Legastheniker oder Menschen mit einer Lese-Rechtschreibschwäche oder Menschen mit einer Neigung zu Migräne (unvollständige Liste) Deine Webseite benutzen, solltest du deren Bedürfnisse berücksichtigen.
Es ist keine Schande, nicht zu wissen, dass es Menschen gibt, für die animierte Schriften eine Hürde sind. Aber es ist kein feiner Zug auf die Probleme anderer Menschen zu pfeifen und umzusetzen, was einem persönlich gefällt und dadurch Menschen auszuschließen, die an ihrem Handicap keine Schuld haben.
- Die Animation muss auf meiner Webseite nicht anhaltbar sein, denn erstens wird sie langsam sein und zweitens gibt es auf dieser Titelseite nicht allzu viel zu sehen
Dann verschenkst du viel Potential bei der Suchmaschinenoptimierung - und auch in jeder anderen Hinsicht. Intros hat man seit den 90ern nicht mehr. Aus gutem Grund. Das hat die Besucher davon abgehalten, zurück zu kommen. Nichts nervt mehr, als unnütz einen Haufen nichtssagender Daten laden zu müssen und dabei Zeit zu verlieren. Wenn ich eine Webseite besuche, möchte ich gleich sehen, was es neues gibt!
und erst recht nichts zu tun, so dass man sich eher in anderen Gefilden aufhält. Man verweilt also nur kurz dort, nicht viel länger als man braucht, um sich die Animation anzuschauen.
Warum sollte ich mir die auch nur ein einziges Mal anschauen? Geschweige denn bei jedem Seitenbesuch erneut?
Das langweilt doch spätestens beim dritten Mal. Oder lässt du dir gerne einen Witz drei mal erzählen? 😉
So oder so: du machst es deinen Besuchern unnötig schwer - unnötig lange Ladezeiten und schlecht lesbare Schrift, deren Gestaltung auch noch das Verständnis erschwert sind keine guten Voraussetzungen, um Nutzer zu halten.
Wenn du deine Seite aufpeppen möchtest, mach das abschaltbar und nicht so, dass dabei wichtige Inhalte unzugänglich werden. Wenn die Inhalte unnütz sind, nimm lieber hübsche Bilder. Wenn die Inhalte wichtig sind, mach sie zugänglich!
Übrigens geht anhalten ganz einfach. In der Regel halten Slider, Bildwechsler usw. an, wenn sie angetabbt oder mit der Maus überfahren werden (focusund hover). Ist das der Fall, genügt ein animation-state: pause — wenig Aufwand großer Nutzen! Für Handys solltest du eventuell eine ganz andere Darstellung wählen, denn dann ist die Schrift nicht nur verschnörkelt und animiert, sondern auch noch kleiner.
Und vergiss nicht die Leute, die Bilder gar nicht erst laden, weil es Ihnen zu lange dauert oder zu teuer ist. Nicht überall steht DSL-Geschwindigkeit als Flatrate zur Verfügung!
Marc
Hallo Marc!
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. 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.
Ich verstehe mittlerweile übrigens überhaupt nichts mehr (und mein Kollege (Informatiker/Mathematiker), den ich auch immer zu Rate ziehe, auch nicht), denn einmal denke ich, das Erscheinen der Bilder hat was mit dem Delay zu tun, aber dann soll ich wieder was mit den Keyframes machen. Nach meinem ursprünglichen Verständnis hat das mit den Keyframes nur was mit dem Fading eines Bildes von 0 bis 1 bis wieder 0 zu tun und nicht mit dem unterschiedlichen Erscheinen der drei Bilder nacheinander.
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. In allen weiteren Durchgängen der Animation stimmt dann alles. (In diesem Script verstehe ich die verschiedenen Keyframezahlen übrigens wieder überhaupt nicht, aber trotzdem machen sie genau das gleiche wie im anderen Script.)
Hier noch mal das Script:
#gallery {
position: relative;
}
#gallery figure {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#gallery figure {
animation: wechseln 15s infinite;
}
@keyframes wechseln {
0% {opacity: 1;}
25% {opacity: 1;}
40% {opacity: 0;}
92% {opacity: 0;}
100% {opacity: 1;}
}
#gallery figure:nth-of-type(2) {
animation-delay: 5s;
opacity: 0;
}
#gallery figure:nth-of-type(1) {
animation-delay: 10s;
opacity: 0;
}
</style>
</head>
<body>
<div id="gallery">
<figure>
<img src="FSP-Eigenschaften1.png" alt="bild1">
</figure>
<figure>
<img src="FSP-Eigenschaften2.png" alt="bild2">
</figure>
<figure>
<img src="FSP-Eigenschaften3.png" alt="bild3">
</figure>
</div>
Und hier das Ergebnis:
Hallo,
der Keyframe ist falsch. Nimm den von Gunnar mit 6 Einträgen. Im Beitrag mit den Bildern hat Gunnar auch erklährt, warum es so viele sind. Hast du versucht, diesen Beitrag zu verstehen? Hast du versucht zu verstehen, wie Animationen mit Keyframes funktionieren?
Gruß
Jürgen
DANKE! Jetzt funktioniert es endlich! Aber nur in Zusammenhang mit meinem zweiten Script (mit den "Gallery"-Eigenschaften, auf das sich Gunnar ja damals nicht bezogen hatte. Im ersten, hier meistbesprochenen Script wäre es wieder falsch.
Und ja, wir hatten hier versucht, Gunnars Posting zu verstehen, was uns aber nicht gelungen war. Vielen Dank, Jürgen! :D
Hallo,
ich habe testweise Gunnars Keyframe in das Wiki-Beispiel eingebaut und die opacity der Bilder noch auf 0 gesetzt, damit am Anfang nicht alle durchscheinen, und das hat so funktioniert.
Gruß
Jürgen
Hej Thomas,
DANKE! Jetzt funktioniert es endlich!
Glückwunsch! Ich hoffe, das fühlt sich gut an!
Viel Freude mit dem Bildwechsler.
Marc
PS: Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach 😉
Es lohnt sich für beide Seiten: Anbieter und Nutzer von Webseiten!
Hallo marctrix,
PS: Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach 😉
und über ein paar andere Dinge. Hatte eigentlich gehofft die Beteiligten hier am Thread würden das Folgende erwähnen, aber entweder nicht geschehen oder ich habe es übersehen:
Thomas, du verwendest uralte Auszeichnungen und Kodierungen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Wie es besser geht zeigt dir selfhtml.
https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundgerüst
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel</title>
</head>
<body>
</body>
</html>
Dazu kommt die Hauptseite der Firma. Frames sollte man nicht mehr nutzen, mit Ausnahme von viell. Inline-Frames. Auch das Aussehen erinnert mich ein wenig an 1999, damals habe ich fast genau die gleichen Seiten erstellt mit, wie hieß er doch gleich, ahhh glaube das war Netobjekts Fusion. (Den nutzt du doch hoffentlich nicht?)
Solche Bilderspielereien sind sicher ganz lehrsam, aber gerade wenn ich höre wie lange du dich damit schon abmühst, solltest du vielleicht doch zunächst mal die Basics anschauen.
Gruss
Henry
Hej Henry,
Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach 😉
und über ein paar andere Dinge. Hatte eigentlich gehofft die Beteiligten hier am Thread würden das Folgende erwähnen, aber entweder nicht geschehen oder ich habe es übersehen:
Thomas, du verwendest uralte Auszeichnungen und Kodierungen
Du hast vollkommen recht, Thomas.
Implizit enthält meine Forderung das zwar, weil Barrierefreiheit auch den Gebrauch von aktuellem HTML vorschreibt, aber ich habe darauf verzichtet, etwas über die aktuelle Seite der Firma zu sagen, weil es eigentlich nur eines zu sagen gibt: neu machen.
Aber das wird nicht passieren, nur weil irgend ein Typ aus einem Forum dazu rät, der sich marctrix und nennt glaubt er sei viele. 😉
Ich habe daher abstimmen lassen und die Mehrzahl von mir hat gesagt: ist nur Zeitverschwendung das zu erwähnen. Ein paar haben sogar gedacht, das gibt Ärger. 😉
Marc
Hallo marctrix,
Ich habe daher abstimmen lassen und die Mehrzahl von mir hat gesagt: ist nur Zeitverschwendung das zu erwähnen. Ein paar haben sogar gedacht, das gibt Ärger. 😉
Deshalb hatte ich ja gehofft einer von euch sagt es 😉 Wollte mich auch zuerst zurück halten, aber da das ja schon im Quelltext seiner Beispielseiten so ist... dachte ich wenn schon, denn schon 😉
Gruss
Henry
@@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.
Hast du mit deinem Chef darüber gesprochen? Ihr solltet die Aufgabe an einen Freelancer auslagern, dem ihr zwei Arbeitstunden (meinetwegen auch einen halben Arbeitstag) bezahlt. Das kommt die Firma auf jeden Fall billiger als dich von den Aufgaben abzuziehen, bei denen du gut bist und die dir Freude machen.
einmal denke ich, das Erscheinen der Bilder hat was mit dem Delay zu tun, aber dann soll ich wieder was mit den Keyframes machen. Nach meinem ursprünglichen Verständnis hat das mit den Keyframes nur was mit dem Fading eines Bildes von 0 bis 1 bis wieder 0 zu tun und nicht mit dem unterschiedlichen Erscheinen der drei Bilder nacheinander.
Das ist die eine Variante – die einfachere und die, die ich dir auch gezeigt hatte. Das Erscheinen und Verschwinden läuft für alle Bilder gleich ab; deshalb gibt es nur eine @keyframes-Regel für alle Bilder. Das Nacheinander wird durch zeitlichen Versatz (animation-delay) geregelt.
Die andere Möglichkeit wäre, für jedes Bild eine eigene @keyframes-Regel zu erstellen, wo der zeitliche Versatz schon drin ist. Aufwändiger, wartungsintensiver – nicht machen.
LLAP 🖖
Jeder weiß hier, was ich mache, auch mein Chef. Aber einen Webdesigner können wir uns nicht leisten. Glücklicherweise ist bei uns gerade nicht viel los, weswegen es nicht schlimm ist, dass ich mich damit beschäftige.
Das ist die eine Variante …
Gut und schön, aber dieser Absatz hätte mich jetzt auch wiederum nicht weitergebracht, denn auch das ständige Rumspielen mit den Delaywerten hatte ja auch nichts gebracht.
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
Hej alle,
Du solltest wirklich bei einem Beispiel bleiben. Sonst werden wir niemals fertig…
Dass jetzt ein Mix aus beidem zum Erfolg führt, war ein überraschendes Ende. 😉
Da hat der Zufall ein wenig mitgeholfen, weil Gunnar auch drei Bilder animiert hat. Wenn im Augenblick noch etwas Zeit ist: versuche zu verstehen, warum das funktioniert. Vielleicht musst du noch mal etwas anpassen, z.B. ein viertes Bild hinzufügen…
Marc
Für eine weitere Antwort auf Eure Postings habe ich gerade keine Zeit (doch wieder einige Arbeit da), kommt aber noch.
Hej Thomas,
Für eine weitere Antwort auf Eure Postings habe ich gerade keine Zeit (doch wieder einige Arbeit da), kommt aber noch.
Kein Problem. Von meiner Seite her ist das auch nicht nötig. Ich freue mich, dass es bei dir wie gewünscht funktioniert. Das war ja der Sinn der ganzen Aktion.
Marc
Also gut, Marc, dann belasse ich es dabei, denn ich glaube, weitere Worte bzw. Fragen von mir würden hier nur wieder für neuen Aufruhr sorgen, und dieser Thread ist sowieso schon lange genug. Danke an alle. :)
Hej Thomas,
Fragen von mir würden hier nur wieder für neuen Aufruhr sorgen.
Das Leben ist Aufruhr 😉
Im Ernst: wenn es noch irgendwo halt, frage gerne wieder.
Danke an alle. 😀
Gern geschehen. Schön dass es klappt!
Marc
@@marctrix
Wozu brauchst du mix-blend-mode?
Damit das Überblenden vernünftig aussieht.
Ansonsten würde ein Bild (in z-Richtung) vor einem anderen liegen. Das Überblenden sähe dann anders aus als wenn beide Bilder gleichberechtigt sind.
LLAP 🖖
Hej Thomas,
Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?
Also wenn ich mit dem ursprünglichen Wiki-Script "Bildwechsler" transparente GIFs benutze, dann scheinen die alle durch, weil sie übereinanderliegen. Es tut mir schrecklich leid, aber ich bin leider zu sehr Anfänger, um Eure weiteren Scripts, Marc und Gunnar, so weit zu verstehen, dass ich sie für mich adaptieren könnte. Ich möchte einfach nur PNGs wechseln, ohne dass sie durchscheinen, ohne Bewegungen, Opazitäten oder sonstige Spielereien.
Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden - also sogar die Teile, die sonst sichtbar sind, so dass von den Bildern nichts mehr übrig bleibt.
Die Bilder werden nciht gewechselt, sondern das aktuell anzuzeigende Bild wird von vollkommen durchsichtig (nicht sichtbar) auf vollkommen decken (also sichtbar) gesetzt.
Dass das PNG dann u.U. noch (teil-)transparente Bereiche enthält tut nichts zur Sache.. 😉
Marc
@@marctrix
Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden
Nicht wirklich.
„Der Wirt sorgt dafür, dass die Biergläser komplett leer werden.“
Wirklich nicht.
LLAP 🖖
Hej Gunnar,
@@marctrix
Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden
Nicht wirklich.
Wofür dann?
Marc
Hallo marctrix,
Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden
Nicht wirklich.
Wofür dann?
Opazität ist das Gegenteil von Durchsichtigkeit. 😉 Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. 😉
Bis demnächst
Matthias
Hej Matthias,
Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden
Nicht wirklich.
Wofür dann?
Opazität ist das Gegenteil von Durchsichtigkeit. 😉 Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. 😉
Oh, das habe ich nicht kommen sehen. Ich wusste schon, dass da so eine Spitzfindigkeit hinter steckt, aber irgendwie habe ich den nicht gerafft.
Klar: Eine Opazität (Deckkraft) von 0 sorgt für die vollkommene Transparenz (Unsichtbarkeit), eine Opazität von 1 für völlige Deckung (Sichtbarkeit)…
Marc
@@marctrix
Opazität ist das Gegenteil von Durchsichtigkeit. 😉 Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. 😉
Oh, das habe ich nicht kommen sehen. Ich wusste schon, dass da so eine Spitzfindigkeit hinter steckt, aber irgendwie habe ich den nicht gerafft.
Dabei hatte ich extra den Wirt ins Spiel gebracht, der natürlich nicht für leere (durchsichtige) Gläser sorgt, sondern für volle. Prost! 🍻
Klar: Eine Opazität (Deckkraft) von 0 sorgt für die vollkommene Transparenz (Unsichtbarkeit), eine Opazität von 1 für völlige Deckung (Sichtbarkeit)…
Das hast du jetzt schön für alle transparent gemacht.
LLAP 🖖
Hej Gunnar,
@@marctrix
Dabei hatte ich extra den Wirt ins Spiel gebracht, der natürlich nicht für leere (durchsichtige) Gläser sorgt, sondern für volle. Prost! 🍻
Ja, aber den Wink hatte ich auch erst danach verstanden. Hatte anscheinend nen ganzen Tresen vor'm Kopp!
Marc