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.

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