Killua: CSS-Transformationen kombinieren

Beitrag lesen

Sorry, aber ich habe hier komplett den Überblick verloren, weiß nicht welche Posts mich ansprechen, welche internes betreffen usw.

Danke jedenfalls für die geplanten oder bereits vollzogenen(?) Optimierungen der Anleitungen. Ich tue mich weiterhin schwer, bin aber auch ein hoffnungsloser Fall.

Bez. Animation automatisch starten (auch diese meine Frage finde ich nicht mehr) habe ich es inzwischen ein bissl verstanden: Eine CSS Animation startet eh von selbst. (Machte nur 99 Fehler in 3 Zeilen und das startet dann nicht)

Doch für manche CSS Anim Sachen scheint man nicht ohne JS auszukommen.

Als Fan von so einer Art Parallax Effekten versuchte ich ja weiterhin dieses Tut zu kapieren, bzw. in eigenen HTMLs nachzubauen. Keine Chance, das tut alles, aber nicht was ich will und Verschiebung ist nicht.

Daher habe ich meine eigene Version solcher optischer Verschiebungen gebastelt. Wie ist erstmal nebensächlich, aber es bewegen sich Hintergründe, Logos, Überschrift wie gewünscht in verschiedenen Geschwindigkeiten usw. Doch der Kram startet nun entweder automatisch, oder wenn ichs so notiere, per Hover.

Die kurze Frage nach langer Einleitung ist nun: Wie kann man das so lösen, dass diese Effekte erst beim scrollen starten? Wäre das klar, würde ich den einfachsten CSS Parallax Effekt ever erfunden haben. Es reichen ja ein paar Zeilen, man muss nix an html, body und nix mit after, before machen - es geht auch anders und schaut super aus!

Nochmals Danke für die Überarbeitungen bez. Animationen, Transform Translate und wie das alles heißt!


PS: Nochmal der Hinweis: All das ist nur eine Spielerei und wird evtl. nie irgendwo live eingesetzt. Also bitte keine Einwände, wie sehr das stören kann, wie viele Ressourcen dabei draufgehen und wie wenig barrierefrei das wäre.

0 67

CSS Animationen kombinieren

Killua
  • css
  1. 0

    CSS-Transformationen kombinieren

    Gunnar Bittersmann
    1. 0
      Rolf B
      1. 0
        Killua
        1. 0
          Matthias Scharwies
          1. 0
            Killua
            1. 0
              Matthias Scharwies
              1. 0
                meltemi
                1. 0
                  Matthias Scharwies
                  1. 0
                    Killua
              2. 0
                Killua
            2. 0
              Der Martin
              1. 0
                Killua
                1. 0
                  Der Martin
                2. 0
                  Gunnar Bittersmann
                  • menschelei
                  • rechtschreibung
                  1. 0
                    Killua
                    1. 0
                      Auge
                      1. 0
                        Tabellenkalk
                        1. 0
                          MudGuard
                        2. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
                            • menschelei
                            • musik
                            • rechtschreibung
                            1. 0
                              Gunnar Bittersmann
                              1. 1
                                Rolf B
                3. 0
                  Rolf B
          2. 1
            Rolf B
            1. 0
              Matthias Scharwies
            2. 0
              Killua
              1. 0
                Rolf B
                1. 0
                  Killua
          3. 0

            Neustart Transform-Tutorial

            Matthias Scharwies
            1. 0
              Matthias Scharwies
            2. 1
              Matthias Scharwies
            3. 0
              Matthias Scharwies
              1. 0
                Rolf B
                1. 0
                  Matthias Scharwies
                  1. 0
                    Matthias Scharwies
                    1. 0
                      Der Martin
                      1. 0
                        Matthias Scharwies
                        1. 0
                          Rolf B
                          1. 0
                            Der Martin
                            1. 0
                              Rolf B
                              1. 0
                                Der Martin
                                1. 0
                                  Gunnar Bittersmann
                                  • geometrie
                                  • svg
                                  1. 0
                                    Matthias Scharwies
                                    1. 0

                                      Transform-Tutorial aktualisiert

                                      Matthias Scharwies
                          2. 0
                            Gunnar Bittersmann
                            • css
                            • programmiertechnik
                            1. 0
                              Rolf B
                              1. 0
                                Gunnar Bittersmann
    2. 0
      Killua
      1. 0
        Gunnar Bittersmann
        1. 0
          Killua
    3. 0
      Killua
      1. 0
        Rolf B
        1. 0
          Killua
          1. 0
            Killua
  2. 0
    Killua
    1. 0
      Killua
    2. 0

      CSS Animation

      Matthias Scharwies
      • animation
      • css
      1. 0
        Killua
        1. 0
          Matthias Scharwies
    3. 0
      T-Rex
      1. 0
        Rolf B
        1. 0
          Gunnar Bittersmann
          1. 0
            Rolf B
      2. 0
        Killua
        1. 0
          T-Rex
          1. 0
            Killua