tag:forum.selfhtml.org,2005:/selfanimiertes SVG als Hintergrund – SELFHTML-Forum2021-01-07T17:44:03Zhttps://forum.selfhtml.org/self/2021/jan/02/animiertes-svg-als-hintergrund/1779837?srt=yes#m1779837grmblfxdaniel.walz@gmx.de2021-01-02T12:59:01Z2021-01-02T12:59:15Zanimiertes 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#m1779840Matthias Scharwiesmscharwies@selfhtml.org2021-01-02T13:46:02Z2021-01-02T13:46:46Zanimiertes 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#m1779841Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-02T13:53:13Z2021-01-02T17:43:23Zanimiertes 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#m1779845MudGuardhttp://www.andreas-waechter.de/2021-01-02T15:52:09Z2021-01-02T15:52:09Zanimiertes 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#m1779851Danieldaniel.walz@gmx.de2021-01-02T17:17:52Z2021-01-02T17:17:52Zanimiertes 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#m1779842Rolf B2021-01-02T15:16:07Z2021-01-02T15:17:08Zanimiertes 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#m1779852Danieldaniel.walz@gmx.de2021-01-02T17:18:54Z2021-01-02T17:18:54Zanimiertes 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#m1779856Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-02T17:44:56Z2021-01-02T17:53:28Zanimiertes 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#m1779846Matthias Scharwiesmscharwies@selfhtml.org2021-01-02T15:55:40Z2021-01-02T15:55:40Zanimiertes 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#m1779847MudGuardhttp://www.andreas-waechter.de/2021-01-02T15:57:26Z2021-01-02T15:57:26Zanimiertes 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#m1779848Matthias Scharwiesmscharwies@selfhtml.org2021-01-02T16:04:05Z2021-01-02T16:04:05Zanimiertes 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#m1779853Danieldaniel.walz@gmx.de2021-01-02T17:20:04Z2021-01-02T17:20:04Zanimiertes 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#m1779854Danieldaniel.walz@gmx.de2021-01-02T17:21:52Z2021-01-02T17:21:52Zanimiertes 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#m1779855Matthias Scharwiesmscharwies@selfhtml.org2021-01-02T17:33:23Z2021-01-02T17:35:50Zanimiertes 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#m1780057Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-06T05:47:44Z2021-01-06T05:47:44Zanimiertes 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#m1780050grmblfxdaniel.walz@gmx.de2021-01-05T22:13:02Z2021-01-05T22:13:02Zanimiertes 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#m1780054Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-06T05:26:29Z2021-01-06T05:26:29Zanimiertes 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#m1780055Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-06T05:41:25Z2021-01-06T05:41:25Zanimiertes 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#m1780056Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-06T05:44:45Z2021-01-06T05:44:45Zanimiertes 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#m1780139grmblfx2021-01-07T16:32:38Z2021-01-07T16:32:38Zanimiertes 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#m1780058Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-06T06:12:07Z2021-01-06T06:12:07Zanimiertes 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#m1780142Daniel2021-01-07T16:35:21Z2021-01-07T16:35:21Zanimiertes 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#m1780141grmblfx2021-01-07T16:33:42Z2021-01-07T16:33:42Zanimiertes 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#m1780145Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2021-01-07T16:38:37Z2021-01-07T16:38:37Zanimiertes 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#m1780156Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2021-01-07T17:44:03Z2021-01-07T17:57:08Zanimiertes 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#m1780154Der Martin2021-01-07T17:40:24Z2021-01-07T17:40:24Zanimiertes 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>