tag:forum.selfhtml.org,2005:/self Frage zum Wiki-Artikel „Bildwechsler“ – SELFHTML-Forum 2018-03-21T18:55:20Z https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714373#m1714373 Thomas 2018-02-23T11:27:10Z 2018-02-23T11:27:10Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo lieber Bildwechselprofi! :)</p> <p>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.</p> <p>Liebe Grüße Thomas</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714374#m1714374 marctrix self@mhis.de http://mhis.de 2018-02-23T11:47:58Z 2018-02-23T11:47:58Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Nichtsdestotrotz kommen auch blinde an alle Inhalte ran.</p> <p>Falls du Interesse hast:</p> <p>Mir ging es vor allem um die prinzipielle Machbarkeit. Man kann die Richtung ändern, die Art des Einblendfensters und so weiter.</p> <p><a href="https://codepen.io/haunschild/pen/NRWqRL?q=Accessible+slider&limit=all&type=type-pens" rel="noopener noreferrer">Slider von Marc auf codepen</a></p> <p>Funktioniert nicht mit beliebig vielen slides. Dafür wäre dann doch noch ein bisschen JS nötig.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714474#m1714474 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-24T22:06:47Z 2018-02-24T22:06:47Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Thomas</p> <blockquote> <p>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.</p> </blockquote> <p>Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JpaLqg" rel="noopener noreferrer">der springende Punkt</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714376#m1714376 Thomas 2018-02-23T12:04:12Z 2018-02-23T12:04:12Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Marc!</p> <p>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.)</p> <p>Wenn Du dazu auch ein Script hättest, wäre das toll. :D</p> <p>Liebe Grüße Thomas</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714377#m1714377 marctrix self@mhis.de http://mhis.de 2018-02-23T12:09:18Z 2018-02-23T12:09:18Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>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.)</p> </blockquote> <p>Ist ja egal ob man eine Animation benutzt oder <code>display: block | none;</code></p> <p>Aber fertig habe ich das nicht.</p> <p>Übrigens: alle bewegten Inhalte <strong>müssen</strong> angehalten werden können. Sonst ist deine Seite nicht vernünftig nutzbar. Bewegte Inhalte lenken zu sehr ab!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714444#m1714444 Thomas 2018-02-24T11:15:42Z 2018-02-24T11:15:42Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Vielen Dank, Marc. ☺️☺️☺️ Ich hoffe, ich kann das nach Deinem Script für mich umsetzen. Komme erst nächste Woche dazu.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714477#m1714477 marctrix self@mhis.de http://mhis.de 2018-02-25T07:52:53Z 2018-02-25T07:52:53Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Gunnar,</p> <blockquote> <p>@@Thomas</p> <blockquote> <p>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.</p> </blockquote> <p>Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JpaLqg" rel="noopener noreferrer">der springende Punkt</a></p> </blockquote> <p>Na gut, hier wird nur eine Farbe geändert - von transparent auf teiltransparent nehme ich mal an, habe jetzt nicht ins svg geschaut.</p> <p>Aber man kann natürlich auch normale Bilder mit <code>opacity</code> komplett verschwinden lassen. Der Effekt beim überblenden ist sicher hübsch!</p> <p>Guter Hinweis, habe ich überhaupt nicht dran gedacht…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714478#m1714478 marctrix self@mhis.de http://mhis.de 2018-02-25T07:55:55Z 2018-02-25T07:55:55Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej marctrix,</p> <blockquote> <p>Na gut, hier wird nur eine Farbe geändert - von transparent auf teiltransparent nehme ich mal an, habe jetzt nicht ins svg geschaut.</p> </blockquote> <p>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!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714482#m1714482 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-25T09:07:35Z 2018-02-25T09:10:50Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@marctrix</p> <blockquote> <blockquote> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JpaLqg" rel="noopener noreferrer">der springende Punkt</a></p> </blockquote> <p>Na gut, hier wird nur eine Farbe geändert</p> </blockquote> <p>?? 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 …</p> <blockquote> <p>Aber man kann natürlich auch normale Bilder mit <code>opacity</code> komplett verschwinden lassen.</p> </blockquote> <p>… eben. Es hätten genausogut mehrfarbige SVGs oder PNGs oder GIFs oder JPEGs (dann freilich nicht mit Transparenz) sein können.</p> <blockquote> <p>Der Effekt beim überblenden ist sicher hübsch!</p> </blockquote> <p>Veni, vidi, <a href="https://codepen.io/gunnarbittersmann/pen/XKKdxX" lang="it" rel="noopener noreferrer">da Vinci</a>. </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714548#m1714548 Thomas 2018-02-26T09:22:28Z 2018-02-26T09:22:28Z Frage zum Wiki-Artikel „Bildwechsler“ <blockquote> <blockquote> <p>Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?</p> </blockquote> </blockquote> <p>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.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714558#m1714558 JürgenB https://www.j-berkemeier.de 2018-02-26T11:09:34Z 2018-02-26T11:09:34Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo,</p> <blockquote> <p>Also wenn ich mit dem ursprünglichen Wiki-Script "Bildwechsler" transparente GIFs benutze, dann scheinen die alle durch, weil sie übereinanderliegen.</p> </blockquote> <p>alles andere würde mich auch verwundern. Hast du mal einen Link zu deiner Testseite?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714562#m1714562 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-26T11:41:05Z 2018-02-26T11:41:05Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Thomas</p> <blockquote> <blockquote> <blockquote> <p>Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?</p> </blockquote> </blockquote> <p>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.</p> </blockquote> <p>Du musst schon genauer werden, was du nicht verstehst. Dann können wir dir weiterhelfen.</p> <p>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.</p> <ul> <li>keine Zeit</li> <li>kein Geld</li> <li>ich will aber …</li> </ul> <p>Wähle 2, nicht 3.</p> <blockquote> <p>Ich möchte einfach nur PNGs wechseln, ohne dass sie durchscheinen, ohne Bewegungen, Opazitäten oder sonstige Spielereien.</p> </blockquote> <p>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.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714600#m1714600 marctrix self@mhis.de http://mhis.de 2018-02-26T16:46:14Z 2018-02-26T16:46:14Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <blockquote> <blockquote> <p>Nein, wieso sollte man? Wieso sollten die nicht übereinanderliegen dürfen?</p> </blockquote> </blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Die Bilder werden nciht gewechselt, sondern das aktuell anzuzeigende Bild wird von vollkommen durchsichtig (nicht sichtbar) auf vollkommen decken (also sichtbar) gesetzt.</p> <p>Dass das PNG dann u.U. noch (teil-)transparente Bereiche enthält tut nichts zur Sache.. </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714561#m1714561 Thomas 2018-02-26T11:32:49Z 2018-02-26T11:32:49Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Jürgen! :)</p> <p>Hier die Url: <a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel5.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel5.html</a> 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.</p> <p>Vielen Dank im Voraus Thomas</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714673#m1714673 Thomas 2018-02-27T07:47:51Z 2018-02-27T07:47:51Z Frage zum Wiki-Artikel „Bildwechsler“ <p>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?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">#template</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> <span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative <span class="token punctuation">}</span> <span class="token selector">svg</span> <span class="token punctuation">{</span> <span class="token property">--animation-duration</span><span class="token punctuation">:</span> 5s<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">-webkit-mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> <span class="token property">mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span> springenderPunkt infinite<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#right</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span>*2/3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> springenderPunkt</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>template<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714602#m1714602 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-26T16:49:04Z 2018-02-26T16:49:04Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@marctrix</p> <blockquote> <p>Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden</p> </blockquote> <p>Nicht wirklich.</p> <p><em>„Der Wirt sorgt dafür, dass die Biergläser komplett leer werden.“</em></p> <p>Wirklich nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714611#m1714611 marctrix self@mhis.de http://mhis.de 2018-02-26T18:18:42Z 2018-02-26T18:18:42Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden</p> </blockquote> <p>Nicht wirklich.</p> </blockquote> <p>Wofür dann?</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714612#m1714612 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-02-26T18:22:06Z 2018-02-26T18:22:06Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo marctrix,</p> <blockquote> <blockquote> <blockquote> <p>Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden</p> </blockquote> <p>Nicht wirklich.</p> </blockquote> <p>Wofür dann?</p> </blockquote> <p>Opazität ist das Gegenteil von Durchsichtigkeit. Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. </p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714614#m1714614 marctrix self@mhis.de http://mhis.de 2018-02-26T18:35:51Z 2018-02-26T18:35:51Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Matthias,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Die Opazität sorgt dafür, dass die Bilder komplett durchsichtig werden</p> </blockquote> <p>Nicht wirklich.</p> </blockquote> <p>Wofür dann?</p> </blockquote> <p>Opazität ist das Gegenteil von Durchsichtigkeit. Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. </p> </blockquote> <p>Oh, das habe ich nicht kommen sehen. Ich wusste schon, dass da so eine Spitzfindigkeit hinter steckt, aber irgendwie habe ich den nicht gerafft.</p> <p>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)…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714623#m1714623 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-26T19:39:11Z 2018-02-26T19:39:11Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@marctrix</p> <blockquote> <blockquote> <p>Opazität ist das Gegenteil von Durchsichtigkeit. Deshalb sorgt sie dafür, dass die Bilder sichtbar werden. </p> </blockquote> <p>Oh, das habe ich nicht kommen sehen. Ich wusste schon, dass da so eine Spitzfindigkeit hinter steckt, aber irgendwie habe ich den nicht gerafft.</p> </blockquote> <p>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!  </p> <blockquote> <p>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)…</p> </blockquote> <p>Das hast du jetzt schön für alle transparent gemacht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714658#m1714658 marctrix self@mhis.de http://mhis.de 2018-02-27T05:45:07Z 2018-02-27T05:45:07Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> </blockquote> <blockquote> <p>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!  </p> </blockquote> <p>Ja, aber den Wink hatte ich auch erst danach verstanden. Hatte anscheinend nen ganzen Tresen vor'm Kopp!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714678#m1714678 marctrix self@mhis.de http://mhis.de 2018-02-27T08:07:01Z 2018-02-27T08:07:01Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>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?</p> </blockquote> <p>Als erstes: du machst es zu kompliziert. Lass die SVG-Elemente weg, wenn du keine SVGs benutzt.</p> <p>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… — <a href="https://codepen.io/haunschild/pen/VQVMVy" rel="noopener noreferrer">sieht doch schon ganz gut aus</a>! - Jetzt kannst du an den Feinheiten schrauben!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714681#m1714681 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-27T08:18:48Z 2018-02-27T08:18:48Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Thomas</p> <blockquote> <p>Ich habe jetzt versucht, das Script mit den SVGs auf meinen Fall (erst mal mit zwei Bildern) umzuschreiben.</p> </blockquote> <p>Dann solltest du <em>anstelle</em> der <code>svg</code>-Elemente deine <code>img</code> in dem <code>div</code> haben. (Das Element <code><svg id="template"></code> entfällt ganz.</p> <p>Und im Stylesheet die Selektoren von <code>svg</code> auf <code>img</code> ändern. Dann sollte es in etwa so aussehen wie das bereits verlinkte Bespiel mit da Vinci.</p> <blockquote> <p>Was mache ich falsch?</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Du hast das zwingend notwendige <a href="https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/alt" rel="nofollow noopener noreferrer"><code>alt</code>-Attribut</a> vergessen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714683#m1714683 Thomas 2018-02-27T09:26:44Z 2018-02-27T09:26:44Z Frage zum Wiki-Artikel „Bildwechsler“ <p>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. <em>heul</em></p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714691#m1714691 marctrix self@mhis.de http://mhis.de 2018-02-27T10:17:06Z 2018-02-27T10:17:06Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>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. <em>heul</em></p> </blockquote> <p>Nicht doch! </p> <p>Der „Trick“ ist, dass alle Bilder vollständig durchsichtig sein müssen, abgesehen von dem einen, was gerade angezeigt wird.</p> <p>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 </p> <p>Da ich jetzt Dein Beispiel zum ersten Mal sehe: Texte sollten nicht als Bilder realisiert werden. Schon gar nicht animiert.</p> <p>Wichtig auch: die Animation muss angehalten werden können.</p> <p>Geht auch alles. Wie das geht, kannst du in meinem Beispiel nachschauen.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714710#m1714710 Thomas 2018-02-27T11:39:14Z 2018-02-27T11:39:14Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Marc!</p> <blockquote> <blockquote> <p>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,</p> </blockquote> </blockquote> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative <span class="token punctuation">}</span> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token property">--animation-duration</span><span class="token punctuation">:</span> 5s<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">-webkit-mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> <span class="token property">mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span> springenderPunkt infinite<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">img:nth-of-type(2n)</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span>*2/3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> springenderPunkt</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften3.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und hier das Ergebnis: <a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel4c.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel4c.html</a></p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714724#m1714724 marctrix self@mhis.de http://mhis.de 2018-02-27T16:49:02Z 2018-02-27T16:50:07Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <blockquote> <blockquote> <p>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,</p> </blockquote> </blockquote> </blockquote> <blockquote> <p>Es tut mir leid, aber ich verstehe halt leider nicht, wie Dein Script funktioniert.</p> </blockquote> <p>Das ist im Detail auch gar nicht nötig. Du hast ja jetzt schon mal geschafft, dass eine Animation läuft.</p> <p>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.</p> <p>Der absolute Clou. <a href="https://codepen.io/haunschild/pen/VQVMVy" rel="noopener noreferrer">Du kannst ein Beispiel wie von mir</a> auch Clonen und Deine eigenen Experimente darauf aufbauen.</p> <p>Das ganze ist auch noch kostenlos (wenn du nicht die Pro-Variante benötigst. Ich brauche die bisher nicht).</p> <blockquote> <p>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?</p> </blockquote> <p>Wenn du so ein Stichwort hat, nutze doch einfach mal "<a href="http://www.lmgtfy.com/?q=CSS+animation+Delay" rel="nofollow noopener noreferrer">CSS animation Delay</a>" als Suchbegriff </p> <blockquote> <p>Ich habe versucht, mit den verschiedenen Zahlen rumzuspielen, aber ohne Erfolg. Auch mit der Hilfe eines Informatikstudenten wurde ich nicht schlauer.</p> </blockquote> <p>Tja, im Informatik-Studium ist Frontend wohl kein Thema…</p> <p>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).</p> <blockquote> <p>Hier noch mal das Script, wie es bei mir jetzt aussieht:</p> </blockquote> <p>Dazu erst mal ein paar Denkanstöße (s.u.). Ich bin mir fast sicher, dass du alleine drauf kommst:</p> <pre><code class="block language-css"> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token property">--animation-duration</span><span class="token punctuation">:</span> 5s<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">-webkit-mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> <span class="token property">mix-blend-mode</span><span class="token punctuation">:</span> multiply<span class="token punctuation">;</span> </code></pre> <p>Wozu brauchst du <a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz/mix-blend-mode" rel="nofollow noopener noreferrer">mix-blend-mode</a>? - 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 <a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz/mix-blend-mode" rel="nofollow noopener noreferrer">mix-blend-mode</a> da noch regeln?</p> <p>Falls du nicht genau weißt, was das tut, benutz das nicht. </p> <p>Lies dir erst durch, was sich hinter dem Link verbirgt.</p> <p>Weiter im (Quell-)text:</p> <pre><code class="block language-css"><span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span> springenderPunkt infinite<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">img:nth-of-type(2n)</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--animation-duration<span class="token punctuation">)</span>*2/3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Funktioniert das? Ich weiß jetzt nicht aus dem Kopf, ob bei <code>*</code> und <code>/</code> ein Leerzeichen sein muss — bei einem minus brauchst du das auf jeden Fall. Also so:</p> <p><code>animation-delay: calc(var(--animation-duration) * 2 / 3);</code></p> <p>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.</p> <p>Du hast jetzt implizit das Verhalten für <code>img:nth-of-type(1n)</code> (jedes Element) festgelegt (kein delay) und für jedes zweite Element: <code>img:nth-of-type(2n)</code> — kann sein, dass du da meinen Fehler übernommen hast? Gemeint war genau das zweite Element. Das schreibt sich dann so: <code>img:nth-of-type(2)</code> (ohne <em>n</em>).</p> <p>Sorry, wenn ich das falsch vorgegeben habe.</p> <pre><code class="block language-css"> <span class="token atrule"><span class="token rule">@keyframes</span> springenderPunkt</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Drei Drittel — passt gut für drei Bilder. Leg jetzt noch das <code>delay</code> für das dritte Bild fest mit <code>img:nth-of-type(3)</code> und wie gesagt benutz am besten so was wie Codepen für Deine Experimente. Du bist nah dran!</p> <p>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:</p> <p>1.) Benutz nicht die Kurzschreibweise, dann weißt du auch genau wofür welcher Wert steht. Statt <code>animation</code> 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 <code>springenderPunkt</code>, denn den hast du ja nciht, sondern z.B. ´bildwechsler`</p> <p>Dann solltest du etwas in dieser Art bekommen:</p> <pre><code class="block language-css"><span class="token property">animation-name</span><span class="token punctuation">:</span> bildwechsler<span class="token punctuation">;</span> <span class="token property">animation-duration</span><span class="token punctuation">:</span> 6s<span class="token punctuation">;</span> <span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> infinite<span class="token punctuation">;</span> </code></pre> <p>Für <code>animation-delay</code> brauchst du dann 1/3 von 6s und 2/3 von 6s. Kannst ja einen Taschenrechner nehmen </p> <p>SCNR…</p> <p>Wenn es dann erst mal läuft, kannst du den Code ja immer noch kürzen und optimieren.</p> <p>Marc</p> <p>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…</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714756#m1714756 Thomas 2018-02-28T09:32:13Z 2018-02-28T09:32:13Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Marc!</p> <p>Zunächst mal vielen Dank, dass Du Dir so viel Mühe mit mir gibst.</p> <p>Dennoch komme ich leider immer noch nicht den geringsten Schritt weiter.</p> <p>(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.)</p> <p>Hier zunächst mal wieder mein neuestes Script:</p> <pre><code class="block language-html">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 } } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften3.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und hier wieder das (immer gleiche) Ergebnis:</p> <p><a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html</a></p> <p>Ich sage Dir jetzt, was ich verstehe und was ich nicht verstehe.</p> <p>Ich verstehe, dass ich mit "animation-name" meine Animation jetzt "bildwechsler" genannt habe.</p> <p>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.)</p> <p>Ich verstehe, dass ich mit "animation-iteration-count" meine Animation sich unendlich oft wiederholen lasse.</p> <p>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.</p> <p>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).</p> <p>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.</p> <p>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?</p> <p>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.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714843#m1714843 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-03-01T09:54:09Z 2018-03-01T09:54:09Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@marctrix</p> <blockquote> <p>Wozu brauchst du <a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz/mix-blend-mode" rel="nofollow noopener noreferrer">mix-blend-mode</a>?</p> </blockquote> <p>Damit das Überblenden vernünftig aussieht.</p> <p>Ansonsten würde ein Bild (in <em>z</em>-Richtung) vor einem anderen liegen. Das Überblenden sähe dann anders aus als wenn beide Bilder gleichberechtigt sind.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714757#m1714757 Auge 2018-02-28T09:46:31Z 2018-02-28T09:48:31Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo</p> <p>Wenn du eine Verzögerung per <code>animation-delay</code> einbaust, dann solltest du auch gültige Werte verwenden. Ein Blick in den Inspektor der Entwicklertools meines Browsers gibt mir bei <code>animation-delay: 2;</code> (bzw. <code>4</code>) die Fehlermeldung „Ungültiger Wert für Eigenschaft“. Ein Blick <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation/animation#animation-delay" rel="nofollow noopener noreferrer">ins Wiki</a> zeigt mir, dass der Wert eine Einheit für die Zeit haben soll. Und siehe da, mit den Werten <code>2s</code> und <code>4s</code> funktioniert das auf einmal <em>grundsätzlich</em>.</p> <p>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.</p> <p>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.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714758#m1714758 marctrix self@mhis.de http://mhis.de 2018-02-28T10:24:39Z 2018-02-28T10:24:39Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>Dennoch komme ich leider immer noch nicht den geringsten Schritt weiter.</p> </blockquote> <p>Doch, das was du da hast, das verstehst du und es funktioniert auch, wenn du noch eine winzige Kleinigkeit änderst (s.u.)</p> <pre><code class="block language-css"> <span class="token selector">img:nth-of-type(2)</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Zwei was? Kartoffeln oder Gurken? </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714768#m1714768 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-28T12:11:11Z 2018-02-28T12:11:11Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Thomas</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@keyframes</span> bildwechsler</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>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.</p> <p>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:</p> <p><a href="/images/fc368bb6-a52d-49c6-9367-cd9812a1d5ae.jpg" rel="noopener noreferrer"><img src="/images/fc368bb6-a52d-49c6-9367-cd9812a1d5ae.jpg?size=medium" alt="" loading="lazy"></a></p> <p>(Der Defaultwert der <code>animation-timing-function</code>-Eigenschaft ist <code>ease</code>, also ein allmählicher Übergang, kein Sprung.)</p> <blockquote> <p>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?</p> </blockquote> <p>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:</p> <p><a href="/images/31762631-6344-4db0-b946-b8e19f0fe4b9.jpg" rel="noopener noreferrer"><img src="/images/31762631-6344-4db0-b946-b8e19f0fe4b9.jpg?size=medium" alt="" loading="lazy"></a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714770#m1714770 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-28T12:32:49Z 2018-02-28T12:32:49Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Auge</p> <blockquote> <p>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.</p> </blockquote> <p>Wenn es darum geht, sollte der Einwand eher lauten: Verwende Text –und zwar den vollständigen – und verzichte auf den Schnickschnack des Wechselns.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714765#m1714765 Thomas 2018-02-28T11:29:51Z 2018-02-28T11:29:51Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Ihr habt natürlich beide vollkommen Recht. Das "s" hatte ich leider vergessen.</p> <p>Aber auch mit "s" funktioniert das ganze immer noch lange nicht. Das Ergebnis sieht zwar schon besser aus, aber immer noch sehr fehlerhaft.</p> <p><a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html</a></p> <p>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:</p> <pre><code class="block language-html">#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; } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gallery<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften3.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und das Ergebnis:</p> <p><a href="http://www.fotosatzpfeifer.de/html/test3_bildwechsel4d.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test3_bildwechsel4d.html</a></p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714769#m1714769 Thomas 2018-02-28T12:31:56Z 2018-02-28T12:31:56Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Danke Gunnar!</p> <p>Hier das danach abgeänderte Script:</p> <pre><code class="block language-html">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 } } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften3.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und hier das Ergebnis:</p> <p><a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html</a></p> <p>Ü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:</p> <ol> <li> <p>Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".</p> </li> <li> <p>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.</p> </li> </ol> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714771#m1714771 Auge 2018-02-28T12:44:02Z 2018-02-28T12:44:02Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo</p> <blockquote> <pre><code class="block language-css"><span class="token selector">img:nth-of-type(2)</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">img:nth-of-type(3)</span> <span class="token punctuation">{</span> <span class="token property">animation-delay</span><span class="token punctuation">:</span> 4s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> bildwechsler</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">33.3%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">66.6%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und hier das Ergebnis: <a href="http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test_bildwechsel4f.html</a></p> </blockquote> <p>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.</p> <p>Mit deiner Ausdünnung der Keyframes hast du nun noch weniger Stützpunkte, weshalb die Bilder noch länger gleichzeitig zu sehen sind.</p> <blockquote> <p>Ü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:</p> <ol> <li>Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".</li> </ol> </blockquote> <p>Du meinst der Lichtspot auf den Anfangsbuchstaben?</p> <blockquote> <p>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.</p> </blockquote> <p>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?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714783#m1714783 marctrix self@mhis.de http://mhis.de 2018-02-28T15:20:20Z 2018-02-28T15:22:53Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>Danke Gunnar!</p> <p>Hier das danach abgeänderte Script:</p> </blockquote> <blockquote> <pre><code class="block language-css"> <span class="token atrule"><span class="token rule">@keyframes</span> bildwechsler</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">33.3%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">66.6%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Jetzt startet der Übergang von transparent zu sichtbar schon direkt zu Beginn der Animation.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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).</p> <p>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).</p> <p>Das erste Mal ist immer schwer. Aber bisher hast du alles verstanden, was du getan hast. Dann wirst du den Rest auch noch hinkriegen!</p> <blockquote> <ol> <li>Meine Textbilder enthalten die Photoshopgestaltungsfunktionen "abgeflachte Kante" und "Schein nach außen".</li> </ol> </blockquote> <p>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.</p> <p>Wenn es nur auf den Effekt ankommt und nicht darauf, dass jemand liest, was da steht, kannst du da doch auch Erdbeeren animieren.</p> <p>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.</p> <p>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.</p> <blockquote> <ol start="2"> <li>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</li> </ol> </blockquote> <p>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!</p> <blockquote> <p>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.</p> </blockquote> <p>Warum sollte ich mir die auch nur ein einziges Mal anschauen? Geschweige denn bei jedem Seitenbesuch erneut?</p> <p>Das langweilt doch spätestens beim dritten Mal. Oder lässt du dir gerne einen Witz drei mal erzählen? </p> <p>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.</p> <p>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!</p> <p>Übrigens geht anhalten ganz einfach. In der Regel halten Slider, Bildwechsler usw. an, wenn sie angetabbt oder mit der Maus überfahren werden (<code>focus</code>und <code>hover</code>). Ist das der Fall, genügt ein <code>animation-state: pause</code> — 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.</p> <p>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!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714777#m1714777 Thomas 2018-02-28T14:30:24Z 2018-02-28T14:30:24Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Offensichtlich habe ich es nicht verstanden. Und jetzt weiß ich immer noch nicht weiter.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1716869#m1716869 Roger Rabbit von Plid 2018-03-21T18:55:20Z 2018-03-21T18:59:04Z Frage zum Wiki-Artikel „Bildwechsler“ <p><a href="/users/15" class="mention registered-user" rel="noopener noreferrer">@Auge</a></p> <blockquote> <p>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?</p> </blockquote> <p>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.</p> <p>Hochglanzpolierte Websites mit perfektem HTML- und CSS Code für Brainwashing und Manipulation. Strahlendes Lächeln überall. Bravo!</p> <p>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 <em>reine</em> 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?</p> <p>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.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714819#m1714819 Thomas 2018-03-01T07:50:09Z 2018-03-01T07:50:09Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Marc!</p> <p>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.</p> <p>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.</p> <p>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.)</p> <p>Hier noch mal das Script:</p> <pre><code class="block language-html">#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; } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gallery<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften1.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften2.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FSP-Eigenschaften3.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bild3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und hier das Ergebnis:</p> <p><a href="http://www.fotosatzpfeifer.de/html/test3_bildwechsel4d.html" rel="nofollow noopener noreferrer">http://www.fotosatzpfeifer.de/html/test3_bildwechsel4d.html</a></p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714824#m1714824 JürgenB https://www.j-berkemeier.de 2018-03-01T08:28:02Z 2018-03-01T08:28:02Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo,</p> <p>der Keyframe ist falsch. Nimm den von Gunnar mit 6 Einträgen. Im <a href="https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714768#m1714768" rel="noopener noreferrer">Beitrag mit den Bildern</a> 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?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714825#m1714825 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-03-01T08:31:39Z 2018-03-01T08:32:23Z Frage zum Wiki-Artikel „Bildwechsler“ <p>@@Thomas</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>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 <code>@keyframes</code>-Regel für alle Bilder. Das Nacheinander wird durch zeitlichen Versatz (<code>animation-delay</code>) geregelt.</p> <p>Die andere Möglichkeit wäre, für jedes Bild eine eigene <code>@keyframes</code>-Regel zu erstellen, wo der zeitliche Versatz schon drin ist. Aufwändiger, wartungsintensiver – nicht machen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714834#m1714834 marctrix self@mhis.de http://mhis.de 2018-03-01T09:26:50Z 2018-03-01T09:26:50Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>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.</p> </blockquote> <p>Wenn es lächerlich (im Sinne von lächerlich einfach) ist, wären wir längst fertig.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Es geht nur noch darum, das Ganze sinnvoll nach Euren Vorstellungen aufzuteilen.</p> <p>Auch ist deine Arbeitszeit nicht verschwendet.</p> <p>Du erlernst Fähigkeiten, die dir bei der weiteren Pflege Eurer Homepage zugute kommen werden. Kompetenz in der Firma zu haben ist sinvoll.</p> <p>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.</p> <p>Mag sein, dass es dir <strong>zu</strong> langsam geht. Aber Verständnis braucht Zeit.</p> <p>In einem anderen Forum hätten Dir Leute, die es selber vielleicht auch nicht, hinbekommen einen Link zu etwas wie <a href="http://kenwheeler.github.io/slick/" rel="nofollow noopener noreferrer">Slick Caroussel</a> (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 <strong>weil</strong> das Slick Caroussel „alles“ kann.</p> <p>Daher bleibt lieber auf einem Weg und gehe den erst einmal zu Ende.</p> <p>Hier gibt es Leute, die mit viel Zeit und Geduld die Grundlagen erklären <strong>und</strong> Deinen Code korrigieren und auf Fehler hinweisen, bis es funktioniert.</p> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <blockquote> <p>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.</p> </blockquote> <p>Das sollte es nicht! (Auch wenn „Stolz“ ein von mir falsch gewähltes Wort war)</p> <p>Arbeit sollte zufrieden machen und selbstbewusst und am Ende auch Freude bereiten.</p> <p>Zurück zur eigentlichen Aufgabenstellung:</p> <p>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.</p> <p>Es gibt relativ viele Menschen mit einer Blendempfindlichkeit. Mit zunehmenden Alter betrifft uns das fast alle.</p> <p>Man kann als Nutzer leicht die Hintergrundfarbe anpassen. Wie sieht Deine Animation auf schwarzem Hintergrund aus?</p> <p>Tipp: verwende keine Transparenz in den Bildern, die du animieren möchtest, sondern einen deckenden weißen Hintergrund (wenn es denn weiß sein soll).</p> <blockquote> <p>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.</p> </blockquote> <p>Klar: die Animation beginnt mit <code>opacity: 1</code> - also voll deckend!</p> <blockquote> <p>In allen weiteren Durchgängen der Animation stimmt dann alles.</p> </blockquote> <p>Weil das darüberliegende Bild in den weiteren Durchgängen nur allmählich verschwindet (transparenter wird).</p> <blockquote> <p>(In diesem Script verstehe ich die verschiedenen Keyframezahlen übrigens wieder überhaupt nicht, aber trotzdem machen sie genau das gleiche wie im anderen Script.)</p> </blockquote> <p>Nein, eben nicht.</p> <p>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.</p> <p>Du solltest wirklich bei <strong>einem Beispiel</strong> bleiben. Sonst werden wir niemals fertig…</p> <p>Was du an der <strong>anderen</strong> 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.</p> <p>Du brauchst also für das Ausblenden des einen Bildes und für das Einblenden des anderen Bildes zwei getrennte Phasen.</p> <p>Die erstellst du mittels keyframes. Sorge mit der Zeit für das delay dafür, dass sich die Ein- und Ausblendphasen nicht überlappen!</p> <p>Und wie ich schon sagte: in einem Codepen hätten wir gemeinsam dran arbeiten können.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714839#m1714839 Thomas 2018-03-01T09:48:17Z 2018-03-01T09:48:17Z Frage zum Wiki-Artikel „Bildwechsler“ <p>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.</p> <p>Und ja, wir hatten hier versucht, Gunnars Posting zu verstehen, was uns aber nicht gelungen war. Vielen Dank, Jürgen! :D</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714842#m1714842 Thomas 2018-03-01T09:53:05Z 2018-03-01T09:53:05Z Frage zum Wiki-Artikel „Bildwechsler“ <p>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.</p> <blockquote> <blockquote> <p>Das ist die eine Variante …</p> </blockquote> </blockquote> <p>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.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714849#m1714849 marctrix self@mhis.de http://mhis.de 2018-03-01T10:05:51Z 2018-03-01T10:06:05Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej alle,</p> <blockquote> <p>Du solltest wirklich bei <strong>einem Beispiel</strong> bleiben. Sonst werden wir niemals fertig…</p> </blockquote> <p>Dass jetzt ein Mix aus beidem zum Erfolg führt, war ein überraschendes Ende. </p> <p>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…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714845#m1714845 JürgenB https://www.j-berkemeier.de 2018-03-01T09:58:31Z 2018-03-01T09:58:31Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo,</p> <p>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.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714846#m1714846 marctrix self@mhis.de http://mhis.de 2018-03-01T09:58:33Z 2018-03-01T09:58:33Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>DANKE! Jetzt funktioniert es endlich!</p> </blockquote> <p>Glückwunsch! Ich hoffe, das fühlt sich gut an!</p> <p>Viel Freude mit dem Bildwechsler.</p> <p>Marc</p> <p>PS: Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach </p> <p><a href="http://haunschild.de/2016/inklusives-design-eu-strategie-fuer-menschen-mit-behinderungen/" rel="noopener noreferrer">Es lohnt sich</a> für beide Seiten: Anbieter und Nutzer von Webseiten!</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714905#m1714905 Henry 2018-03-02T03:09:16Z 2018-03-02T03:09:16Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo marctrix,</p> <blockquote> <p>PS: Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach </p> </blockquote> <p>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:</p> <p>Thomas, du verwendest uralte Auszeichnungen und Kodierungen</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=iso-8859-1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>Wie es besser geht zeigt dir selfhtml.<br> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundger%C3%BCst" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundgerüst</a></p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Titel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>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?)</p> <p>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.</p> <p>Gruss<br> Henry</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714877#m1714877 Thomas 2018-03-01T13:50:33Z 2018-03-01T13:50:33Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Für eine weitere Antwort auf Eure Postings habe ich gerade keine Zeit (doch wieder einige Arbeit da), kommt aber noch.</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714878#m1714878 marctrix self@mhis.de http://mhis.de 2018-03-01T14:02:00Z 2018-03-01T14:02:00Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>Für eine weitere Antwort auf Eure Postings habe ich gerade keine Zeit (doch wieder einige Arbeit da), kommt aber noch.</p> </blockquote> <p>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.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714904#m1714904 Thomas 2018-03-01T22:10:28Z 2018-03-01T22:10:28Z Frage zum Wiki-Artikel „Bildwechsler“ <p>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. :)</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714906#m1714906 marctrix self@mhis.de http://mhis.de 2018-03-02T07:24:15Z 2018-03-02T07:24:15Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Thomas,</p> <blockquote> <p>Fragen von mir würden hier nur wieder für neuen Aufruhr sorgen.</p> </blockquote> <p>Das Leben ist Aufruhr </p> <p>Im Ernst: wenn es noch irgendwo halt, frage gerne wieder.</p> <blockquote> <p>Danke an alle. </p> </blockquote> <p>Gern geschehen. Schön dass es klappt!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714934#m1714934 marctrix self@mhis.de http://mhis.de 2018-03-02T13:07:52Z 2018-03-02T13:07:52Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hej Henry,</p> <blockquote> <blockquote> <p>Denkt trotzdem mal in einem weiteren Schritt über Barrierefreiheit und Suchmaschinenoptimierung nach </p> </blockquote> <p>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:</p> <p>Thomas, du verwendest uralte Auszeichnungen und Kodierungen</p> </blockquote> <p>Du hast vollkommen recht, Thomas.</p> <p>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.</p> <p>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. </p> <p>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. </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/feb/23/frage-zum-wiki-artikel-bildwechsler/1714942#m1714942 Henry 2018-03-02T14:54:45Z 2018-03-02T14:54:45Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo marctrix,</p> <blockquote> <p>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. </p> </blockquote> <p>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 </p> <p>Gruss<br> Henry</p>