-
Mi chiamo Lucas e
sono un ingegnere di
-
Google Web Designer.
-
In questo video
vedremo altri modi
-
per creare documenti
responsive tramite regole multimediali.
-
Questo video mostra come
combinare animazioni e regole multimediali.
-
Iniziamo con un semplice documento
-
che ha un layout verticale
se il viewport è stretto
-
e un layout orizzontale
se il viewport è più largo.
-
Ora estendo il documento
-
in modo che quando il layout è orizzontale
-
ed è abbastanza alto, invece di avere
-
una singola immagine ne abbia due
-
inizialmente sovrapposte, che
in seguito si separano con un'animazione.
-
Dato che Web Designer
utilizza fotogrammi chiave
-
CSS3 per rappresentare le animazioni
-
queste possono essere codificate
tramite regole multimediali.
-
Per iniziare passo alle regole principali
-
e copio e incollo questa immagine.
-
Poi, su una nuova immagine,
indico un asset diverso.
-
Lo faccio modificando
direttamente il percorso dell'asset.
-
Inoltre scelgo che l'asset sia
nascosto per impostazione predefinita.
-
Ora torno alle regole multimediali
-
e aggiungo un punto di interruzione altezza.
-
Come puoi notare modifico
l'intervallo verticale più ampio.
-
Quindi aggiungo un fotogramma chiave
-
per ognuna delle due immagini.
-
Le sposto verticalmente
con lo strumento Traslazione.
-
Così.
-
Infine imposto la visibilità
della seconda immagine
-
in modo che sia di nuovo visibile.
-
Ora posso eseguire lo scrubbing
per visualizzare l'anteprima dell'animazione.
-
Questa animazione è responsive nel senso che
-
le due immagini insieme rimangono centrate
-
anche se le dimensioni del viewport cambiano.
-
Tuttavia, se passo a
un'altra regola multimediale
-
l'animazione scompare.
-
Questo è visibile nella sequenza temporale
-
dove tutte le tracce sono vuote, a meno che
non mi trovi nella regola multimediale
-
in basso a destra.
-
Ora supponiamo che voglia
un'animazione predefinita
-
in cui l'opacità
dell'immagine sfumi da 0 a 1.
-
Per farlo, nelle regole principali
-
inserisco un fotogramma chiave.
-
Imposto l'opacità iniziale su 0
-
e su 1 per il fotogramma chiave.
-
Quindi nelle regole principali
notiamo che l'immagine sfuma.
-
Se torniamo alle regole multimediali
-
notiamo che in ognuna di esse
-
si verifica la stessa
animazione di dissolvenza.
-
Ecco la prima.
-
La seconda.
-
E la terza.
-
L'unica eccezione è la regola
multimediale in basso a destra
-
in cui ho definito
un'animazione di sostituzione.
-
Devo solo correggere
-
l'opacità iniziale della prima immagine
-
impostata su 0.
-
La imposto nuovamente su 1.
-
Ora l'animazione è stata ripristinata.
-
Puoi sempre capire se un'animazione
-
ha sostituito la regola multimediale,
perché la relativa etichetta
-
viene evidenziata nella sequenza temporale.
-
Se fai clic su tale etichetta appare
-
una finestra popup in cui
puoi rimuovere l'animazione di sostituzione
-
e utilizzare quella iniziale, se presente.
-
Questo è tutto
sulla combinazione delle animazioni
-
tramite regole multimediali.
-
Grazie per l'attenzione.
