Compatibilità:

WebSite X5 Evo e Pro

Se pensi che pagine web completamente statiche siano noiose, sarai felice di poter aggiungere un po' di interattività in quelle del tuo sito Web facendo in modo che, al passaggio del mouse, determinati elementi si animino, magari inclinandosi e ingrandendosi. Ovviamente, per ottenere questo risultato non devi scrivere alcun codice: devi solo utilizzare l'Oggetto Opzionale Tilt Box.


Puoi usarlo per creare un'animazione su semplici box colorati, ma puoi anche ricreare l'effetto su un'immagine, completa di testo, didascalia e collegamento attivo. Trovi alcuni esempi di ispirazione nella pagina di Anteprima.


Inserisci gli elementi di testo

  • Fai doppio click sull’Oggetto Tilt Box inserito per accedere alla finestra con tutte le opzioni. 
  • Rimani nella sezione Contenuto e inizia a definire i contenuti testuali.
  • Puoi inserire un Titolo, una Descrizione e una Descrizione su passaggio del mouse. Se per uno o più di questi campi non digiti nulla, semplicemente il testo corrispondente non verrà visualizzato.
  • Formatta ciascun testo inserito definendo font, dimensioni e colore: come vedi, ogni testo ha impostazioni proprie.
  • Se lo desideri, inserisci un Collegamento su tutto l'Oggetto: clicca sul pulsante  e, attraverso la finestra richiamata, scegli il tipo di azione che ti occorre.  


 Definisci gli effetti dell'animazione

  • Apri la sezione Impostazioni in modo da poter definire l'effetto che deve essere riprodotto su passaggio del mouse.
  • Per definire l'effetto che porta il box ad inclinarsi devi:
    • Scegliere il tipo di Movimento: puoi fare in modo che il box si inclini sia sull'Asse X che sull'Asse Y, oppure solo su uno dei due.  
    • Definire il fattore di inclinazione iniziale sugli Assi considerati: lasciandolo a zero, il box appare inizialmente non inclinato.
    • Impostare la Rotazione massima, ovvero di quanto il box deve inclinarsi sull'Asse X e/o Y su passaggio del mouse. Per questo parametro puoi impostare sia un valore positivo che negativo:  con un valore positivo, vedrai il box inclinarsi "avvicinandosi" al mouse; al contrario, con un valore negativo, vedrai il box inclinarsi "allontanandosi" dal mouse. 
  • Oltre a farlo inclinare lungo gli assi, puoi fare in modo che al box venga applicato anche un effetto di zoom, sempre su passaggio del mouse. Imposta un valore di zoom superiore a 100 per vederlo ingrandire o, al contrario, inferiore a 100 per vederlo rimpicciolire. 
  • Se non vuoi che il box rimanga nella posizione assunta durante l'esecuzione dell'effetto, attiva l'opzione Ripristina posizione.
  • Per fare in modo che l'effetto venga riprodotto non solo quando il mouse si muove sopra al box ma, in generale, all'interno della pagina, attiva l'opzione Intercetta il movimento del mouse su tutta la pagina. 


Imposta lo stile

  • Passa alla sezione Stile in modo da poter definire alcune impostazioni più grafiche.
  • Innanzitutto definisci le dimensioni complessive del box e il margine, ovvero lo spazio che deve essere lasciato tra il Titolo e la Descrizione.  
  • Puoi abilitare un'ombra per conferire maggiore profondità al box. 
  • Puoi anche abilitare un bagliore, in modo da accentuare il fatto che accade qualcosa al passaggio del mouse.
  • Infine puoi impostare lo sfondo dell'Oggetto, scegliendo se utilizzare un Colore, un Gradiente lineare, un Gradiente radiale o un'Immagine. A seconda dell'elemento scelto, avrai le opzioni necessarie per definirlo. 


#tip - Come puoi immaginare, prevedendo un colore o un gradiente di sfondo e aggiungendo un titolo e una descrizione, puoi creare delle semplici quanto efficaci card animate. Al contrario, inserendo un'immagine di sfondo e omettendo i testi, puoi animare le tue foto. 



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


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