animazione allo scroll o plugin alternativo

[mariarosaria]

Salve a tutti.

Utilizzavo questo plugin sul vecchio sito con joomla 3.

https://extensions.joomla.org/extension/animate-it/
Purtroppo non è stato aggiornato per joomla 4. Mi sapreste indicare se c'è qualcosa di simile che sia compatibile con joomla 4?

Ho creato delle animazioni sui moduli solo con i css e ci sono riuscita, ma non so fare in modo che l'animazione si attivi allo scroll della pagina, quindi gli elementi più in basso appaiono prima che si riesca a scorrere tutta la home.

Qualche suggerimento in proposito?

Grazie

http://www.cittadelladellimmacolata.it/joomla4

[Limma]

Puoi provare questa libreria js.
Facilissima da implementare e altrettanto facile da utilizzare (funziona a meraviglia).

[mariarosaria]

Ciao limma.
Grazie come sempre.

A dire il vero in questi giorni, andando alla ricerca di qualcosa di simile avevo già trovato la libreria, ma onestamente mi ero scoraggiata per l'installazione.

Poi ho trovato qualche tutorial su youtube e ho visto che per il funzionamento base basta copiare le due righe di codice all'inizio.
Effettivamente funziona.

Se guardi la home ho applicato l'effetto al modulo "fascia blu", subito sotto la gallery (che gallery non è). Però l'effetto viene applicato soltanto alle scritte, non all'intero modulo.
Come dovrei fare?

Sicuramente c'è qualche errore da parte mia.
Questo è il css personalizzato per il modulo (ometto le righe per il testo responsive). Ho creato apposta una posizione di nome "fascia" dalle impostazioni layout di helix

Codice: [Seleziona]

/* Modulo Fascia colorata home page */

#sp-fascia {
  box-shadow: 2px 1px 6px rgba(0,0,0,0.6);
}

.fascia{
    text-align: center;
    color:#fff;
    margin:40px 20px 40px 20px;
    font-family: 'Architects Daughter', sans-serif;
}


.fascia h4 {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
  margin-bottom: 0px;
}

.fascia h5 {
 
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
   font-style: italic;
   font-variant: small-caps;
    letter-spacing: 0.8px;
}

/* Fine */
Questo invece è il codice del modulo

Codice: [Seleziona]

  <div class="fascia" data-aos="fade-in" data-aos-delay="2000" data-aos-duration="3000" data-aos-easing="ease-in-out" data-aos-mirror="true">
  <h4>
   L’Immacolata: ecco il nostro ideale.<br>Che Ella stessa ami Dio con il nostro cuore.
  </h4><br>
  <h5>
    San Massimiliano Maria Kolbe
  </h5>
</div>

Ovviamente capisco che così facendo sto attribuendo le classi soltanto al div con le intestazioni, ma non riesco ad applicarlo all'intera sezione.

Ho provato anche con <section id="fascia" data-aos="fade-in" data-aos-delay="2000" ..... >

[mariarosaria]

PS.
Perdonatemi, ma non sono pratica di javascript
Non so se posso chiederlo nel contesto di questa discussione, ma la differenza tra l'installazione base della libreria e l'installazione del pacchetto qual è?