Scrolling animation in Javascript e CSS con la Intersection Observer API

Mattepuffo's logo
Scrolling animation in Javascript e CSS con la Intersection Observer API

Scrolling animation in Javascript e CSS con la Intersection Observer API

Programmazione, Javascript - AJAX

Intersection Observer API di Javascript ci permette in sostanza di identificare quando un componente diventa visibile nella pagina ed effettuare un'operazione.

In questo articolo vediamo come usarla per animare i componente che vengono visualizzati nella pagina quando eseguiamo lo scroll.

Non c'è necessità di componenti esterni / plugin; ma solo di Javascript e CSS.

Qui sotto un esempio:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <style>
            body {
                background-color: #111111;
                color: white;
            }

            section {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }

            .animation {
                opacity: 0;
                transform: translateX(-300px);
                transition: all 0.7s ease-out;
                transition-delay: 0.4s;
            }

            .scroll-animation {
                opacity: 1;
                transform: translateX(0);
            }
        </style>
    </head>

    <body>
        <section>
            <h1 class="animation">
                SEZIONE UNO
            </h1>
        </section>

        <section>
            <h1 class="animation">SEZIONE DUE</h1>
            <p class="animation">
                La sezione 2 ha un'animazione!
            </p>
        </section>

        <section>
            <h1 class="animation">
                SEZIONE TRE
            </h1>
        </section>

        <script>
            const animations = document.querySelectorAll('.animation')
            const observer = new IntersectionObserver((items) => {
                    items.forEach((item) => {
                        if (item.isIntersecting) {
                            item.target.classList.add('scroll-animation')
                        } else {
                            item.target.classList.remove('scroll-animation')
                        }

                    })
                },
                {
                    threshold: 0.5
                });

            for (let i = 0; i < animations.length; i++) {
                const elements = animations[i];
                observer.observe(elements);
            }
        </script>
    </body>
</html>

In pratica andiamo a cercare tutti gli elementi che hanno la classe animation; in pratica sono gli elementi sui cui vogliamo applicare l'animazione.

Su ogni elemento faccio un controllo usando la proprietà isIntersecting.

In base al risultato aggiungiamo / rimuoviamo la classe scroll-animation, che è quella che esegue l'animazione.

Verrà animata anche la prima sezione, in quanto verrà mostrata subito in caricamento di pagina.

Enjoy!

Condividi

Commentami!