Compatibilità:

WebSite X5 Evo e Pro

Quando si vuole rendere una pagina web più accattivante e interattiva, i dettagli fanno la differenza. Con l'Oggetto Opzionale Animated Box 2, hai a disposizione uno strumento avanzato per creare box animati capaci di mettere in risalto informazioni importanti, aggiungendo un tocco di creatività e modernità al tuo design.


Con l'Oggetto Animated Box 2 non solo puoi sfruttare maschere ed effetti preimpostati, facilmente personalizzabili tramite una serie di parametri intuitivi, puoi anche importare e utilizzare maschere SVG personalizzate e godere della massima flessibilità creativa. Che tu voglia presentare un portfolio, evidenziare le recensioni dei tuoi clienti o mettere in risalto i benefici del tuo prodotto, questo strumento ti permette di combinare design dinamico e funzionalità per risultati professionali ed eleganti. Guarda alcuni esempi di ciò che puoi realizzare nella pagina di Anteprima.



Come si presenta un box animato

I box animati che puoi realizzare con l'Oggetto Animated box 2 prevedono una struttura fissa che gioca sui seguenti elementi:

  • Sfondo: è il contenitore che definisce la forma del box e che racchiude tutti i contenuti. Può essere personalizzato nei colori, nelle dimensioni e negli eventuali effetti grafici, per adattarsi perfettamente al design della tua pagina web.
  • Maschera: è l'elemento grafico in SVG che viene animato attraverso un effetto di morphing. La maschera può essere scelta tra quelle preimpostate oppure personalizzata, inserendo i parametri di un file SVG creato appositamente per il tuo progetto.
  • Contenuto: è la parte centrale del box dove puoi inserire titolo, testo e pulsante. Anche il contenuto viene animato con effetti di transizione e si adatta dinamicamente alla maschera, consentendo una perfetta integrazione visiva e un effetto d'insieme armonioso.


È importante precisare che al box può essere associata un'azione, come un link a una pagina, il download di un file o l'apertura di un popup e che gli effetti di animazione sono sempre associati al passaggio del mouse. 


Come impostare un box animato

Ora che ti è più chiaro di quali elementi si compone un box animato, iniziamo a definirne le impostazioni generali:

  • Fai doppio click sull'Oggetto Animated Box 2 inserito per accedere alla finestra con tutte le opzioni.
  • Rimani nella sezione Generale e inizia con l'impostare le dimensioni in pixel del box. Fatto questo, usa le opzioni disponibili per disegnare i bordi del box: puoi agire su colori, spessore, fattore di arrotondamento degli angoli ed ombra.
  • Se ti occorre, imposta un Collegamento: clicca sul pulsante  e scegli l'azione che deve essere eseguita. Il collegamento impostato sarà attivo su tutta l'area del box, non solo sul pulsante.


Come definire l'animazione del box 

Impostato il box, possiamo occuparci degli aspetti legati all'animazione. Come abbiamo anticipato, l'animazione complessiva prevede una combinazione di effetti tra cui un effetto di transizione sul contenuto e un effetto di morphing sulla maschera. Possiamo personalizzarli agendo attraverso le opzioni delle sezione Effetto:

  • L'effetto di transizione sui contenuti comporta uno spostamento in verticale, dal basso verso l'alto. Aumentando il valore del parametro Spostamento fai in modo che le scritte compaiano più in basso ed eseguano uno spostamento più ampio per finire con il posizionarsi nella parte alta del box.
  • La Durata stabilisce il tempo complessivo dell'intera animazione: impostala in modo da rendere il tutto più o meno veloce.  
  • Il Tipo di animazione ti permette di scegliere la maschera da applicare al box: puoi eliminarla scegliendo 'Nessuna', selezionare una di quelle predefinite o selezionare 'Personalizzato' per poter usare una tua maschera SVG.
  • Oltre al tipo di maschera puoi scegliere anche il metodo di Interpolazione: questo definisce come avverrà il morphing che porterà la maschera a trasformarsi da uno stato iniziale a uno stato finale.


Come definire lo stile dei singoli elementi

Abbiamo detto che un box animato si compone di diversi elementi. Puoi agire su ciascun elemento rendendolo visibile o meno e definendone l'aspetto.

  • Vai nella sezione Elementi e utilizza il menu a tendina per selezionare l'elemento di cui vuoi definire le impostazioni.
  • Per lo Sfondo puoi prevedere sia un colore che un'immagine di sfondo. Ricorda che l'immagine può essere scelta sia dalle Librerie online sia da quelle salvate sul tuo PC. Se vuoi che l'immagine importata si adatti automaticamente alle dimensioni del box non devi fare altro che abilitare l'opzione Adatta dimensioni. Infine, non ti rimane che impostare l'Opacità dell'immagine importata sia nello stato normale che su passaggio del mouse. 
#tip - Diminuendo l'opacità dell'immagine fai in modo che diventi via via più "trasparente" lasciando intravedere il colore di sfondo sottostante. Per aggiungere un effetto Fade all'animazione complessiva del box, dunque, ti basta impostare valori di opacità differenti per lo stato normale e su passaggio dell'immagine di sfondo.  


  • Per la Maschera puoi definire il colore sia sullo stato normale che su passaggio del mouse e, se vuoi, dare un tocco di tridimensionalità aggiungendo un'ombra.
  • Il Titolo e la Descrizione propongono le stesse opzioni di personalizzazione. Puoi scrivere il contenuto, definire le formattazioni classiche, stabilire il colore sia per lo stato normale che su passaggio del mouse e, infine, impostare allineamento e margini.
#tip - Per rimuovere il titolo e/o la descrizione è sufficiente non inserire alcun contenuto. Invece, per fare in modo che questi elementi compaiano/scompaiano durante l'animazione è sufficiente sfruttare la possibilità di rendere le scritte invisibili impostando il colore come 'Trasparente' in uno dei due stati.   


  • Per il Pulsante, infine, hai le stesse possibilità viste per Titolo e Descrizione: l'unica differenza è che in questo caso puoi definire solo un colore sia per la scritta che per lo sfondo. Il pulsante, infatti, compare sempre e solo su passaggio del mouse.   

 

Come disegnare una maschera personalizzata 

Come abbiamo visto l'animazione dei box sfrutta anche un effetto di morphing applicato su una maschera SVG. 


Per chi non lo sapesse, SVG (Scalable Vector Graphic) è un formato vettoriale che può essere letto nelle pagine web. Questo tipo di formato è particolarmente usato per illustrazioni, icone e loghi (non per le immagini fotografiche) perché:

  • ha minor peso, in quanto i file non sono rappresentazioni di una griglia di pixel, bensì un insieme di tag/codici;
  • può essere modificato tramite CSS, andando ad esempio a creare effetti di cambio colore al passaggio del mouse (hover);
  • può essere ridimensionato senza perdita di qualità;
  • supporta l'applicazione di animazioni alle forme, creando ad esempio effetti detti “SVG Morph”.

 

Fatte queste premesse, come devi fare per creare e utilizzare una tua maschera SVG per il box animato che stai impostando con l'Oggetto Animated Box 2? Vediamo insieme i passaggi:

  • Per prima cosa devi aprire un programma di grafica vettoriale come Softonic Inkscape, Adobe Illustrator, Affinity Designer o anche i classici Adobe XD, Figma, Sketch, ecc.. Insomma, ogni piattaforma che permette di creare tracciati, può essere usato per esportare un file SVG. 
  • Scelto il programma, devi disegnare 2 forme: la prima è quella per la maschera nello stato iniziale, la seconda è quella della maschera su passaggio del mouse.
  • Per entrambe le maschere, partendo dal poligono disegnato, devi ottenere un percorso. Se, per esempio, usi Inkscape puoi farlo selezionando l'oggetto e usando il comando Path > Object to Path. Puoi vedere direttamente il codice dell'SVG nella finestra richiamata attraverso il comando Edit > XML Editor.
    Nel caso in cui il tuo software grafico non permettesse questa modalità di visualizzazione puoi semplicemente salvare i due file SVG e, successivamente, aprirli con un editor di testo come Blocco Note per visualizzare e copiare i dati.

Ecco un esempio di codice SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="320" viewBox="0 0 180 320">
  <path id="Tracciato_1" data-name="Tracciato 1" d="M 180,160 0,218 0,0 180,0 z"/>
</svg>

Come vedi la struttura ricorda molto l’HTML, ovviamente con tag differenti. Gli elementi del codice che ti interessano sono i valori assunti da 'viewBox' e 'd' (path data): nell'esempio sono i valori evidenziati in giallo.

  • Ora puoi tornare a lavorare in WebSite X5. Apri l'Oggetto Animated Box 2. Come Tipo di animazione scegli 'Personalizzato' e seleziona il tipo di Interpolazione che preferisci. 
  • Riporta i valori della viewBox all'interno dell'apposito campo.
  • Copia (CTRL+C) dal codice SVG della maschera iniziale il valore dell'elemento d e incollalo (CTRL+V) all'interno del campo Maschera iniziale.  
  • Analogamente, copia (CTRL+C) dal codice SVG della maschera finale il valore dell'elemento d e incollalo (CTRL+V) all'interno del campo Maschera su passaggio. 
#tip - Sia per la viewBox che per le Maschere devi riportare solo i valori degli elementi wiewBox e d, ovvero quanto riportato tra l'apertura e la chiusura delle virgolette (virgolette escluse). Per non commettere errori di trascrizione ti conviene copiarli (CTRL+C) e incollarli (CTRL+V).  


Come vedi, "accendendo" o "spegnendo" gli elementi e lavorando su colori ed effetti, le varianti ottenibili sono veramente tante. Sperimentando troverai una soluzione originale e perfetta per le pagine del tuo sito.  


#tip - Vuoi una versione alternativa di Box animato? Scopri anche l'Oggetto Animated Box.  



Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Animated Box 2


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti