Come aggiungere un'animazione sbalorditiva della griglia a una galleria di immagini in Divi
Pubblicato: 2021-06-11Il modulo galleria di immagini di Divi continua ad essere uno strumento comodo e utile per creare splendide gallerie di immagini per il tuo sito. Le impostazioni di progettazione integrate ti consentono di ottenere tutte le necessità e altro ancora. Ma, in questo tutorial, porteremo il design della galleria di immagini a un nuovo livello con un effetto di animazione sbalorditivo unico. Usando una combinazione delle opzioni di design integrate di Divi anime.js, questa animazione sbalorditiva assomiglia a un tipo di effetto a catena che svela ogni immagine all'interno della galleria una dopo l'altra con un'animazione di design fluida. Questo sarà perfetto per quelli di voi che cercano una presentazione unica della vostra galleria per i visitatori e una transizione impressionante durante la navigazione attraverso ogni pagina della galleria.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Ed ecco un codepen che dimostra lo stesso concetto.
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 della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come aggiungere un'animazione sbalorditiva a una galleria di immagini Divi
Parte 1: Progettazione del layout della pagina della galleria
La sezione
Per iniziare, apri le impostazioni per la sezione esistente e assegnagli un gradiente di sfondo come segue:
- Colore sfondo sfumato sinistro: # d915b5
- Colore di sfondo sfumato a destra: #000000
- Posizione di partenza: 50%
- Posizione finale: 25%
Nella scheda Design, aggiorna l'imbottitura:
- Imbottitura: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra
Nella scheda Avanzate, aggiorna quanto segue:
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
La riga per il titolo della pagina
All'interno della sezione, aggiungi una riga a una colonna. Questo manterrà il titolo della nostra pagina.
Apri le impostazioni della riga e aggiorna il riempimento:
- Imbottitura: 15px in alto, 15px in basso
Il modulo del testo del titolo
Per creare il titolo della pagina, aggiungi un modulo di testo alla riga/colonna.
Quindi aggiorna il contenuto del corpo con la seguente intestazione H1:
<h1>Gallery</h1>
Sotto le impostazioni di progettazione del testo, aggiorna quanto segue:
- Carattere dell'intestazione: Poppins
- Allineamento del testo dell'intestazione: centro
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 100 px (desktop), 80 px (tablet), 60 px (telefono)
La fila per il modulo Galleria
Nella stessa sezione, crea una nuova riga a una colonna che conterrà il modulo galleria.
Apri le impostazioni della riga e assegnagli uno sfondo nero:
- Colore di sfondo: #000000
Nelle impostazioni di progettazione, aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 1
- Larghezza: 95%
- Altezza minima: 80vh
- Imbottitura: 0px in alto, 0px in basso
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Posizione orizzontale dell'ombra del riquadro: 0px
- Forza di diffusione dell'ombra della scatola: 70 px
- Colore ombra: #000000
Parte 2: Progettazione del modulo Galleria
Infine, siamo pronti per aggiungere e progettare il modulo della galleria. Per creare la galleria, aggiungi un nuovo modulo galleria alla riga.
Le immagini
Nella scheda contenuto delle impostazioni della Galleria, aggiungi le immagini che desideri utilizzare per la galleria. Per questo esempio, aggiungeremo 65 immagini (o almeno più di 25). Questo ci darà un buon numero di elementi della galleria per mostrare il nostro incredibile effetto di animazione e impaginazione.
Una volta caricate le immagini nella galleria, aggiorna quanto segue:
- Conteggio immagini: 25
- Mostra titolo e didascalia: NO
- Mostra impaginazione: SI
NOTA: l'impostazione del conteggio delle immagini su "25" definisce il numero di immagini che verranno visualizzate per pagina quando si fa clic sui collegamenti di impaginazione. L'incredibile animazione della griglia che aggiungeremo con il codice personalizzato si basa sulla galleria di immagini con 5 righe di 5 immagini (25 immagini) per pagina. Per ottenere i migliori risultati, assicurati di avere almeno 25 immagini e il conteggio delle immagini impostato su 25.
Overlay e impaginazione Design
Nella scheda Design, aggiorna il design dell'overlay:
- Colore icona sovrapposizione: #ffffff
- Colore di sfondo della sovrapposizione: rgba (217,21,181,0,55)
- Icona in sovrimpressione: icona più (vedi screenshot)
- Allineamento del testo dell'impaginazione: Centro
- Dimensione del testo di impaginazione: 2em
- Altezza riga di impaginazione: 2em
- Imbottitura: 10px in alto, 10px in basso, 5px a sinistra, 5px a destra
Stile avanzato
Successivamente, aggiungeremo uno stile avanzato al modulo della galleria. Il motivo principale per farlo è controllare il numero di immagini visualizzate per riga su dispositivi diversi.
Innanzitutto, aggiungiamo alcuni CSS all'elemento della galleria come segue:
CSS elemento galleria (desktop)
animation: fadeLeft 0s !important; background: #000000; padding: 10px; width: 20% !important; margin: 0 !important; clear: none !important;
CSS elemento galleria (tablet)
animation: fadeLeft 0s !important; background: #000000; padding: 5px; width: 25% !important; margin: 0 !important; clear: none !important;
CSS elemento galleria (telefono)
animation: fadeLeft 0s !important; background: #000000; padding: 5px; width: 50% !important; margin: 0 !important; clear: none !important
Nota che la larghezza di ogni elemento della galleria cambia su ogni dispositivo. La larghezza del 20% sul desktop creerà 5 immagini per riga. La larghezza del 25% sul tablet creerà 4 immagini per riga. E la larghezza del 50% sul telefono creerà 2 immagini per riga.
Quindi, elimina il bordo dell'impaginazione ma aggiungendo il seguente CSS alla casella Impaginazione galleria:
border-top: 0px !important; padding-top: 20px;
Infine, aggiungi un colore e uno spessore del carattere personalizzati al link di impaginazione attivo:
color: #d915b5 !important; font-weight: bold;
Prima di salvarlo, assicurati di aggiungere la seguente classe CSS al modulo Galleria:
- Classe CSS: et-anime-gallery
Parte 3: aggiunta dell'effetto di animazione sbalorditiva alla galleria con JQuery e Anime.js
Ora che il design è completo, abbiamo un layout di galleria di immagini semplice e professionale. Tutto ciò che dobbiamo fare è aggiungere il codice necessario per creare l'animazione sbalorditiva nella galleria di immagini.
Per fare ciò, aggiungi un modulo di codice sotto il modulo della galleria.
Il CSS
Nella casella del contenuto del codice, incolla il seguente CSS assicurandoti di racchiudere il CSS nei tag di stile necessari:
/*hide prev and next pagination links*/
.et-anime-gallery li.prev, .et-anime-gallery li.next {
display:none !important;
}
La libreria Anime.js
Sotto il tag di stile finale, incolla il seguente src con un tag di script per chiamare la libreria anime.js in modo che possiamo usarlo per il nostro JavaScript/Jquery sotto di esso.
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
Lo script dovrebbe assomigliare a questo...
Il JQuery
Sotto lo script che sta chiamando la libreria anime.js, incolla il seguente JQuery e avvolgilo con i tag di script necessari.
jQuery(function ($) {
$(document).ready(function () {
var fromCenter = "center";
var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
//animate gallery on page load
animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);
//animate gallery when clicking pagination number link
$($paginationLink).click(function (e) {
var pageNum = $(e.target).attr("data-page");
var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
});
function animateGalleryFunction(targetItem, targetImage, stagFrom) {
//animate gallery image
anime({
targets: targetImage,
opacity: [0, 1],
rotateX: [0, 360],
scale: [0.5, 1],
direction: "normal",
easing: "easeInOutSine",
duration: 600,
delay: anime.stagger(
200,
{ grid: [5, 5], from: stagFrom },
{ start: "100" }
),
});
//animate gallery item background
anime({
targets: targetItem,
background: ["#000", "#d915b5", "#000"],
direction: "normal",
easing: "easeInOutSine",
duration: 600,
delay: anime.stagger(
250,
{ grid: [5, 5], from: stagFrom },
{ start: "100" }
),
});
}
});
});
Risultato finale
Aggiornamento della galleria e del codice
Ci sono alcuni suggerimenti da tenere a mente ogni volta che desideri apportare modifiche alla galleria e agli effetti di animazione per adattarli al tuo sito. Innanzitutto, se desideri modificare il conteggio delle immagini della galleria in qualcosa di diverso da 25, dovrai aggiornare il codice in modo che rifletta quel nuovo valore. Ad esempio, se lo cambi in 20, dovrai anche cambiare i numeri nella seguente variabile:
var fromNum = pageNum*25-25;
a questa…
var fromNum = pageNum*20-20;
Potrebbe anche essere necessario aggiornare il valore griglia della proprietà delay su entrambe le animazioni. Ad esempio, se hai solo 20 immagini per pagina sul desktop, avrai solo 4 righe di 5. Pertanto dovrai modificare il seguente valore:
grid: [5, 5]
a questa…
grid: [4, 5]
Inoltre, è possibile modificare i valori delle proprietà dell'animazione in base alle esigenze. Ad esempio, se desideri modificare i colori dell'animazione di sfondo dell'elemento della galleria, puoi aggiornare quanto segue:
background: ["#000", "#d915b5", "#000"]
a questa…
background: ["#000", "#ffffff", "#000"]
Questo cambierà il colore di sfondo rosa in bianco durante l'animazione.
Pensieri finali
Una volta che tutto il design è stato completato utilizzando Divi builder, l'aggiunta di animazioni sbalorditive alla tua galleria di immagini può essere un ottimo modo per portare il design al livello successivo. La chiave dell'animazione è sfruttare la potenza della libreria anime.js per indirizzare le immagini e gli sfondi per eseguire più animazioni. Sentiti libero di saperne di più sullo scaglionamento della griglia con Anime.js sul loro sito web. Sentiti libero di regolare le proprietà e i valori del codice per aggiungere il tuo riflesso al design.
Non vedo l'ora di sentirti nei commenti.
Saluti!