Oggi siamo stati informati di un nuovo aggiornamento su Divi che offre i cosiddetti effetti di animazione a scorrimento. Abbiamo dato un'occhiata e in questo tutorial riassumeremo cosa dovresti aspettarti.
Cominciamo.
Quali sono gli effetti di scorrimento?
Gli effetti di scorrimento sono animazioni personalizzabili che reagiscono al tuo Visitatori mentre scorrono su e giù per la pagina. A differenza delle animazioni tradizionali, gli effetti di scorrimento sono direttamente correlati al comportamento di scorrimento del tuo visitatore. La velocità e la direzione dell'animazione si basano sulla velocità e sulla direzione dello scorrimento del file visitatore. La sequenza temporale dell'animazione si basa sulla posizione dell'elemento nella finestra del browser.
Sembra complicato, ma con Divi, è abbastanza semplice
Qualsiasi elemento può essere animato utilizzando una combinazione di scala, rotazione, movimento orizzontale e verticale, opacità ed effetti di sfocatura. Quindi controlli l'entità di ciascun effetto in diversi punti dell'animazione Divi si prende cura del resto, creando bellissime transizioni mentre questi elementi entrano e si muovono nella tua visuale. visitatore. Crea animazioni semplici che aggiungono profondità e raffinatezza, oppure combina effetti e anima più elementi per creare spettacolari esplosioni di attività che stupiranno il tuo Visitatori!
6 nuovi sei effetti unici
Effetti disponibili tra cui scegliere o in combinazioni. Divi viene fornito con sei diversi effetti di scorrimento, ognuno dei quali può essere personalizzato individualmente utilizzando la nostra nuova interfaccia utente degli effetti di scorrimento. Puoi anche combinare uno qualsiasi degli effetti per creare animazioni più complesse.
Movimento verticale
L'effetto di movimento verticale consente a qualsiasi elemento di spostarsi su e giù per la pagina in base alla velocità e alla direzione di scorrimento del visitatore. Il risultato è un effetto di parallasse! Ora tutto può essere utilizzato per creare effetti di parallasse con Divi. Puoi anche combinare il movimento verticale con immagini di sfondo parallasse per creare disegni davvero impressionanti.
Movimento orizzontale
L'effetto di movimento orizzontale è simile all'effetto di movimento verticale, tranne per il fatto che consente di spostare gli elementi da sinistra a destra sullo schermo a seconda della direzione e della velocità di scorrimento di un visitatore. . Puoi anche combinare il movimento verticale e orizzontale, dandoti il controllo completo sul movimento di qualsiasi elemento!
Sfocatura contestuale
L'effetto sfocato porterà gli elementi dentro e fuori fuoco a seconda della velocità e della direzione di scorrimento del visitatore. Poiché Divi ti consente di controllare i valori di sfocatura iniziale, centrale e finale, puoi mettere a fuoco gli elementi proprio quando sono davanti agli occhi del visitatore. È un ottimo modo per attirare l'attenzione su informazioni importanti.
fuso
L'effetto dissolvenza con gli elementi dissolvenza in entrata e in uscita in base alla velocità e alla direzione dello scorrimento di un visitatore. Puoi unire elementi, farli scomparire o entrambi. La combinazione di dissolvenza, sfocatura e scala può creare alcune animazioni davvero sofisticate che aggiungono un ulteriore fattore "it" ai tuoi progetti.
Effetto ridimensionamento
L'effetto scala aumenterà o diminuirà le dimensioni di qualsiasi elemento a seconda della velocità e della direzione di scorrimento del visitatore. Se desideri attirare l'attenzione su un elemento particolare, come un invito all'azione, puoi impostare l'effetto scala per aumentare la dimensione dell'elemento man mano che si avvicina al centro del fotogramma. finestra. Ovviamente ci sono anche molte altre possibilità!
Effetto di rotazione
L'effetto di rotazione con ruota un elemento in entrambe le direzioni in base alla velocità e alla direzione di scorrimento del visitatore. Una sottile rotazione può davvero dare vita alle scene. Solo un po 'di rotazione se combinato con il movimento orizzontale può sembrare fantastico! Oppure lascia che gli elementi girino in tondo.
Una nuova interfaccia intuitiva
La vera bellezza degli effetti di scorrimento di Divi è la loro facilità d'uso! C'è una nuova interfaccia utente che semplifica il processo di creazione di animazioni web in modo che siano accessibili a tutti. Con un solo clic, puoi aggiungere o combinare uno dei sei effetti di scorrimento di Divi. Appena fuori dalla scatola, staranno benissimo! Quindi puoi mettere a punto gli effetti per creare animazioni ancora più avanzate.
Un clic e il gioco è fatto!
Vuoi aggiungere un effetto di scorrimento a un modulo? Un clic aggiungerà l'effetto e sarà anche fantastico! Per aggiungere un effetto di scorrimento, accedi semplicemente al nuovo gruppo di opzioni Effetti di scorrimento nella scheda Avanzate di qualsiasi modulo, riga, colonna o sezione. È possibile attivare più effetti contemporaneamente e gli effetti verranno combinati in un'unica animazione fluida che si trasforma magnificamente mentre scorri.
Vuoi il pieno controllo? lo avete !
Dopo aver abilitato un effetto di scorrimento, hai il pieno controllo sull'entità dell'effetto in ogni punto dell'animazione. Controllando i valori di inizio, medio e fine, tu controlli cosa fa animazione. Una volta impostati i valori, Divi si prende cura del resto e trasferirà l'elemento mentre si sposta nella finestra del browser, creando un'animazione.
- Valore iniziale - Lo stato dell'animazione iniziale utilizzata quando l'elemento entra nella parte inferiore della finestra del browser.
- Valore intermedio - Lo stato di animazione intermedio che verrà trasferito quando l'elemento si sposta al centro della finestra.
- Valore finale - Lo stato dell'animazione finale che si verifica quando l'elemento lascia la finestra del browser nella parte superiore dello schermo.
Ad esempio, un effetto di opacità con un valore iniziale di 0 (invisibile), un valore mediano di 100 (completamente visibile) e un valore finale di 0 (invisibile), cambierà da uno stato invisibile quando entra finestra finché non diventa visibile al 100% al centro della finestra, quindi scomparirà in uno stato invisibile quando si esce dalla finestra.
Regolazione della sequenza temporale dell'animazione
Non solo puoi regolare i valori dell'animazione, ma puoi anche regolare la sequenza temporale dell'animazione. L'interfaccia utente della sequenza temporale rappresenta l'altezza della finestra del browser. Ciascun fotogramma chiave di animazione può essere attivato in una posizione diversa nella finestra. Ciò consente di controllare l'inizio, la fine e la tempistica dell'animazione dell'animazione in base alla posizione dell'elemento animato nell'asse y della finestra del browser.
- Posizione del fotogramma chiave iniziale - Questa opzione controlla l'inizio dell'animazione. Se desideri ritardare l'animazione, trascina verso l'interno la posizione del fotogramma chiave iniziale.
- Posizione del fotogramma chiave centrale - Questo controlla il punto in cui l'animazione raggiunge il suo valore di animazione centrale. Non deve essere esattamente al centro della sequenza temporale dell'animazione. Puoi spostare il fotogramma chiave centrale in qualsiasi posizione nella finestra.
- Fine della posizione del fotogramma chiave - Questo controllo viene utilizzato per terminare l'animazione. Se desideri che l'animazione termini prima che il clip esca dalla finestra del browser, puoi trascinare la posizione del fotogramma chiave finale verso l'interno.
Aggiungi stati statici a qualsiasi animazione
Puoi anche aggiungere pause alle tue animazioni aumentando la durata del valore statico dell'effetto medio. Per creare una durata dell'animazione statica, fai clic sulle due frecce quando passi il mouse sopra il fotogramma chiave centrale. È quindi possibile estendere il fotogramma chiave centrale trascinandone i bordi avanti e indietro. Durante questo punto dell'animazione, l'elemento rimarrà statico. Al termine della durata statica, l'animazione continuerà a passare al valore finale.
Cosa ne pensate di queste nuove funzionalità? Non esitate a condividere le vostre opinioni nei commenti.
