Se vuoi dare maggiore dinamicità e movimento al design delle tue pagine web, devi assolutamente conoscere gli effetti di movimento di elemento.

Che cosa sono? Sono degli effetti che possono essere applicati ad intere sezioni ed elementi all'interno appunto di elemento.

Come si attivano io in questo esempio che ti mostrerò Ho creato una pagina con dei contenuti demo e andremo ad animare un po' questa intera sezione che è semplicemente una sezione con un'immagine di background, un overlay e un semplice testo e pulsante al di sopra.

Torniamo quindi in end di elemento e andiamo a selezionare l'intera sezione l'intero contenitore dove ho inserito appunto l'immagine di sfondo.

Andando alla tab avanzato sotto layout troviamo effetti di movimento attivando gli effetti di scorrimento.

Ci sono diverse possibilità, come ad esempio lo scorrimento verticale, lo scorrimento orizzontale sono degli effetti di movimento appunto, che possono essere applicati all'intero contenitore.

Ad esempio io attivando l'effetto di scorrimento verticale su e giù.

Come vedete allo scrolling del mouse la um l'intero contenitore si muove in base alla direzione che io ho assegnato.

Posso ad esempio assegnare una posizione su e una posizione giù sotto posso definire sia la velocità, ma anche il quindi in quale percentuale questo effetto si deve attivare durante lo scrolling della della pagina? Ora io lo aumenterò un po' di più per farvi vedere in frontend.

Aggiorno la pagina il risultato finale aggiorno la pagina, vado in fronte, faccio refresh ed eccolo qua.

Come vedete, l'effetto è leggero.

Si nota un po' qui quando si avvicina il pulsante contatti, però l'effetto è stato inserito ed è interessante.

Questo ovviamente poi può essere personalizzato in varie modalità.

Come avete visto C'è il c'è la velocità però è una cosa che potete sicuramente considerare lo stesso anche orizzontalmente.

Quindi ad esempio lo scrolling della pagina, come vedete si sviluppa da sinistra verso destra o da destra verso sinistra.

Anche questo è un ottimo effetto interessante.

Un'altra cosa un po' più azzardata, se vogliamo, è l'effetto di rotazione.

Come vedete, anche in questo caso potete decidere da sinistra o da destra.

È un po' aggressiva, violente come pratica.

Ma se avete delle infografiche o delle illustrazioni particolari, degli effetti che devono entrare devono uscire.

È un sito molto creativo del design avanzato.

Probabilmente questa questa funzione potrebbe aiutarvi a interessarvi, quindi sicuramente vi invito a testare anche questa funziona Questi effetti possono essere applicati sia su desktop, tablet e mobile, ma se volete potete anche decidere di eliminare qualche dispositivo.

Ad esempio questa animazione non volete mostrarla sui mobile, quindi sui vari smartphone eliminate mobile per tre e salvate da quel momento questo effetto sarà mostrato solo su desktop e tablet un'altra.

Cosa interessante.

Ora disattivo l'effetto di scorrimento ed aggiorno la pagina un'altra.

Cosa interessante è la possibilità di aggiungere degli effetti mouse um ogni volta appunto che um con il cursore vi posizionate al di sopra di quel determinato contenitore e sezione con la traccia del mouse.

Infatti, attivando questa funzione, come vedete, ci sono due possibilità opposto e direzione.

Però anche questa è una funzione creativa abbastanza interessante.

Io ora l'ho inserita ad una semplice sezione di background è una per richiedere informazioni, però anche qui, se avete delle grafiche particolari, possono dare quel senso di dinamicità e movimento in più alla vostra pagina web e chiaramente renderla un po' meno statica.

Ora attorno alle impostazioni di Mhm, le impostazioni predefinite per mostrarvi un'altra cosa Questo riguarda quindi tutto quello tutto l'aspetto degli effetti di un movimento all'intera sezione contenitore di background.

In questo caso era una sezione con un'immagine di background dei dei testuali e di pulsante sopra.

Ora ci spostiamo alla Tav dello stile, dove abbiamo precedentemente inserito una semplice immagine di background e vediamo come attivare degli effetti di scorrimento.

Infatti sotto le impostazioni dell'immagine dove andremo a definire se l'immagine va ripetuta la posizione dell'immagine, ad esempio centrata, centrata a sinistra a destra e quant'altro potete anche definire in questo caso inserisco come copertina okay in modo tale che l'immagine copra l'intera sezione potete applicare appunto degli effetti di scorrimento.

Abilitando questa voce potete applicarlo verticalmente orizzontalmente una trasparenza, una sfocatura o una scalatura non li vedremo tutti nel dettaglio.

Vi invito chiaramente poi a testarli, ma voglio mostrarvi il loro funzionamento.

Lo scorrimento verticale è il classico parallasse o Parallax, che nel web design è stato molto utilizzato e probabilmente anche abusato nel corso degli anni per mostrare in modo più emozionale determinate sezioni, è quell'effetto dove semplicemente allo scrolling della pagina tutto il background si muove e si muove in modo dinamico.

In questo caso possiamo applicarlo sia verticalmente che orizzontalmente e anche qui possiamo scegliere la velocità e ovviamente la posizione su o giù in base a quello che volete, però anche questa è un'interessante funzione che potete prendere in considerazione.

Diciamo che in questa lezione quindi ho voluto mostrarvi quelle che sono le delle impostazioni avanzate da applicare sia alle sezioni di background, quando inserite um delle immagini o dei gradienti, ma anche tutto quello che riguarda l'animazione e il movimento dell'intera sezione, perché in alcuni casi sicuramente potrebbe tornarmi utile per dare quella quel senso di movimento e interattività maggiore rispetto a delle pagine.

Un po' più statiche.