Aprite questo sito celeberrimo:
https://www.ferrari.com/it-IT
ed osservate le immagini che compongono il layout.
Ho trovato una libreria che mi permette di ricreare lo stesso effetto ovvero far sembrare al visitatore che l'immagine entri nello schermo da destra verso sinistra e viceversa.
Per fare questo basta aggiungere una semplice classe ad un tag. Qui di seguito riporto un esempio simile:
codice HTML:
<p class="ABC">HTML.it è un forum di professionisti</p>
Il problema è che appena apro il sito tutte le animazioni partolo nello stesso istante mentre io vorrei che le animazioni comparissero solo quando l'utente arriva al tag <p>. Stavo pensando di creare uno script in jQUery che aggiungesse a <p> la classe ABC quando <p> venga visualizzato ovvero l'utente arrivi a quel preciso punto della pagina, sempreché non esista già una libreria ad hoc. Uno script in js puro mi va bene uguale purché lo stesso funzioni su tutti i browser e sia comprensibile. Uso anche Bootstrap nel layout e non so se per esso esista qualcosa di pronto, io non ho trovato nulla.
Questo è quello che sono stato in grado di scrivere:
codice:
$(document).ready(function() {


    if ($('.div_animati').length) {
        eseguiAnimazione();
    }


});


function eseguiAnimazione(){
    $(window).on('scroll',function(){
        $('.div_animati .animate__animated').each(function() {
            if (isScrolledIntoView(this) === true) {
                alert("Questo messaggio non appare!");
                $(this).addClass('animate__fadeInLeft');
            }
        });
    });
}
codice:
        <section class="...">
            <div class="container">
                <div class="div_animati ">
                    <h2 class="animate__animated "><i class="..."></i> Prova 1</h2>
                </div>
                <div class="...">
                    <div class="div_animati ">
                        <p class="animate__animated ">Prova 2</p>
                    </div>
                </div>
            </div>
        </section>
Il codice non produce alcun effetto e l'alert non viene neppure visualizzato quando raggiungo 'div_animati' nella pagina.