• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Animationen Viewport

meisterleise

Mitglied
Hallo Kollegen,
ich habe ein paar einfache CSS Animationen, die ablaufen, sobald sie in den sichtabren Bereich gescrollt werden. Ich möchte aber nicht, dass sie sofort starten, sondern erst, wenn bis zu einer bestimmten Höhe hineingescrollt wurde, also wenn sich das Objekt bspw. bereits in der Mitte des Bildschirms befindet (nicht zu verwechseln mit einem delay). Ist wahrscheinlich recht einfach, aber ich weiß nicht, wonach ich im Web suchen muss. Mit "CSS Animations Viewport" finde ich zumindest keine Lösung.

Kann mir jemand sagen, mit welchen Parametern sich das steuern lässt?
 

Sempervivum

Senior HTML'ler
Mit welchen Parametern man das steuern kann, hängt davon ab, wie und womit Du erkennst, ob das Element sich im Bildschirm befindet.
Das modernste Mittel, was ich kenne, ist der Intersection Observer:
Das liest sich ein wenig kompliziert aber wenn man damit experimentiert ist es doch relativ einfach.
Hier eine Demo, die ich in der Schublade hatte. Ich habe einige Kommentare hinzu gefügt, damit es verständlich ist:
Code:
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        html,
        body {
            height: 4rem;
        }

        body {
            margin: 0;
        }

        #img1 {
            position: absolute;
            top: 150vh;
            left: 50vw;
        }

        #img2 {
            position: absolute;
            top: 250vh;
            left: 50vw;
        }

        #outer {
            height: 300vh;
        }
    </style>
</head>

<body>
    <div id="outer">
        <img id="img1" src="images/laola.gif">
        <img id="img2" src="images/nikolaus.gif">
    </div>
    <script>
        const items = document.querySelectorAll("#outer img");
        const options = {
            // root: document.querySelector('body'),

            // die Margins (top, right, bottom, left) geben an,
            // wie weit das Element im Viewport
            // sein muss, damit Intersection erkannt wird:
            rootMargin: '-20% 0% -20% 0%',

            // threshold gibt an, wie viel des Elements im Viewport sein muss,
            // damit Intersection erkannt wird.
            // 1 bedeutet, dass das Element vollständig drin sein muss:
            threshold: 1
        }
        var io = new IntersectionObserver(function (entries) {
            txt = entries[0].isIntersecting ? ' in' : ' out';
            console.log(entries[0].target.id + txt);
        }, options);

        for (let i = 0; i < items.length; i++) {
            io.observe(items[i]);
        }
    </script>

</body>


</html>
 

meisterleise

Mitglied
Oh, ich hatte gehofft, das ließe sich allein mit CSS umsetzen. JS setzt für mich die Verständniskurve gleich viel höher. Okay, werde versuchen, da irgendwie durchzusteigen, bzw. weiß ich nun zumindest schonmal, unter welchen Begriffen das zu finden ist.

Großes DANKE für die Hilfe und den Beispiel Code!
 

Failix

Neues Mitglied
Gräme Dich nicht wegen der Verständniskurve – es lohnt sich! Mich hat der Intersection Observer vor einiger Zeit auch interessiert, und mir hat dieses Video dabei sehr geholfen:


Man kann damit sehr witzige Effekte machen …
 
Werbung:

Neueste Beiträge

Oben