Il modulo GSAP Elements per Joomla offre una potente suite di stili ed effetti animati, progettati per migliorare l'impatto visivo e l'interattività dei siti web Joomla. Sfruttando la solida piattaforma di animazione GreenSock (GSAP), questo modulo consente a sviluppatori e designer di creare accattivanti preloader, vetrine, effetti parallasse, diagrammi di flusso, gallerie, contatori e una varietà di elementi animati che catturano l'attenzione degli utenti.
Ciò che rende questo modulo particolarmente versatile è la sua capacità di visualizzare i contenuti in modo fluido dagli articoli di Joomla o da elementi personalizzati definiti direttamente nei suoi parametri. Questa flessibilità consente ai creatori di siti di integrare animazioni dinamiche senza sacrificare la praticità della gestione dei contenuti. Oltre alle animazioni di base, GSAP Elements introduce effetti cursore opzionali e sofisticati effetti gel per le immagini che aggiungono profondità e feedback tattile alle interazioni dell'utente. Inoltre, il supporto per Google Fonts e le impostazioni di layout adattabili garantiscono che la presentazione visiva rimanga elegante e coerente su diversi dispositivi e dimensioni dello schermo.
Unendo le potenti funzionalità di GSAP alla flessibilità dei contenuti di Joomla, trasforma i siti statici in vivaci esperienze digitali che invitano all'esplorazione e deliziano i visitatori.
Verifica le impostazioni del modulo online - Modifica e Anteprima
Impostazioni generali
- Stile - Seleziona lo stile visivo (esempi: `preloader`, `show`, `show1` ... `show13`, `parallax1`, `process`, `process_glitch`, `process2`, `project`, `carousel`, `skew`, `gallery`, `animate`, `counters`, `imggel`).
- Sottoform utilizzati per aggiungere elementi personalizzati (utilizzati quando `Style` è `animate`, `counters` o quando `Source` = Elementi personalizzati).
- Origine dati - Articoli / Elementi personalizzati / Cartella..
- Larghezza colonna - Layout a colonne per i contatori (2..6 e varianti).
- Larghezza intera - Attiva/disattiva la larghezza intera del modulo.
- Testo principale - Titolo principale visualizzato negli stili applicabili.
- Mostra conteggio - Attiva/disattiva il conteggio per stili specifici.
- Sezione superiore, immagine di sfondo e testo informativo per determinati stili (ad esempio, `process2`).
- Opzione di zoom sull'ultima immagine per lo stile `show9`.
- Vari effetti immagine/sfondo e selezione degli effetti.
- Velocità — Velocità parallasse (per `parallax1`).
- Colore di sfondo (RGBA) per alcuni stili.
- Carica jQuery — Carica jQuery dal modulo (facoltativo, abilitalo solo se necessario).
- Abilita cursore personalizzato.
- Usa l'immagine dell'elemento come cursore - Sì / No
- Modalità di fusione (normale o `differenza`).
- Abilita font Google.
- URL del font, nome della famiglia e spessore quando è abilitato il font Google.
Origine dati:
Articoli
- Seleziona categoria
- Articoli della sottocategoria
- Profondità categoria
- Filtro tag
- Articoli in evidenza
- Campo articolo per ordinare
- Direzione di ordinamento
- Conteggio
- Apri link - Nuova finestra / Stessa finestra / Finestra popup
- Campi personalizzati articolo - Sì / No
- Titolo categoria - Sì / No
- Titolo elemento - Sì / No
- Lunghezza massima titolo
- Visualizzazione descrizione - Sì / No
- Lunghezza massima descrizione lunghezza
- Visualizzazione data - Sì / No
- Formato data - Sì / No
- Mostra "Leggi tutto" - Sì / No
- Impostazioni immagini
- Dall'introduzione dell'immagine - Sì / No
- Dal testo completo dell'immagine - Sì / No
- Dal testo introduttivo in linea - Sì / No
- Dal testo completo in linea - Sì / No
- Ordine di visualizzazione
- Modalità ridimensionamento
- Larghezza immagine
- Altezza immagine
Elementi personalizzati
- Seleziona immagine
- Titolo
- Informazioni
- Testo principale
- Link per saperne di più
Cartella di origine
Nelle impostazioni del modulo, imposta l'origine su "Cartella".
La cartella selezionata e le relative sottocartelle vengono analizzate in modo ricorsivo. Le estensioni supportate sono jpg, jpeg, png, gif, webp, bmp.
Formato del nome file nella cartella
Utilizza il nome del file (senza estensione) per definire titolo, informazioni e descrizione:
01 - Titolo | Info || Testo principale.jpg
Utilizza questo schema consigliato:
ORDINE - TITOLO | INFO || DESCRIZIONE.ext
Forme ed effetti immagine
Forma dell'immagine
La funzione Forma dell'immagine è disponibile indipendentemente dall'effetto "Disegno". Ritaglia o maschera le immagini originali senza convertirle in disegni. Le opzioni disponibili sono: Rettangolo, Cerchio, Ellisse, Rombo, Esagono, Schizzo (Splash), Forme da 1 a 6 e Casuale (Forme 1-6). L'opzione "Casuale" assegna forme di maschera diverse alle varie immagini.
Animare i contorni dell'immagine
Traccia i contorni dell'immagine con tratti SVG animati, utilizzando colori campionati dalla foto, e successivamente visualizza la foto stessa. Demo
Effetto immagine
L'opzione Effetto immagine offre quattro scelte: Originale (predefinito), Disegno, Acquerello e Olio. L'effetto è indipendente dalla forma dell'immagine; pertanto, è possibile utilizzare una delle due impostazioni singolarmente oppure combinarle entrambe.
- Livello effetto: Delicato, Leggero, Normale, Intenso o Molto intenso. Regola l'intensità del tratto a matita per l'effetto "Disegno", e l'intensità del pigmento, l'accumulo di colore e la texture della carta per l'effetto "Acquerello".
- Passaggio del mouse sulle immagini: L'opzione "Originale" (predefinita) mostra temporaneamente l'immagine sorgente al passaggio del mouse sull'elemento del team; l'opzione "Disegno" mantiene visibile l'effetto elaborato selezionato.
Stile Showcase
Stile Showcase1
Stile Showcase2
Stile Showcase3
Stile Showcase4
Stile Showcase5
Stile Showcase6
Stile Showcase7
Stile Showcase8
Stile Showcase9
Stile Showcase10
Stile Showcase11
Stile Showcase12
Stile Showcase13
Stile Parallax
Stile Process
Stile Process2
Stile Skew
Stile Project
Stile Gallery
Stile Counters
Stile Images Gel Effect
Stile Page Preloader
Stile Carousel
Slider reveal
