tag:forum.selfhtml.org,2005:/self animiertes SVG als Hintergrund – SELFHTML-Forum 2021-01-07T17:44:03Z https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779837?srt=yes#m1779837 grmblfx daniel.walz@gmx.de 2021-01-02T12:59:01Z 2021-01-02T12:59:15Z animiertes SVG als Hintergrund <p>Hallo und gutes neues Jahr!</p> <p>Es scheint ein simples Problem, aber wir bekommen es nicht hin:</p> <p>Für eine Rätsel-/Quizseite, das man in bestimmter Zeit lösen muss (wahrscheinlich einfach per <code><meta http-equiv="refresh"</code> realisiert) möchte mein Sohn gerne, dass im Hintergrund in dieser Zeit langsam "das Wasser steigt", d.h. der Hintergrund sich langsam von unten nach oben blau verfärbt.</p> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> <pre><code class="block"><rect id="wasser" y="1100" width="2500" height="2200" fill="blue"> <animate attributeName="y" from="1100" to="0" dur="10s" repeatCount="0" /> </rect>Quelltext hier </code></pre> <p>Was wir nicht hinbekommen:</p> <p>Wie kann man per CSS steuern, dass sich die Grafik den gesamten Hintergrund einnimmt? Wir haben es sowohl per <code>background-size:</code> mit 100vh/100vw versucht als auch die Grafik in einen Container per <code>position:fixed</code> eingebaut, aber irgendwie klappt es nicht...</p> <p>Wir freuen uns über Tipps oder auch Ideen, vermutlich ist die Lösung einfach ...</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779840?srt=yes#m1779840 Matthias Scharwies mscharwies@selfhtml.org 2021-01-02T13:46:02Z 2021-01-02T13:46:46Z animiertes SVG als Hintergrund <p>Frohes neues Jahr!</p> <blockquote> <p>Was wir nicht hinbekommen:</p> <p>Wie kann man per CSS steuern, dass sich die Grafik den gesamten Hintergrund einnimmt? Wir haben es sowohl per <code>background-size:</code> mit 100vh/100vw versucht als auch die Grafik in einen Container per <code>position:fixed</code> eingebaut, aber irgendwie klappt es nicht...</p> </blockquote> <pre><code class="block">body { background-size: 100% 100%; } </code></pre> <p>Müsste doch gehen, oder?</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/background#background-size" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/background#background-size</a></p> <p>Ich würde ein SVG mit einem Verlauf anlegen, dessen stop (bzw. der offset-Wert) dann mit SMIL nach oben geht.</p> <pre><code class="block language-xml">svg viewbox="0 0 550 250"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Beispiele für lineare Farbverläufe<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>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>desc</span><span class="token punctuation">></span></span>Hier werden die Farbverläufe definiert und über die id dann aufgerufen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>desc</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>linearGradient</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>verlauf1<span class="token punctuation">"</span></span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0%<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0%<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0%<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<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>Verlauf 1<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>stop</span> <span class="token attr-name">offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0%<span class="token punctuation">"</span></span> <span class="token attr-name">stop-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<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>stop</span> <span class="token attr-name">offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">stop-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<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>animate</span> <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>offset<span class="token punctuation">"</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5s<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>freeze<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>stop</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>linearGradient</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</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>eins<span class="token punctuation">"</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url(#verlauf1)<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> </code></pre> <p><a href="https://wiki.selfhtml.org/wiki/SVG/Farben/Verl%C3%A4ufe#Der_lineare_Farbverlauf" rel="nofollow noopener noreferrer">SVG/Farben/Verläufe#Der_lineare_Farbverlauf</a></p> <p>Dieses Markup könntest Du auch direkt in die background-image-Eigenschaft einbinden.</p> <blockquote></blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779841?srt=yes#m1779841 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-02T13:53:13Z 2021-01-02T17:43:23Z animiertes SVG als Hintergrund <p>@@grmblfx</p> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Warum SVG? <a href="https://codepen.io/gunnarbittersmann/pen/RwGMaev?editors=0100" rel="noopener noreferrer">Halt mein Wasserglass …</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779845?srt=yes#m1779845 MudGuard http://www.andreas-waechter.de/ 2021-01-02T15:52:09Z 2021-01-02T15:52:09Z animiertes SVG als Hintergrund <p>Hi,</p> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779851?srt=yes#m1779851 Daniel daniel.walz@gmx.de 2021-01-02T17:17:52Z 2021-01-02T17:17:52Z animiertes SVG als Hintergrund <p>Hallo Matthias,</p> <p>Danke für Deine Antwort und den Tipp mit dem Gradienten! Das haben wir versucht, funktioniert aber nur eingeschränkt:</p> <p><a href="https://lmesg.de/schloss-hogwarts/svg_wasser.html" rel="nofollow noopener noreferrer">https://lmesg.de/schloss-hogwarts/svg_wasser.html</a></p> <p>Erstens füllt das Bild leider nicht den ganzen Hintergrund aus. Woran könnte das liegen?</p> <p>Zum zweiten ist der Verlauf noch nicht optimal, da es schon ca. in der Mitte anfängt. Optimalerweise wäre der Verlauf blau-weiß nur in einem Streifen in der Mitte, darunter alls blau und darüber alles weiß. Ich meine, dass so was möglich ist, wir haben es aber nicht hinbekommen.</p> <p>Weitere Tipps?</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779842?srt=yes#m1779842 Rolf B 2021-01-02T15:16:07Z 2021-01-02T15:17:08Z animiertes SVG als Hintergrund <p>Hallo Gunnar,</p> <p>außer einem schlechten Witz über Endlosschleifen passiert hinter dem Link nicht so viel.</p> <p>Ah, Update, der schlechte Witz wechselt bei jedem Aufruf...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779852?srt=yes#m1779852 Daniel daniel.walz@gmx.de 2021-01-02T17:18:54Z 2021-01-02T17:18:54Z animiertes SVG als Hintergrund <blockquote> <p>@@grmblfx</p> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Warum SVG? <a href="https://codepen.io/pen?editors=0100" rel="noopener noreferrer">Halt mein Wasserglass …</a></p> </blockquote> <p>Was würdest Du empfehlen?</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779856?srt=yes#m1779856 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-02T17:44:56Z 2021-01-02T17:53:28Z animiertes SVG als Hintergrund <p>@@Rolf B</p> <blockquote> <p>außer einem schlechten Witz über Endlosschleifen passiert hinter dem Link nicht so viel.</p> </blockquote> <p>Ups. <a href="https://codepen.io/gunnarbittersmann/pen/RwGMaev?editors=0100" rel="noopener noreferrer">Hier sollte es hingehen.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779846?srt=yes#m1779846 Matthias Scharwies mscharwies@selfhtml.org 2021-01-02T15:55:40Z 2021-01-02T15:55:40Z animiertes SVG als Hintergrund <p>Servus!</p> <blockquote> <p>Hi,</p> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?</p> </blockquote> <p>Den CSS-Verlauf an sich kann man nicht animieren. Man könnte aber die background-size-Eigenschaft animieren und so den Verlauf verschieben.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779847?srt=yes#m1779847 MudGuard http://www.andreas-waechter.de/ 2021-01-02T15:57:26Z 2021-01-02T15:57:26Z animiertes SVG als Hintergrund <p>Hi,</p> <blockquote> <blockquote> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?</p> </blockquote> <p>Den CSS-Verlauf an sich kann man nicht animieren.</p> </blockquote> <p>aber austauschen. Per Intervall.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779848?srt=yes#m1779848 Matthias Scharwies mscharwies@selfhtml.org 2021-01-02T16:04:05Z 2021-01-02T16:04:05Z animiertes SVG als Hintergrund <p>Servus!</p> <blockquote> <p>Hi,</p> <blockquote> <blockquote> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?</p> </blockquote> <p>Den CSS-Verlauf an sich kann man nicht animieren.</p> </blockquote> <p>aber austauschen. Per Intervall.</p> </blockquote> <p>Ich könnte noch einen PIE-Timer vorschlagen:</p> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:JS-SVG-3.html#view_result" rel="nofollow noopener noreferrer">Beispiel:JS-SVG-3.html</a></p> <p>Tutorial: <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/SVG_und_JavaScript/Animation#Pie_Timer_mit_SVG" rel="nofollow noopener noreferrer">SVG/Tutorials/SVG_und_JavaScript/Animation</a></p> <p><a href="/users/12878" class="mention registered-user" rel="noopener noreferrer">@grmblfx</a> Ich würde gerne mehr über das geplante Rätsel erfahren!</p> <p>Ich würde gerne</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779853?srt=yes#m1779853 Daniel daniel.walz@gmx.de 2021-01-02T17:20:04Z 2021-01-02T17:20:04Z animiertes SVG als Hintergrund <p>Dane> Hi,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:</p> </blockquote> <p>Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?</p> </blockquote> <p>Den CSS-Verlauf an sich kann man nicht animieren.</p> </blockquote> <p>aber austauschen. Per Intervall.</p> </blockquote> <p>Klingt kompliziert, benötigt auf jeden Fall javascript. Wenn möglich, hätten wir es gerne nur per CSS/SVG gemacht.</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779854?srt=yes#m1779854 Daniel daniel.walz@gmx.de 2021-01-02T17:21:52Z 2021-01-02T17:21:52Z animiertes SVG als Hintergrund <blockquote> <p><a href="/users/12878" class="mention registered-user" rel="noopener noreferrer">@grmblfx</a> Ich würde gerne mehr über das geplante Rätsel erfahren!</p> </blockquote> <p>Der link enthält einen versteckten Hinweis </p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779855?srt=yes#m1779855 Matthias Scharwies mscharwies@selfhtml.org 2021-01-02T17:33:23Z 2021-01-02T17:35:50Z animiertes SVG als Hintergrund <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>Danke für Deine Antwort und den Tipp mit dem Gradienten! Das haben wir versucht, funktioniert aber nur eingeschränkt:</p> <p><a href="https://lmesg.de/schloss-hogwarts/svg_wasser.html" rel="nofollow noopener noreferrer">https://lmesg.de/schloss-hogwarts/svg_wasser.html</a></p> <p>Erstens füllt das Bild leider nicht den ganzen Hintergrund aus. Woran könnte das liegen?</p> </blockquote> <p>Das SVG hat eine Größe von 1000x1000. Wenn du die width- und height-Attribute weglassen würdest.</p> <blockquote> <p>Zum zweiten ist der Verlauf noch nicht optimal, da es schon ca. in der Mitte anfängt. Optimalerweise wäre der Verlauf blau-weiß nur in einem Streifen in der Mitte, darunter alls blau und darüber alles weiß. Ich meine, dass so was möglich ist, wir haben es aber nicht hinbekommen.</p> </blockquote> <p>Für einen harten Übergang benötigst du zwei Stops an der gleichen Stelle, die sich dann gleichzeitig verschieben.</p> <blockquote> <p>Weitere Tipps?</p> </blockquote> <blockquote> <p>Klingt kompliziert, benötigt auf jeden Fall javascript. Wenn möglich, hätten wir es gerne nur per CSS/SVG gemacht.</p> </blockquote> <p>Irgendwie muss das Ende der Animation ja auch etwas mit dem Ende der Fragerunde zu tun haben, da benötigt man ja auch JS dafür.</p> <blockquote> <p>Gruß Daniel</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780057?srt=yes#m1780057 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-06T05:47:44Z 2021-01-06T05:47:44Z animiertes SVG als Hintergrund <p>@@Daniel</p> <blockquote> <p>Was würdest Du empfehlen?</p> </blockquote> <p>Dass du zumindest innerhalb eines Threads nicht deinen Namen wechselst.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780050?srt=yes#m1780050 grmblfx daniel.walz@gmx.de 2021-01-05T22:13:02Z 2021-01-05T22:13:02Z animiertes SVG als Hintergrund <p>Wahnsin, ich bin echt platt! Ganze 6 Zeilen CSS, ohne jegliche Grafik! Vielen Dank, (fast) genau was wir gesucht haben!</p> <p>Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe: Warum ist <code>background-size 200vh</code>, nicht 100? Und warum dann <code>to { background-position-y: 50%; }</code>? Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie? Wenn ich das Beispiel in meine Seite kopiere, wird nicht der ganze Viewport bis nach oben ausgefüllt, sondern die Animation endet bei ca. 70% der Höhe. Wie bekomme ich es bis ganz nach oben? Ich habe verschiedene Zahlen ausprobiert, aber irgendwie habe ich das Prinzip dahinter noch nicht verstanden.</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780054?srt=yes#m1780054 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-06T05:26:29Z 2021-01-06T05:26:29Z animiertes SVG als Hintergrund <p>Hallo grmblfx,</p> <blockquote> <p>Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe:</p> </blockquote> <p>Zeilenumbrüche erzeugt man in diesem Forum, indem man zwei Leezeichen ans Zeilenende macht.</p> <blockquote> <p>Warum ist <code>background-size 200vh</code>, nicht 100?</p> </blockquote> <p>Damit der Hintergrund doppelt so hoch ist, wie der Viewport, irgendwo muss das Transparent ja hin.</p> <p>Und warum dann <code>to { background-position-y: 50%; }</code>?</p> <p>immer bis zur Hälfte der Elementhöhe. Am Anfang ist also die Trennlinie genau unten am Viewport.</p> <blockquote> <p>Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie?</p> </blockquote> <p>Es lassen sich durch doppelte sogenannte color-stops auch scharfe Übergänge erzeugen.</p> <blockquote> <p>Wenn ich das Beispiel in meine Seite kopiere, wird nicht der ganze Viewport bis nach oben ausgefüllt, sondern die Animation endet bei ca. 70% der Höhe. Wie bekomme ich es bis ganz nach oben? Ich habe verschiedene Zahlen ausprobiert, aber irgendwie habe ich das Prinzip dahinter noch nicht verstanden.</p> </blockquote> <p>Dann ist dein body-Element nicht so hoch wie der Viewport. Wenn du das html-Element stattdessen nimmst, solltest du erfolgreicher sein.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780055?srt=yes#m1780055 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-06T05:41:25Z 2021-01-06T05:41:25Z animiertes SVG als Hintergrund <p>@@grmblfx</p> <blockquote> <p>Warum ist <code>background-size 200vh</code>, nicht 100?</p> </blockquote> <p>Der Trockenbereich und der Nassbereich sollen jeweils 100vh hoch sein.</p> <p><a href="/images/a523a82c-4fdf-11eb-9944-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/a523a82c-4fdf-11eb-9944-b42e9947ef30.jpg?size=medium" alt="Skizze" loading="lazy"></a></p> <blockquote> <p>Und warum dann <code>to { background-position-y: 50%; }</code>? […] Wenn ich das Beispiel in meine Seite kopiere, wird nicht der ganze Viewport bis nach oben ausgefüllt, sondern die Animation endet bei ca. 70% der Höhe. Wie bekomme ich es bis ganz nach oben?</p> </blockquote> <p>Dass die Füllhöhe von der Höhe des Seiteninhalts abhängt, ist natürlich nicht gewollt. Um da mit <code>%</code> hantieren zu können, müsste man <code class="language-css"><span class="token selector">html, body</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">}</span></code> setzen.</p> <p>Besser, man verwendet <code>vh</code>: von <code>0</code> bis <code>-100vh</code>. Im Codepen berichtigt.</p> <blockquote> <p>Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie?</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2019/apr/11/kniffliges-zur-wochenmitte-css-battle/1746625#m1746625" rel="noopener noreferrer">Dieses Posting</a> sowie <a href="https://forum.selfhtml.org/self/2019/apr/11/kniffliges-zur-wochenmitte-css-battle/1747425#m1747425" rel="noopener noreferrer">das darauf folgende</a> sollten Schärfe in den Gradienten bringen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780056?srt=yes#m1780056 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-06T05:44:45Z 2021-01-06T05:44:45Z animiertes SVG als Hintergrund <p>@@Matthias Apsel</p> <blockquote> <p>Dann ist dein body-Element nicht so hoch wie der Viewport. Wenn du das html-Element stattdessen nimmst, solltest du erfolgreicher sein.</p> </blockquote> <p>Nö. Auch das ist (ohne weitere Angabe) nur so hoch wie es der Inhalt erfordert.</p> <p>(Dass der Hintergrund über die Höhe hinaus ausgefüllt wird, ist eine Eigenart von <code>html</code> und <code>body</code>.)</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780139?srt=yes#m1780139 grmblfx 2021-01-07T16:32:38Z 2021-01-07T16:32:38Z animiertes SVG als Hintergrund <p>Super, vielen Dank für die ausführliche Erläuterung und Skizze! Auch der link zu den Farbgradienten hat mir sehr weitergeholfen.</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780058?srt=yes#m1780058 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-06T06:12:07Z 2021-01-06T06:12:07Z animiertes SVG als Hintergrund <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>(Dass der Hintergrund über die Höhe hinaus ausgefüllt wird, ist eine Eigenart von <code>html</code> und <code>body</code>.)</p> </blockquote> <p>Ja, das hatte ich im Sinn. Und dabei wird der Hintergrund für body nur dann über die ganze Höhe verteilt, wenn es keine Angabe für das html-Element gibt (<a href="https://codepen.io/MatthiasApsel/pen/RwGymdB" rel="noopener noreferrer">Spielwiese</a>).</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780142?srt=yes#m1780142 Daniel 2021-01-07T16:35:21Z 2021-01-07T16:35:21Z animiertes SVG als Hintergrund <p>Sorry, war mir nicht aufgefallen, soltle jetzt abgestellt sein!</p> <p>Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780141?srt=yes#m1780141 grmblfx 2021-01-07T16:33:42Z 2021-01-07T16:33:42Z animiertes SVG als Hintergrund <p>Danke! Ich war bisher gar nicht auf die Idee gekommen, dem html-Tag Eigenschaften zuzuweisen, immer nur body. Dass es da überhaupt Unterschiede gibt, war mir nicht klar. Gruß Daniel</p> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780145?srt=yes#m1780145 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-01-07T16:38:37Z 2021-01-07T16:38:37Z animiertes SVG als Hintergrund <p>Hallo grmblfx,</p> <blockquote> <p>Danke! Ich war bisher gar nicht auf die Idee gekommen, dem html-Tag Eigenschaften zuzuweisen, immer nur body. Dass es da überhaupt Unterschiede gibt, war mir nicht klar.</p> </blockquote> <p>Dem Tag kannst du keine Eigenschaften zuweisen, nur dem Element. siehe <a href="http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html" rel="nofollow noopener noreferrer">http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780156?srt=yes#m1780156 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-07T17:44:03Z 2021-01-07T17:57:08Z animiertes SVG als Hintergrund <p>@@grmblfx</p> <blockquote> <p>Ich war bisher gar nicht auf die Idee gekommen, dem html-Tag Eigenschaften zuzuweisen, immer nur body.</p> </blockquote> <p><a href="https://forum.selfhtml.org/cites/1122" rel="noopener noreferrer">Bedauerlich bis ärgerlich.</a></p> <p>Übrigens basieren mehr als die Hälfte (35 von 68) meiner derzeitigen kürzesten Lösungen in der <a href="https://cssbattle.dev/" rel="nofollow noopener noreferrer">CSSBattle</a> darauf, ausschließlich <code>html</code> und/oder <code>body</code> zu stylen:</p> <ul> <li>5× nur <code>body</code> (<code>style</code>-Attribut oder <em lang="en">lobotomized owl selector</em> <code class="language-css"><span class="token selector">*+*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code>)</li> <li>6× eine einzige Regel für beide <code class="language-css"><span class="token selector">*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code></li> <li>22× zwei Regeln, meist <code class="language-css"><span class="token selector">*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span><span class="token selector">*+*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code>, seltener <code class="language-css"><span class="token selector">*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span><span class="token selector">html</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code>, ganz selten beide getrennt <code class="language-css"><span class="token selector">*+*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span><span class="token selector">html</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code></li> <li>2× drei Regeln <code class="language-css"><span class="token selector">*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span><span class="token selector">*+*</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span><span class="token selector">html</span><span class="token punctuation">{</span>…<span class="token punctuation">}</span></code></li> </ul> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1780154?srt=yes#m1780154 Der Martin 2021-01-07T17:40:24Z 2021-01-07T17:40:24Z animiertes SVG als Hintergrund <p>Hallo Matthias,</p> <blockquote> <p>Dem Tag kannst du keine Eigenschaften zuweisen</p> </blockquote> <p>ach doch, ich finde schon.<br> Der Tag kann <em>lang</em> sein, er kann <em>verregnet</em> sein, er kann <em>anstrengend</em> sein ... </p> <p>*scnr*,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div>