Scene e ricette

Anima un elemento con una ricetta, regolane i parametri, provala e scorrila nell'anteprima, e leggi gli avvisi del pannello prima di pubblicare.

Aggiornato il26/10/2026

Una scena è un movimento che si riproduce sulla pagina: un elemento che sale quando entra nella vista, un logotipo che scorrendo va a fermarsi nell'intestazione, una sequenza di fotogrammi guidata dallo scorrimento. La scena parte da una ricetta: scegli la ricetta, regoli pochi parametri e l'anteprima la riproduce a ogni modifica. Qui trovi come aggiungerne una, controllarla e correggere quello che il pannello segnala.

Prima di iniziare #

Ti serve il ruolo Editor di contenuti o Amministratore. Un Autore dei contenuti al posto del pannello legge "Il tuo ruolo (…) non può modificare le animazioni. Chiedi a un designer."
Apri la pagina nell'editor. Le scene appartengono alla pagina: se nei Livelli è aperta l'intestazione o il piè di pagina, il pannello dice "Le scene si animano sulla pagina. Apri la pagina nei Livelli per aggiungerne una." Una scena della pagina può comunque muovere elementi dell'intestazione e del piè di pagina.
L'editor ha tre tipi di movimento; scegli quello giusto:

Tipo	Dove	A cosa serve
Comparsa	Ispettore › Movimento › Comparsa	L'entrata di un elemento quando arriva nella vista (dissolvenza, dal basso, ingrandimento, messa a fuoco).
Scene	Ispettore › Movimento › Scene	Tutto ciò che dipende dallo scorrimento, dal primo gesto, dall'intestazione o da più elementi insieme.
Transizioni	Ispettore › Stili › Transizioni	Passaggio del puntatore, focus e cambi di stato, scritti come CSS.

Aggiungere una scena da una ricetta #

Seleziona nei Livelli o nell'anteprima l'elemento da animare.
Nell'ispettore apri la scheda Movimento. Sotto Scene, se non ce ne sono, leggi "Nessuna scena anima questo elemento."
Scegli Aggiungi una scena. Si apre l'elenco delle ricette, ognuna con nome e descrizione di una riga.
Scegli una ricetta. Viene applicata subito con i parametri di partenza e l'anteprima la riproduce.
Regola i parametri nella scheda aperta. Ogni modifica si vede subito e viene salvata un attimo dopo che ti fermi.
Scegli Riproduci di nuovo per rivederla dall'inizio.

Se la ricetta ha bisogno di un elemento che non hai ancora indicato (il posto nell'intestazione, per Aggancio all'intestazione), la scheda resta tratteggiata con "Scegli che cosa anima per applicarla." Quando imposti la scelta mancante, la scena viene applicata.

Per uscire senza aggiungere nulla scegli Annulla. Parti da zero aggiunge una semplice dissolvenza dal basso e apre subito Avanzate, per costruire la scena a mano.

Le ricette #

Ricetta	Cosa fa	Parametri principali
Intro al primo gesto	Al primo scorrimento, tocco o tasto del visitatore l'elemento si accende lampeggiando.	Cosa si accende · Durata · Blocca la pagina durante l'intro · Si riproduce (A ogni visita / Una volta per visita) · Quanto lampeggia · Alla fine
Composizione al primo gesto	Al primo gesto i pezzi dell'elemento compaiono uno dopo l'altro.	Cosa si compone · Durata · Blocca la pagina durante l'intro · Si riproduce
Aggancio all'intestazione	Mentre la pagina scorre, l'elemento si sposta in un posto dell'intestazione e ci resta.	Cosa si aggancia · Posto nell'intestazione · Inizia dopo · Contato da (L'inizio della pagina / Quando arriva sotto l'intestazione) · Dura · Dimensione su desktop · Nel posto · Andamento
Menu che compaiono	Un elemento dell'intestazione resta nascosto finché lo scorrimento non arriva al punto indicato.	Cosa compare · Inizia dopo · Dura · Compare a
Comparsa allo scorrimento	L'elemento appare salendo quando entra nello schermo; con un ritardo, i suoi elementi uno dopo l'altro.	Cosa appare · Quanto sale · Ritardo tra gli elementi
Parallasse	L'elemento scorre più lento della pagina.	Cosa si muove · Profondità
Lettura guidata	Le parole si accendono una dopo l'altra mentre il testo passa la linea di lettura.	Le parole · Linea di lettura · Intensità delle parole da leggere
Chiusura che viene spinta via	Dopo un tratto di scorrimento l'elemento appare; ciò che arriva da sotto lo spinge via.	La chiusura · Cosa la spinge · Appare dopo · Distanza da ciò che la spinge
Nascondi dopo lo scorrimento	L'elemento si nasconde quando la pagina è scorsa fin lì, e torna risalendo.	Cosa si nasconde · Si nasconde dopo
Sequenza allo scorrimento	Una sequenza va dal primo all'ultimo fotogramma mentre la pagina scorre.	Vedi Sequenze di immagini.
Una parola per sezione	Un testo scrive la parola della sezione in vista, cancellando fino alle lettere in comune con la precedente.	Dove si scrive · Parole, una per sezione · Velocità · La prima parola
Inverti sulle foto	L'elemento passa al suo aspetto invertito sopra le foto, o anche sopra i fondi scuri.	Cosa si inverte · Si inverte sopra
Aggancio ai pannelli	Quando il visitatore smette di scorrere, la pagina si ferma sul pannello più vicino.	Come si aggancia · Attesa prima di agganciare · Aggancia entro

I campi dei parametri #

Un numero ha un cursore e una casella, entro i limiti del parametro.
Una distanza in schermate ha l'interruttore dell'unità, schermate o px. Il valore resta salvato in schermate, quindi segue l'altezza dello schermo del visitatore; i px lo mostrano all'altezza dell'anteprima.
Un elenco vuole una parola per riga ("Uno per riga, nell'ordine della pagina").
La scelta di un elemento propone l'elemento selezionato, le sue parti e gli altri elementi selezionati nei Livelli, oppure gli elementi dell'intestazione o del piè di pagina.
Andamento mostra quattro pulsanti, ognuno con la sua curva: Lineare, Morbida, Rallenta, Scattante.

Provare e scorrere nell'anteprima #

Sotto l'anteprima, la barra Movimento serve a controllare le scene legate allo scorrimento:

Trascina il cursore (Scorri l'anteprima lungo questa scena) per portare l'anteprima in un punto qualsiasi della scena. Se le scene allo scorrimento sono più di una, scegli prima quella giusta in Scena da scorrere. La barra mostra l'intervallo come "Inizia a … · finisce a … schermate".
Spunta Riduci il movimento per vedere la pagina come la vede chi ha chiesto movimento ridotto (vedi Movimento ridotto).
Spunta JavaScript disattivato per vedere il markup del server, cioè lo stato finale e visibile di ogni scena.

In modalità Modifica alcuni blocchi restano fermi per poterli selezionare ("Alcuni blocchi restano fermi mentre modifichi. Dal vivo riproduce tutto il movimento."). Porta Modalità di anteprima su Dal vivo per vedere la pagina come un visitatore. Dal vivo l'intro al primo gesto riparte a ogni caricamento, così puoi riprovarla quante volte vuoi.

Modificare a mano in Avanzate #

Avanzate contiene tutto quello che i parametri non mostrano: l'avvio, i bordi e gli spostamenti dello scorrimento, Segui lo scorrimento, Blocca l'elemento mentre si anima, i valori Da e A di ogni animazione, Durata, Andamento (o un andamento del sito), Dove si anima (breakpoint, puntatore), Imposta uno stato mentre si anima, Con movimento ridotto e il seme degli effetti.

Apri la scheda, poi Avanzate.
Cambia un campo. L'intestazione della scheda prende l'etichetta modificata e compare "Modificata a mano: i parametri della ricetta non descrivono più questa scena."
Per tornare alla ricetta scegli Ripristina la ricetta. Anche cambiare un parametro di una scena modificata la ricostruisce dalla ricetta: le modifiche fatte a mano si perdono.

Una modifica che il contratto delle scene rifiuta non viene salvata: la scheda mostra "Questa scena non è salvata: …" con il motivo.

Comparse ed effetti predefiniti #

Per una semplice entrata non serve una scena:

Seleziona l'elemento e apri Movimento › Comparsa.
Scegli Aggiungi una comparsa, poi un Effetto: Dissolvenza, Dissolvenza dal basso, Dissolvenza dall'alto, Dissolvenza da destra, Dissolvenza da sinistra, Ingrandimento o Messa a fuoco.
Se vuoi, spunta Mostra i figli uno dopo l'altro e imposta Ritardo tra i figli (ms), Ripeti ogni volta che entra nella vista e Inizia quando è visibile questa parte (%).

Effetti predefiniti unisce una comparsa e delle transizioni. Sceglierne uno li applica entrambi all'elemento selezionato in un solo passo (un annulla lo riporta com'era). Per conservarne uno tuo, prepara un elemento e scegli Salva come effetto…, dagli un Nome dell'effetto e scegli Salva effetto.

Cosa vedi #

Sotto Scene le schede di questo elemento, e sotto Su tutta la pagina le scene che non nominano alcun elemento della pagina (un'intro, i menu nell'intestazione, l'aggancio ai pannelli). Queste compaiono sotto ogni elemento.
L'intestazione di una scheda: il nome della ricetta (o Animazione personalizzata), quando parte e modificata se l'hai cambiata a mano.
Si avvia: quando parte la scena, a parole, per esempio "Quando entra nella vista", "Mentre la pagina scorre" o "Al primo scorrimento, tocco o tasto del visitatore".
Nella barra in alto, Carico delle animazioni: leggero / moderato / pesante. Il suggerimento indica quanti punti usano le animazioni della pagina rispetto al budget. Una pagina pesante può scattare sui dispositivi più lenti.
Una riga con il motivo, nella scheda, quando la scena ha un problema:

Messaggio	Cosa fare
Un elemento che questa animazione usa non è più nella pagina.	Scegli un altro elemento o rimuovi la scena.
Un elemento che questa animazione usa compare in più punti, quindi non si sa quale muovere.	Indica un elemento preciso.
Questa animazione cambia lo stato di un elemento che gestisce già il proprio.	Anima un elemento al suo interno, o un altro.
Un'altra animazione muove la stessa proprietà dello stesso elemento nello stesso momento.	Togli una delle due scene, o spostala su un'altra proprietà o un altro momento.
Lo scorrimento finisce prima di cominciare, quindi non si vede nulla.	Fai finire la scena dopo l'inizio.
Alla fine l'elemento resta invisibile.	Rendi visibile l'ultimo fotogramma chiave.
Le condizioni escludono ogni schermo, quindi non parte mai.	Allarga Dove si anima.

Errori comuni #

Attenzione: se elimini un elemento animato da una scena, la scena resta. La scheda mostra il messaggio "non è più nella pagina" e la pubblicazione viene rifiutata con "Un'animazione della pagina “…” muove qualcosa che non c'è più:". Correggi o rimuovi la scena prima di pubblicare.

L'intro al primo gesto tiene ferma la pagina finché il visitatore non scorre, tocca o preme un tasto, a meno che Blocca la pagina durante l'intro sia su No. Senza alcun gesto parte da sola dopo 8 secondi. Non si riproduce se la pagina si apre su un'ancora o già scorsa, e con Una volta per visita solo una volta per scheda del browser.
Una parola per sezione assegna una parola a ogni sezione che ha un'Ancora, nell'ordine della pagina. Una sezione senza ancora non riceve parole. Il campo Ancora si trova nella scheda Impostazioni dell'ispettore della sezione.
Due scene sulla stessa proprietà dello stesso elemento si contendono il movimento: la riga del motivo lo segnala, l'anteprima non sempre lo fa vedere.
L'annulla è la normale cronologia dell'editor: una ricetta applicata o una modifica a mano è un passo.
Aggancio ai pannelli cambia lo scorrimento di tutta la pagina. Provalo nell'anteprima a misura di telefono prima di tenerlo.

Vedi anche #

Qualcosa non va in questa pagina? Scrivi a docs@librettocms.com.