Utilizza il componente Parallasse per creare un'illusione di profondità con i livelli di immagini. Quando l'utente fa scorrere la pagina verso l'alto o il basso su un dispositivo mobile, le immagini in primo piano e sullo sfondo si spostano a velocità diverse.
Questo componente è destinato all'uso solo nelle creatività con parallasse di Display & Video 360.
Per aggiungere il componente Parallasse al tuo progetto:
- Apri il riquadro Componenti, quindi la cartella Interazione.
- Trascina il componente Parallasse
sullo stage.
- Fai doppio clic sul componente per accedere alla modalità di modifica.
- Aggiungi i livelli trascinando i file immagine dal tuo file system sullo stage o nel riquadro Livelli (solo Windows o Mac) oppure facendo clic sul pulsante Aggiungi immagini
nella parte inferiore del riquadro Livelli. Solo le immagini possono essere aggiunte come livelli.
- Posiziona ogni livello nel punto in cui dovrebbe apparire, all'inizio e alla fine dell'animazione, usando le schede Inizio e Fine. Puoi trascinare il livello nel punto desiderato oppure utilizzare i campi Posizione iniziale e Posizione finale nel riquadro Proprietà. Puoi anche aggiungere uno stato intermedio passando il mouse sulla destra della scheda Inizia e facendo clic sul pulsante
.
- Imposta altre opzioni di configurazione necessarie.
- Dopo aver apportato le modifiche desiderate al componente (puoi visualizzare l'anteprima mentre ci lavori), fai clic su Salva. Tornerai alla normale interfaccia di Google Web Designer.
nella parte inferiore del riquadro Livelli. Solo le immagini possono essere aggiunte come livelli.
.Opzioni di configurazione
Per configurare il componente, fai doppio clic sullo stage oppure selezionalo e fai clic su Impostazioni… nel riquadro Proprietà.
Aggiungere i livelli
Esistono due modi per aggiungere un livello:
- Trascina un file dal tuo file system (solo Mac o Windows) o dalla Raccolta allo stage o al riquadro Livelli.
- Fai clic sul pulsante Aggiungi immagini
I livelli del componente Parallasse devono essere immagini.
Spostare i livelli
- Seleziona il livello da spostare.
- Seleziona la scheda Inizio, Centro o Fine (puoi aggiungere uno stato intermedio se non lo hai già fatto).
- Posiziona il livello utilizzando uno dei seguenti metodi:
- Trascina il livello nella nuova posizione.
- Utilizza i tasti freccia per spostare il livello un pixel alla volta. Tieni premuto il tasto MAIUSC mentre premi un tasto freccia per spostare il livello di dieci pixel in quella direzione.
- Imposta le proprietà della posizione Inizio, Centro o Fine nella scheda Proprietà del livello. Puoi modificare solo le proprietà che corrispondono alla scheda corrente. Usa i pulsanti Usa posizione iniziale, Usa posizione intermedia o Usa posizione finale
per copiare l'altra posizione.
Passa a un'altra scheda per regolare la posizione del livello in un altro punto dell'animazione.
Scambiare le immagini
- Fai clic con il pulsante destro del mouse sull'immagine sullo stage che vuoi scambiare e seleziona Scambia immagine… nel menu popup.
- Seleziona un'immagine dalla Raccolta o fai clic sul pulsante Importa file
La nuova immagine sostituirà l'immagine originale. Se in precedenza avevi ridimensionato l'immagine che hai scambiato, per la nuova immagine vengono usate le dimensioni modificate. In caso contrario, vengono usate le dimensioni naturali della nuova immagine.
Riordinare i livelli
Nel riquadro Livelli, trascina un livello fino alla nuova posizione nell'elenco.
L'ordine dei livelli determina quali livelli vengono visualizzati davanti agli altri. I livelli che si trovano in alto nell'elenco vengono visualizzati davanti a quelli posizionati più in basso.
Eliminare livelli
- Seleziona il livello che vuoi eliminare.
- Fai clic sul pulsante Elimina
nella parte inferiore del riquadro Livelli oppure premi il tasto CANC.
Ridimensionare i livelli
- Seleziona il livello da ridimensionare.
- Nel riquadro Proprietà del livello, imposta la larghezza e l'altezza del livello in pixel.
- Fai clic sul pulsante Mantieni proporzioni
per attivare o disattivare le proporzioni fisse tra la larghezza e l'altezza.
- Fai clic sul pulsante Mantieni proporzioni
Al livello vengono applicate le dimensioni specificate per l'intera durata dell'animazione.
Modificare l'opacità dei livelli
- Seleziona il livello da modificare.
- Nel riquadro Proprietà del livello, imposta l'opacità iniziale o finale inserendo un valore compreso tra 0 e 1 (0 corrisponde a trasparente, 1 a opaco).
Modificare l'easing dell'animazione dei livelli
- Seleziona il livello da modificare.
- Nel riquadro Proprietà del livello, seleziona un tipo di easing dal menu a discesa Easing.
L'easing personalizzato non è disponibile.
Aggiungere uno stato intermedio
Per un maggiore controllo sull'animazione del componente Parallasse, puoi aggiungere uno stato intermedio e modificare le proprietà dei livelli in quel punto.
- Passa il mouse sulla destra della scheda Inizia e fai clic sul pulsante
- Per impostazione predefinita, lo stato intermedio si trova a metà tra l'inizio e la fine dell'animazione. Puoi regolare la durata dell'animazione.
- Passa alla scheda Centro per impostare le proprietà dei livelli in questo punto.
Per rimuovere lo stato intermedio, passa il mouse sulla destra della scheda Centro e fai clic su X.
Modificare la durata dell'animazione
La durata dell'animazione del componente Parallasse dipende dalla velocità di scorrimento sulla pagina o al di fuori dalla pagina. Per impostazione predefinita, l'animazione inizia quando il bordo superiore del componente inizia a essere visualizzato nella pagina (0%) e termina quando il bordo inferiore scompare dalla parte superiore della pagina (100%). Se hai aggiunto uno stato intermedio, puoi anche stabilire il punto dell'animazione in cui dovrà apparire. Esistono due modi per regolare la durata dell'animazione:
- Nel riquadro Durata dell'animazione, trascina le caselle di inizio, centro e fine o il dispositivo di scorrimento sulla percentuale desiderata.
- Inserisci le percentuali di inizio, centro e fine nei campi del riquadro Durata dell'animazione.
Nascondere e mostrare i livelli
Nel riquadro Livelli, fai clic nella casella accanto alla miniatura del livello (sotto il pulsante Nascondi tutti i livelli ).
Puoi nascondere o mostrare tutti i livelli facendo clic sul pulsante Nascondi tutti i livelli .
Nascondere un livello ne impedisce la visualizzazione nell'anteprima della configurazione e ti permette di lavorare più comodamente su un altro livello, ma non influisce sull'anteprima del browser o sulle creatività pubblicate.
Mostrare e nascondere i ghost
- Seleziona un livello.
- Nella sezione Proprietà avanzate del riquadro Proprietà del livello, attiva o disattiva l'opzione Mostra ghost.
Il ghost è una versione trasparente del livello nella posizione che non stai modificando correntemente il cui scopo è quello di permetterti di confrontare visivamente le posizioni iniziali, intermedie e finali. I ghost servono solo come riferimento e non vengono mostrati nelle anteprime, né nel file pubblicato.
Proprietà
Proprietà dei componenti
Le proprietà dei componenti sono visibili nel riquadro Proprietà (per visualizzarle, devi uscire dalla modalità di modifica del componente).
| Proprietà | Descrizione |
|---|---|
| Nome | Il nome del componente Parallasse. |
| Fattore di scorrimento | Un numero compreso tra 0 e 1 rappresenta quanto l'utente ha fatto scorrere la pagina. Viene utilizzato solo per la visualizzazione sullo stage di Google Web Designer. Il valore predefinito è 0,5. |
Proprietà del livello
Quando sei nella modalità di modifica del componente, puoi visualizzare e modificare le proprietà del livello.
| Proprietà | Descrizione |
|---|---|
| Nome | Il nome del livello (non può essere modificato). |
|
Inizio |
La distanza del livello dal lato sinistro e da quello superiore del componente non appena quest'ultimo viene visualizzato (ad esempio quando il bordo superiore del componente si trova nella parte inferiore dell'area visibile), espressa in pixel o in percentuale. Può essere modificata quando è selezionata la scheda Inizio. |
| Centro | La distanza del livello dal lato sinistro e da quello superiore del componente allo stato intermedio dell'animazione, espressa in pixel o in percentuale. Può essere modificata quando è selezionata la scheda Centro. |
| Fine | La distanza del livello dal lato sinistro e da quello superiore del componente quando quest'ultimo sta per scomparire dallo schermo (ad esempio quando il bordo inferiore del componente si trova nella parte superiore dell'area visibile), espressa in pixel o in percentuale. Può essere modificata quando è selezionata la scheda Fine. |
| Dimensioni | La larghezza e l'altezza del livello. Viene applicata al livello per l'intera durata dell'animazione. |
| Opacità | L'opacità iniziale e finale del livello, rappresentata da un numero compreso tra 0 (trasparente) e 1 (opaco). |
| Easing | Il tipo di easing del livello dell'animazione. L'easing personalizzato non è disponibile. |
| Mostra ghost | Quando è attiva viene mostrata una versione trasparente del livello nelle posizioni non attive (le posizioni sulle quali non stai effettuando modifiche). |
Eventi
Gli eventi possono essere utilizzati per attivare altre azioni nell'annuncio. Il componente Parallasse invia il seguente evento:
| Evento | Descrizione |
|---|---|
| Parallasse caricato | Viene inviato quando il componente è pronto per la visualizzazione. |
Anteprima
Durante la configurazione
Puoi vedere in anteprima il componente Parallasse mentre ci stai lavorando:
- Fai doppio clic sul componente sullo stage per accedere alla modalità di modifica.
- Fai clic sulla scheda Anteprima in alto.
- Scorri verso l'alto e verso il basso per vedere il comportamento dei livelli visibili in un esempio di layout di un dispositivo mobile. I livelli nascosti non vengono visualizzati.
- Non puoi modificare il componente durante l'anteprima. Fai clic sulla scheda Inizio, Centroo Fine, apporta le tue modifiche, quindi fai nuovamente clic sulla scheda Anteprima per vedere le modifiche.
Nel browser
Visualizza l'anteprima del componente nel browser uscendo dalla modalità di modifica del componente e utilizzando il pulsante Anteprima in Google Web Designer. La pagina di anteprima mostra in che modo viene visualizzato l'annuncio su una pagina web con una quantità di contenuti sufficiente per scorrere sopra e sotto il componente.
Puoi selezionare una delle seguenti opzioni di modalità di anteprima:
- Dispositivo: seleziona un dispositivo mobile o Personalizzato.
- Ruota il dispositivo
: consente di alternare tra modalità verticale e orizzontale.
- Dimensioni viewport: se per l'opzione Dispositivo hai selezionato Personalizzato, puoi impostare nuove dimensioni modificando questo campo o trascinando i punti di manipolazione di ridimensionamento dell'anteprima.
: consente di alternare tra modalità verticale e orizzontale.Per gli annunci Parallasse viene usata sempre la modalità di anteprima Parallasse.