Movimento ridotto

Alcuni visitatori impostano il dispositivo per ridurre il movimento, perché le animazioni gli danno capogiri o li distraggono. Libretto legge questa impostazione (prefers-reduced-motion: reduce) su ogni pagina e segue una regola: togliere il movimento, tenere il risultato. Chi riduce il movimento legge ogni parola e vede ogni elemento dove arriva alla fine; niente resta nascosto. Qui trovi che cosa fa ogni tipo di movimento, e l'unica cosa che devi fare tu.

Prima di iniziare #

• Per modificare scene e stili ti serve il ruolo Editor di contenuti o Amministratore.
• Non devi attivare nulla: ogni ricetta, comparsa ed effetto ha già la sua versione a movimento ridotto.

Controllare una pagina con il movimento ridotto #

1. Apri la pagina nell'editor.
2. Nella barra Movimento sotto l'anteprima spunta Riduci il movimento. Ora l'anteprima si comporta come per un visitatore con l'impostazione attiva.
3. Scorri l'anteprima lungo tutta la pagina. Controlla che ogni testo si legga e ogni elemento si veda.
4. Alla fine togli la spunta da Riduci il movimento.

Per controllare il sito pubblicato, attiva l'impostazione sul tuo dispositivo: su macOS Impostazioni di Sistema › Accessibilità › Schermo › Riduci movimento; su iOS Impostazioni › Accessibilità › Movimento › Riduci movimento; su Windows Impostazioni › Accessibilità › Effetti visivi, con Effetti di animazione disattivati.

Che cosa fa ogni ricetta #

Le comparse (Movimento › Comparsa) non si riproducono affatto: l'elemento si vede così com'è.

Decidere che cosa fa una scena costruita a mano #

Una scena modificata in Avanzate segue l'impostazione Con movimento ridotto:

1. Seleziona l'elemento e apri Movimento. Apri la scheda della scena, poi Avanzate.
2. In Con movimento ridotto scegli:
   • Non animare (mostra lo stato finale): è la scelta iniziale. L'animazione viene tolta e l'elemento si vede come finisce.
   • Solo dissolvenza: tiene il cambio di opacità e toglie ogni spostamento, scala, rotazione e sfocatura.
   • Salta alla fine: l'elemento prende subito l'ultimo fotogramma chiave. In una scena allo scorrimento salta quando lo scorrimento arriva all'inizio dell'intervallo.

Lo spostamento di un elemento in un posto (come fa Aggancio all'intestazione) salta sempre, qualunque cosa scegli, perché l'elemento deve finire in quel posto.

Fermare anche le transizioni #

Le transizioni che imposti in Stili › Transizioni (passaggio del puntatore, focus, cambio di stato) non vengono fermate da sole. Il tema taglia le sue animazioni CSS e le sue durate di transizione, ma non quelle che hai scritto tu. Per fermare le transizioni di un elemento a chi riduce il movimento:

1. Seleziona l'elemento e apri la scheda Stili.
2. Nella barra degli ambiti apri Stato e, sotto Altro, scegli Movimento ridotto.
3. In Transizioni scegli Nessuna transizione qui. La sezione mostra "Nessuna transizione in questo ambito."

Ora per quei visitatori l'elemento cambia stato di colpo, e per tutti gli altri tiene le sue transizioni.

Presentazioni di immagini #

Un Carosello diventa una presentazione con tre impostazioni: Transizione › Dissolvenza fa comparire ogni slide sopra la precedente, sul posto, quando le sue immagini sono caricate; Controlli › Nessuno nasconde frecce, punti e pulsante di riproduzione, oppure Solo riproduci e pausa tiene quel pulsante; gli elementi che aggiungi al suo spazio overlay, come il titolo della pagina, restano sopra le slide mentre cambiano. Con Nessuno la presentazione continua a scorrere e si ferma mentre il puntatore è sopra o lo stato attivo della tastiera è sul carosello, così ogni visitatore può fermare una slide (scegli Solo riproduci e pausa se serve una pausa che resti). Per chi riduce il movimento non parte mai: vede la prima slide, e una slide scelta compare di colpo.

Cosa vedi #

• Con Riduci il movimento spuntato, l'anteprima mostra la pagina come la vede chi ha l'impostazione attiva: nessuna intro in attesa di un gesto, nessuna comparsa, le sequenze sull'ultimo fotogramma.
• Con JavaScript disattivato spuntato, l'anteprima mostra il markup del server. Contiene già lo stato finale di ogni scena, quindi questa vista e quella a movimento ridotto si somigliano, tranne gli stati legati allo scorrimento (logotipo agganciato, menu, intestazione invertita).
• Anche i componenti già pronti seguono l'impostazione: un Nastro scorrevole si ferma e mostra tutta la lista, così seguire il puntatore non ha nulla da spostare; il testo animato mostra subito il testo finale; un carosello nasconde il pulsante di riproduzione e passa da una slide all'altra di colpo; l'aspetto dell'intestazione legato allo scorrimento salta all'aspetto finale quando il tratto è superato, invece di seguire lo scorrimento; il sipario d'apertura del tema non si riproduce.

Errori comuni #

• Solo dissolvenza su una scena che sposta soltanto un elemento (senza cambio di opacità) non riproduce nulla: è giusto così, ma controlla che l'elemento sia dove te lo aspetti.
• Non affidare un significato al movimento (una parola che c'è solo mentre si scrive, un passaggio che si vede solo a metà scorrimento). Con il movimento ridotto quel momento non esiste.
• Le tue animazioni CSS a fotogrammi chiave, scritte negli stili di un elemento, vengono accorciate dalla regola del tema per il movimento ridotto: ognuna si riproduce una volta sola, in un istante, e l'elemento mostra lo stato finale dell'animazione se il suo fill mode lo mantiene. Un animation-delay aspetta comunque, e le tue transition non vengono accorciate.

Vedi anche #

• Scene e ricette
• Sequenze di immagini
• Livelli e canvas