animiertes SVG als Hintergrund

[grmblfx]

Hallo und gutes neues Jahr!

Es scheint ein simples Problem, aber wir bekommen es nicht hin:

Für eine Rätsel-/Quizseite, das man in bestimmter Zeit lösen muss (wahrscheinlich einfach per <meta http-equiv="refresh" 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.

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:

<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

Was wir nicht hinbekommen:

Wie kann man per CSS steuern, dass sich die Grafik den gesamten Hintergrund einnimmt? Wir haben es sowohl per background-size: mit 100vh/100vw versucht als auch die Grafik in einen Container per position:fixed eingebaut, aber irgendwie klappt es nicht...

Wir freuen uns über Tipps oder auch Ideen, vermutlich ist die Lösung einfach ...

Gruß Daniel

[Matthias Scharwies]

Frohes neues Jahr!

Was wir nicht hinbekommen:

Wie kann man per CSS steuern, dass sich die Grafik den gesamten Hintergrund einnimmt? Wir haben es sowohl per background-size: mit 100vh/100vw versucht als auch die Grafik in einen Container per position:fixed eingebaut, aber irgendwie klappt es nicht...

body {
  background-size: 100% 100%;
}

Müsste doch gehen, oder?

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/background#background-size

Ich würde ein SVG mit einem Verlauf anlegen, dessen stop (bzw. der offset-Wert) dann mit SMIL nach oben geht.

svg viewbox="0 0 550 250">
	<title>Beispiele für lineare Farbverläufe</title>
	<defs>
		<desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc>
		<linearGradient
		id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%">
			<title>Verlauf 1</title>
			<stop offset="0%" stop-color="white" />
			<stop offset="100%" stop-color="blue">
			 	<animate 
		attributeName="offset" 
		to="0" 
		dur="5s" 
		fill="freeze"
	/>   
			</<stop>
 </linearGradient>
	</defs>
	<rect id="eins" x="10" y="10" width="150" height="200" fill="url(#verlauf1)" />
</svg>

SVG/Farben/Verläufe#Der_lineare_Farbverlauf

Dieses Markup könntest Du auch direkt in die background-image-Eigenschaft einbinden.

Herzliche Grüße

Matthias Scharwies

[Daniel]

Hallo Matthias,

Danke für Deine Antwort und den Tipp mit dem Gradienten! Das haben wir versucht, funktioniert aber nur eingeschränkt:

https://lmesg.de/schloss-hogwarts/svg_wasser.html

Erstens füllt das Bild leider nicht den ganzen Hintergrund aus. Woran könnte das liegen?

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.

Weitere Tipps?

Gruß Daniel

[Matthias Scharwies]

Servus!

Hallo Matthias,

Danke für Deine Antwort und den Tipp mit dem Gradienten! Das haben wir versucht, funktioniert aber nur eingeschränkt:

https://lmesg.de/schloss-hogwarts/svg_wasser.html

Erstens füllt das Bild leider nicht den ganzen Hintergrund aus. Woran könnte das liegen?

Das SVG hat eine Größe von 1000x1000. Wenn du die width- und height-Attribute weglassen würdest.

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.

Für einen harten Übergang benötigst du zwei Stops an der gleichen Stelle, die sich dann gleichzeitig verschieben.

Weitere Tipps?

Klingt kompliziert, benötigt auf jeden Fall javascript. Wenn möglich, hätten wir es gerne nur per CSS/SVG gemacht.

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.

Gruß Daniel

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@grmblfx

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:

Warum SVG? Halt mein Wasserglass …

😷 LLAP

[Rolf B]

Hallo Gunnar,

außer einem schlechten Witz über Endlosschleifen passiert hinter dem Link nicht so viel.

Ah, Update, der schlechte Witz wechselt bei jedem Aufruf...

Rolf

[Gunnar Bittersmann]

@@Rolf B

außer einem schlechten Witz über Endlosschleifen passiert hinter dem Link nicht so viel.

Ups. Hier sollte es hingehen.

😷 LLAP

[grmblfx]

Wahnsin, ich bin echt platt! Ganze 6 Zeilen CSS, ohne jegliche Grafik! Vielen Dank, (fast) genau was wir gesucht haben!

Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe: Warum ist background-size 200vh, nicht 100? Und warum dann to { background-position-y: 50%; }? 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.

Gruß Daniel

[Matthias Apsel]

Hallo grmblfx,

Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe:

Zeilenumbrüche erzeugt man in diesem Forum, indem man zwei Leezeichen ans Zeilenende macht.

Warum ist background-size 200vh, nicht 100?

Damit der Hintergrund doppelt so hoch ist, wie der Viewport, irgendwo muss das Transparent ja hin.

Und warum dann to { background-position-y: 50%; }?

immer bis zur Hälfte der Elementhöhe. Am Anfang ist also die Trennlinie genau unten am Viewport.

Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie?

Es lassen sich durch doppelte sogenannte color-stops auch scharfe Übergänge erzeugen.

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.

Dann ist dein body-Element nicht so hoch wie der Viewport. Wenn du das html-Element stattdessen nimmst, solltest du erfolgreicher sein.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Dann ist dein body-Element nicht so hoch wie der Viewport. Wenn du das html-Element stattdessen nimmst, solltest du erfolgreicher sein.

Nö. Auch das ist (ohne weitere Angabe) nur so hoch wie es der Inhalt erfordert.

(Dass der Hintergrund über die Höhe hinaus ausgefüllt wird, ist eine Eigenart von html und body.)

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

(Dass der Hintergrund über die Höhe hinaus ausgefüllt wird, ist eine Eigenart von html und body.)

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 (Spielwiese).

Bis demnächst
Matthias

[grmblfx]

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

[Matthias Apsel]

Hallo grmblfx,

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.

Dem Tag kannst du keine Eigenschaften zuweisen, nur dem Element. siehe http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html

Bis demnächst
Matthias

[Der Martin]

Hallo Matthias,

Dem Tag kannst du keine Eigenschaften zuweisen

ach doch, ich finde schon.
Der Tag kann lang sein, er kann verregnet sein, er kann anstrengend sein ... 😉

*scnr*,
 Martin

[Gunnar Bittersmann]

@@grmblfx

Ich war bisher gar nicht auf die Idee gekommen, dem html-Tag Eigenschaften zuzuweisen, immer nur body.

Bedauerlich bis ärgerlich.

Übrigens basieren mehr als die Hälfte (35 von 68) meiner derzeitigen kürzesten Lösungen in der CSSBattle darauf, ausschließlich html und/oder body zu stylen:

• 5× nur body (style-Attribut oder lobotomized owl selector *+*{…})
• 6× eine einzige Regel für beide *{…}
• 22× zwei Regeln, meist *{…}*+*{…}, seltener *{…}html{…}, ganz selten beide getrennt *+*{…}html{…}
• 2× drei Regeln *{…}*+*{…}html{…}

😷 LLAP

[Gunnar Bittersmann]

@@grmblfx

Warum ist background-size 200vh, nicht 100?

Der Trockenbereich und der Nassbereich sollen jeweils 100vh hoch sein.

Und warum dann to { background-position-y: 50%; }? […] 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?

Dass die Füllhöhe von der Höhe des Seiteninhalts abhängt, ist natürlich nicht gewollt. Um da mit % hantieren zu können, müsste man html, body { height: 100%} setzen.

Besser, man verwendet vh: von 0 bis -100vh. Im Codepen berichtigt.

Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie?

Dieses Posting sowie das darauf folgende sollten Schärfe in den Gradienten bringen.

😷 LLAP

[grmblfx]

Super, vielen Dank für die ausführliche Erläuterung und Skizze! Auch der link zu den Farbgradienten hat mir sehr weitergeholfen.

Gruß Daniel

[Daniel]

@@grmblfx

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:

Warum SVG? Halt mein Wasserglass …

Was würdest Du empfehlen?

Gruß Daniel

[Gunnar Bittersmann]

@@Daniel

Was würdest Du empfehlen?

Dass du zumindest innerhalb eines Threads nicht deinen Namen wechselst.

😷 LLAP

[Daniel]

Sorry, war mir nicht aufgefallen, soltle jetzt abgestellt sein!

Gruß Daniel

[MudGuard]

Hi,

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:

Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

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:

Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?

Den CSS-Verlauf an sich kann man nicht animieren. Man könnte aber die background-size-Eigenschaft animieren und so den Verlauf verschieben.

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

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:

Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?

Den CSS-Verlauf an sich kann man nicht animieren.

aber austauschen. Per Intervall.

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

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:

Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?

Den CSS-Verlauf an sich kann man nicht animieren.

aber austauschen. Per Intervall.

Ich könnte noch einen PIE-Timer vorschlagen:

Beispiel:JS-SVG-3.html

Tutorial: SVG/Tutorials/SVG_und_JavaScript/Animation

@grmblfx Ich würde gerne mehr über das geplante Rätsel erfahren!

Ich würde gerne

Herzliche Grüße

Matthias Scharwies

[Daniel]

@grmblfx Ich würde gerne mehr über das geplante Rätsel erfahren!

Der link enthält einen versteckten Hinweis 😉

Gruß Daniel

[Daniel]

Dane> Hi,

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:

Und warum nicht direkt einen linear Gradient als Hintergrund, also per CSS?

Den CSS-Verlauf an sich kann man nicht animieren.

aber austauschen. Per Intervall.

Klingt kompliziert, benötigt auf jeden Fall javascript. Wenn möglich, hätten wir es gerne nur per CSS/SVG gemacht.

Gruß Daniel