grmblfx: animiertes SVG als Hintergrund

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

  1. 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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. @@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

    --
    “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.” —John Lennon
    1. 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

      --
      sumpsi - posui - obstruxi
      1. @@Rolf B

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

        Ups. Hier sollte es hingehen.

        😷 LLAP

        --
        “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.” —John Lennon
        1. 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

          1. 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

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. @@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

              --
              “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.” —John Lennon
              1. 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

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                1. 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

                  1. 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

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. 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

                      --
                      Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.
                  2. @@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

                    --
                    “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.” —John Lennon
          2. @@grmblfx

            Warum ist background-size 200vh, nicht 100?

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

            Skizze

            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

            --
            “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.” —John Lennon
            1. Super, vielen Dank für die ausführliche Erläuterung und Skizze! Auch der link zu den Farbgradienten hat mir sehr weitergeholfen.

              Gruß Daniel

    2. @@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

      1. @@Daniel

        Was würdest Du empfehlen?

        Dass du zumindest innerhalb eines Threads nicht deinen Namen wechselst.

        😷 LLAP

        --
        “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.” —John Lennon
        1. Sorry, war mir nicht aufgefallen, soltle jetzt abgestellt sein!

          Gruß Daniel

  3. 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

    1. 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

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. 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

        1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. problematische Seite

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

            Der link enthält einen versteckten Hinweis 😉

            Gruß Daniel

        2. 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