Element befindet sich vollständig im Viewport - Script anpassen

  • In dem folgenden Script vom Kulturbanausen (Demo dazu) wird einem HTML-Element eine Klasse hinzugefügt, sobald es vollständig im Viewport (Browserfenster) ist. So können Scrolleffekte erzeugt werden.



    Wie muss das Script geändert werden, damit die Klasse bereits hinzugefügt wird, wenn sich dass Element erst zu 20% im Viewport befindet?

  • Meinst du so in etwa?

    https://codepen.io/Mr_Beer/pen/vYygZXy?editors=0011


    um rechts links habe ich mich jetzt nicht gekümmert, kannst du aber gerne nachbessern.

  • Danke, genau das war mein Ziel.


    Mir geht es nur ums Rauf-/Runterscrollen. Wenn ein HTML-Element zum ersten mal beim Scrollen teilweise im Viewport (Browserfenster) erscheint soll einmalig eine bestimmte CSS-Anweisung ausgeführt werden.

  • Das kann man sehr gut auch mit Intersection-Observer machen.

    https://developer.mozilla.org/…Intersection_Observer_API

    Demo:

    threshold gibt dabei den Grad der Überdeckung an.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!