attivare Animate.css allo scroll della pagina

[giannino1995]

Ciao a tutti,

Ho implementato questa libreria in un template:

https://daneden.github.io/animate.css/

Per evitare di mettere mano al codice HTML ogni volta che desidero cambiare effetto uso questo script:

<script>
$(document).ready(function(){
$('.element-animate').addClass('animated fadeInUp');
});
</script>

Mi piace molto Animate.css, non so se esistono librerie più comode e funzionali da usare, se esistono sono lieto di sperimentarle. Animate.css funziona sempre, su qualunque browser di qualunque device e questo mi rincuora.
L'unica cosa che non riesco a fare e spezzettare l'effetto di questa libreria sui diversi tag della pagina.
Io vorrei che l'effetto si manifestasse solo quando il l'utente visualizza la section in cui il div con la classe è presente.
Con lo script sopra tutti i div con .element-animate ricevono l'effetto descritto da 'animated fadeInUp' così l'utente vede questa cosa carina solo per il div più vicino al menu in alto.

So che si può fare questa cosa perché in passato ho visto dei siti con queste funzionalità.

[fermat]

ciao!

l'unica cosa che mi viene in mente è quella di attivare l'animazione quando la section diventa visibile all'utente.
non ho mai fatto una cosa del genere, ma qui mi sembra abbiamo posto lo stesso problema: https://stackoverflow.com/questions/...ecomes-visible

potresti provare.

[ciro78]

Giannino per la prossima volta metti titoli più significativi.

[giannino1995]

Giannino per la prossima volta metti titoli più significativi.

ok scusami

[giannino1995]

ciao!

l'unica cosa che mi viene in mente è quella di attivare l'animazione quando la section diventa visibile all'utente.
non ho mai fatto una cosa del genere, ma qui mi sembra abbiamo posto lo stesso problema: https://stackoverflow.com/questions/...ecomes-visible

potresti provare.

Grazie mille, non conoscevo queste funzioni.
Ho provato a riscrivere il mio codice in questo modo:

    <!-- Script per attivare Animate.css allo scroll della pagina. -->    <script>
    // Script per attivare Animate.css.
    //$(document).ready(function(){
    //    $('.element-animate').addClass('animated fadeInUp');
    //});
    
    // Script per attivare Animate.css allo scroll della pagina.
    $(document).ready(function(){
        var options = {
            root: document.querySelector(".element-animate"),
            threshold: 1.0
        }
        var observer = new IntersectionObserver(callback, options);
        var target = document.querySelector(".element-animate");
        observer.observe(target);
        var callback = function(entries, observer) {
            entries.forEach(entry => {
                $('.element-animate').addClass('animated fadeInUp');
            });
        };
    });
    </script>

ma ho peggiorato la situazione perché le classi dei div non si aggiornano più:

...
<div class="col-md-7 col-sm-12 element-animate">
<h1 class="h1">Titolo</h1>
<i>testo</i>
<p>testo 2</p>
<p><a href="#" class="btn btn-primary">Contattaci</a></p>
</div>
...

Come risolvo?
Mi andrebbe bene anche una libreria...

[giannino1995]

Ho anche provato ad usare jQuesry che preferisco rispetto a js puro ma senza successo:

$(document).ready(function(){
   $('.element-animate').isInViewport = function() {
      $(this).addClass('animated fadeInUp');
   };
});

[fermat]

ovviamente non so tutto il codice che hai usato o ti serve.

cmq io ho usato questo plugin per vedere quando un componente è nel viewport: https://github.com/morr/jquery.appear

dagli un'occhiata....

[giannino1995]

Ho provato un'infinità di codice ma non capisco perché a me non funziona un emerito tubo di nulla.
In cima alla pagina metto questo:

    <link rel="stylesheet" href="css/animate.css">
    <script src="js/index.js"></script>

(index.js è il file scaricato dal sito)
In fondo metto questo:

    <script>
    $(document).ready(function(){
        $('.element-animate').appear() {
            $(this).addClass('animated fadeInUp');
        });
        });
    </script>

Il div è fatto in questo modo:

        <div class="element-animate">
               .....
        </div>

Le nuove classi non vengono aggiunte quindi Animate.css non funziona.

[giannino1995]

Chiedo scusa, dimenticavo del codice. Funziona tutto ora ma resta un problemino non di poco conto legato ad Animate.css.
Sarebbe bello che il div comparisse con l'effetto e non che l'effetto comparisse a div presente. Quello che accade qui:
https://daneden.github.io/animate.css/
è quello che voglio. Come posso fare?
Ho provato a nascondere tutti i div con js e poi a lanciare lo script ma i tag restano nascosto... ho fatto anche altre prove...
Io vorrei che mentre scorro verso il basso i tag compaiono come se fossero buttati dal basso verso l'alto.
Ora accade che quando scendo nella pagina il tag è già presente, appena lo vedo con gli occhi scompare subito per poi comparire subito dopo con l'effetto di animate (semplicemente orribile).

	<script>
	$(document).ready(function(){
		$(function(){
			var intervals = [];
			$(".element-animate").appear();
			$(".element-animate").on('appear', function(event, $all_appeared_elements) {
				$(this).addClass('animated fadeInUp');
			});
		});
    });
	</script>

[giannino1995]

up!