Come combinare animazioni e parallasse in Divi per design unici
Pubblicato: 2019-08-07Sia che stiamo preparando un pasto o progettando un sito web, gli ingredienti da soli non garantiranno un piatto gustoso o un bel sito. È il modo in cui combiniamo questi elementi che fa la differenza. In questo tutorial, ti mostrerò come combinare animazione e parallasse di immagini in un modo che potresti non aver mai considerato prima. Se non lo sai già, l'animazione è una funzione Divi incorporata che può essere aggiunta a qualsiasi elemento Divi al caricamento della pagina. Parallax è anche un'opzione Divi che ti consente di aggiungere un movimento unico alle tue immagini di sfondo sullo scorrimento.
Oggi utilizzeremo le impostazioni di progettazione integrate di Divi per combinare animazioni e parallasse in tutti i modi creativi. La combinazione funziona in modo abbastanza magico per creare un bellissimo layout di immagini di parallasse animate che sembrano fantastiche mentre scorri la pagina.
Iniziamo!
Sbirciata
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi. Puoi trovare le immagini utilizzate per questo tutorial nel Life Coach Divi Layout Pack.
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
L'idea di base
L'idea alla base di questo concetto di design è incentrata sull'uso della parallasse CSS sulle immagini di sfondo. A causa del modo in cui funziona la parallasse CSS, l'immagine della parallasse rimarrà fissa e riempirà automaticamente la finestra del browser indipendentemente dalle dimensioni dell'elemento che la utilizza. La natura fissa dell'immagine consente di utilizzare la stessa immagine di parallasse su più elementi in Divi e quindi spostare tali elementi utilizzando l'animazione. Quando l'animazione si stabilizza, le immagini di sfondo di parallasse utilizzate corrisponderanno e funzioneranno come previsto durante lo scorrimento della pagina.
Parte 1: Creazione dell'animazione Divi e del design Parallax (versione 1)
Crea una nuova sezione con una riga a due colonne (1/2 1/2).
Prima di aggiungere i nostri moduli, apportiamo alcune modifiche alla sezione e alla riga.
Aggiorna le impostazioni di sezione e riga
Innanzitutto, apri le impostazioni della sezione ed elimina il riempimento predefinito come segue:
Imbottitura: 0px in alto, 0px in basso
Quindi apri le impostazioni della riga e dai alla riga un'immagine di sfondo parallasse.
Immagine di sfondo: [carica immagine]
Usa effetto parallasse: S
Metodo di parallasse: CSS
Qui il metodo di parallasse deve essere impostato su CSS affinché il design funzioni.
Larghezza: 100%
Larghezza massima: 100%
Imbottitura: 10vw superiore, 10vw sinistra, 10vw destra
Aggiungi il modulo di testo con lo sfondo di parallasse corrispondente
Ora siamo pronti per iniziare ad aggiungere i nostri moduli di testo al design. Il primo modulo di testo è la chiave di questo progetto. Applicando la stessa identica immagine di sfondo e parallasse css al modulo di testo, possiamo essere creativi con l'animazione per un effetto completamente unico.
Vai avanti e aggiungi un nuovo modulo di testo alla colonna 1.
Quindi aggiorna le impostazioni del modulo di testo come segue:
Contenuto del corpo:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Quindi dai al modulo di testo la stessa immagine di sfondo parallasse css che hai aggiunto alla riga.
Immagine di sfondo: [carica immagine]
Usa effetto parallasse: S
Metodo di parallasse: CSS
Carattere del testo: Fira Sans
Peso del carattere del testo: leggero
Colore del testo del testo: #ffffff
Dimensione del testo del testo: 70px
Altezza riga di testo: 1em
Stile carattere collegamento: sottolineato (U)
Colore del testo del collegamento: #ffffff (predefinito), #881e67 (al passaggio del mouse)
Dimensione del testo del collegamento: 30px
Spaziatura delle lettere del collegamento: 2px
Imbottitura: 20% in alto, 20% in basso, 10% a sinistra, 10% a destra
Larghezza bordo: 20px
Colore bordo: #ffffff
Quindi aggiungendo la seguente animazione al modulo di testo:
Stile di animazione: diapositiva
Direzione dell'animazione: destra
Durata dell'animazione: 1500 ms
Intensità animazione: 80%
Opacità iniziale dell'animazione: 20%
Diamo un'occhiata all'effetto fino ad ora...
Nota come l'immagine di sfondo del modulo di testo animato si ferma sulla posizione corrispondente dello sfondo della riga. Questo perché entrambi condividono la stessa immagine di sfondo con l'effetto di parallasse css.
Aggiunta del secondo modulo di testo con un'immagine di sfondo True Parallax
A questo punto siamo pronti per aggiungere il nostro prossimo modulo di testo. Il prossimo avrà un'immagine di sfondo diversa usando il vero effetto di parallasse. Daremo anche un po' di animazione.
Aggiungi un nuovo modulo di testo alla colonna 2.
Quindi aggiorna il contenuto del corpo con la parola "il mio blog".
Quindi aggiungi un'immagine di sfondo con il metodo della vera parallasse.
Immagine di sfondo: [carica immagine]
Usa effetto parallasse: S
Metodo di parallasse: vero parallasse
Carattere del testo: Fira Mono
Stile del carattere del testo: TT
Testo Allineamento del testo: centro
Colore del testo del testo: #ffffff
Spaziatura delle lettere del testo: 10px
Larghezza: 320 px
Larghezza massima: 320 px
Allineamento del modulo: Centro
Margine: (desktop): -5vw in alto, 4vw in basso
Margine (tablet e telefono): 3vw in alto
Imbottitura: 70px in alto, 70px in basso
Larghezza bordo: 20px
Colore bordo: #ffffff
Stile di animazione: diapositiva
Direzione dell'animazione: verso il basso
Ritardo animazione: 200 ms
Creazione del terzo modulo di testo con una nuova immagine di sfondo parallasse
Per creare il terzo modulo di testo, duplica il modulo di testo appena creato nella colonna 2.
Quindi manterremo la stessa immagine di sfondo ma aggiorneremo l'effetto di parallasse con il metodo di parallasse CSS.
Larghezza: 240 px
Larghezza massima: 240 px
Allineamento del modulo: a sinistra
Margine: 0px in basso
Imbottitura: 170 px in alto, 170 px in basso, 95 px a sinistra, 95 px a destra
La larghezza personalizzata e l'imbottitura destra e sinistra vengono utilizzate per creare il display di testo verticale che si sposa bene con il design del modulo più lungo.
Quindi aggiorna la direzione dell'animazione in alto anziché in basso.
Direzione dell'animazione: SU
Risultato finale
Ora diamo un'occhiata al risultato finale.
Parte 2: Creazione dell'animazione e del design del parallasse (versione 2)
Questo prossimo progetto aggiungerà un'animazione unica caricando l'immagine di sfondo parallasse per la riga dopo l'animazione iniziale dei moduli. Per fare ciò dovremo utilizzare una riga separata esclusivamente per l'immagine di sfondo parallasse CSS che si sposterà dietro il contenuto. E poiché inizialmente avremo lo sfondo della nostra sezione esposto, possiamo aggiungere un colore di sfondo personalizzato per il nostro contenuto prima dell'animazione della riga.
Ecco come farlo.
Innanzitutto, distribuisci la modalità di visualizzazione wireframe. Quindi duplica la riga contenente i tuoi moduli di testo. Ora avrai due righe identiche. Quindi, elimina i moduli di testo all'interno della riga superiore. Tutto quello che volevamo davvero fare era ottenere un vantaggio sul design della nostra fila superiore.
Successivamente, aggiorna le impostazioni per la riga superiore come segue:
Altezza: 900 px (desktop), 2000 px (tablet e telefono)
Imbottitura: 0px in alto, 0px in basso
Stile di animazione: diapositiva
Direzione dell'animazione: destra
Durata dell'animazione: 1250 ms
Ritardo animazione: 1800 ms
Diamo alla riga un'altezza impostata perché la riga vuota non avrà altezza per impostazione predefinita. Quindi devi assicurarti che l'altezza della riga sia sufficiente per coprire il contenuto della tua seconda riga con il contenuto. Abbiamo anche dato alla riga un'animazione con un ritardo in modo che scivoli dietro il contenuto dopo la visualizzazione dei moduli di testo.
Sovrapposizione delle due righe
Ora tutto ciò che dobbiamo fare è portare la riga inferiore verso l'alto usando il margine negativo in modo che si sovrapponga alla riga superiore con la nostra animazione di sfondo.
Apri le impostazioni per la riga inferiore e aggiorna il margine come segue:
Margine: -900 px superiore (desktop), -2000 px (tablet e telefono)
Quindi estrai l'immagine di sfondo con il metodo css parallax per la riga poiché utilizzeremo invece l'immagine di sfondo della riga superiore.
Ecco il design finora. Notare l'animazione di sfondo ritardata nella prima riga e come lo sfondo di parallasse per il modulo di testo nella colonna 1 corrisponda perfettamente.
Aggiungere un colore di sfondo alla sezione
Per dare ai moduli di testo un colore di sfondo iniziale prima dell'animazione della riga, puoi dare un colore di sfondo alla sezione.
Apri le impostazioni della sezione e aggiungi quanto segue:
Colore sfondo sfumato sinistro: rgba (136,30,103,0.61)
Colore di sfondo sfumato a destra: #881e67
Tipo di gradiente: radiale
Risultato finale
Ora diamo un'occhiata al risultato finale.
Modalità di fusione opzionale e combinazione di animazione
Puoi anche diventare ancora più creativo aggiungendo una modalità di fusione alla seconda riga e aggiungendo un'animazione di zoom che funzionerà in tandem con le animazioni del modulo.
Modalità di fusione: Luminosità
Stile di animazione: Zoom
Questo è il risultato finale.
Ed ecco come appare sui dispositivi mobili.
Pensieri finali
Spero che tu abbia imparato alcune cose lungo la strada mentre esploravamo alcuni modi unici per combinare animazioni e immagini di parallasse. I risultati sono decisamente unici e sono sicuro che puoi facilmente modificare questa configurazione per creare innumerevoli altre combinazioni che sembreranno sbalorditive nel tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!