Joomla.it Forum

Joomla! 4 => Joomla! 4.x => Topic aperto da: mariarosaria - 22 Nov 2021, 19:26:21

Titolo: animazione allo scroll o plugin alternativo
Inserito da: mariarosaria - 22 Nov 2021, 19:26:21
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
Titolo: Re:animazione allo scroll o plugin alternativo
Inserito da: Limma - 22 Nov 2021, 22:59:08
Puoi provare questa libreria js (https://github.com/michalsnik/aos).
Facilissima da implementare e altrettanto facile da utilizzare (funziona a meraviglia).
Titolo: Re:animazione allo scroll o plugin alternativo
Inserito da: mariarosaria - 23 Nov 2021, 12:49:23
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 (https://www.cittadelladellimmacolata.it/joomla4/) 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" ..... >
Titolo: Re:animazione allo scroll o plugin alternativo
Inserito da: mariarosaria - 23 Nov 2021, 12:57:41
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 ?