Come creare una sovrapposizione di immagini con i disegni di animazione dell'otturatore del testo diviso in Divi

Le sovrapposizioni di immagini continuano a essere una risorsa di design popolare durante la visualizzazione delle immagini sul tuo sito web. Non solo offrono un modo creativo per mostrare le immagini, ma possono anche rendere la visualizzazione delle immagini più divertente e coinvolgente per i visitatori, soprattutto quando si aggiungono animazioni personalizzate quando si passa con il mouse o si fa clic sull'immagine.

In questo tutorial, ti mostreremo come creare una sovrapposizione di immagini con l'animazione dell'otturatore del testo diviso in Divi. Innanzitutto, ti mostreremo come creare la sovrapposizione di immagini personalizzate con persiane di testo divise. Quindi ti mostreremo come puoi utilizzare le opzioni di trasformazione integrate di Divi per creare i tre design di animazione dell'otturatore di sovrapposizione di immagini completamente unici. Ti mostreremo anche qualche altro esempio di design per far fluire quei succhi creativi.

Facciamo un salto e iniziamo!

Sbirciata

Ecco una rapida occhiata ai progetti di sovrapposizione di immagini di questo tutorial.

Ed ecco un codepen che dimostra lo stesso design utilizzato in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di animazione dell'otturatore con testo diviso in sovrapposizione di immagini di questo tutorial, devi prima scaricarli 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 i file

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.

SCARICA

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:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Parte 1: Costruire la sovrapposizione di immagini con gli otturatori di testo diviso

Per questa prima parte del tutorial, costruiremo la configurazione iniziale della sovrapposizione di immagini con le persiane di testo divise. Fatto ciò, possiamo aggiungere l'animazione alle persiane in un secondo momento.

La riga

Per iniziare, aggiungi una riga a due colonne alla sezione normale.

Prima di aggiungere moduli, apri le impostazioni della riga e aggiorna la larghezza della grondaia:

• Larghezza grondaia: 2

Aggiornamento della colonna

La colonna sarà il contenitore principale che conterrà la nostra immagine e gli elementi di sovrapposizione dell'otturatore. Sarà anche l'obiettivo principale che avvierà l'animazione dell'otturatore al passaggio del mouse. In altre parole, quando il cursore si sposta all'interno della colonna, l'animazione degli elementi figli (le tapparelle) si attiva e quando il cursore si sposta all'esterno della colonna, l'animazione si disattiva.

Per designare la nostra colonna come "colonna otturatore" e animarla in seguito "al passaggio del mouse", aggiungi le seguenti classi CSS alla colonna:

• Classe CSS: colonna otturatore al passaggio del mouse

Quindi aggiorna gli overflow a nascosti in modo che non vedremo gli elementi trasformati una volta che vanno oltre il contenitore della colonna durante l'animazione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiunta dell'immagine principale

All'interno della colonna 1, aggiungi un modulo immagine. Questa servirà come immagine principale che ci siederemo dietro la sovrapposizione dell'otturatore.

Carica un'immagine nel modulo immagine.

Quindi imposta l'allineamento dell'immagine al centro.

Creazione dell'otturatore superiore con testo diviso

Ora che la nostra immagine è a posto, aggiungeremo l'otturatore superiore usando un modulo di testo. Aggiungi un nuovo modulo di testo sotto l'immagine.

Aggiorna il contenuto del modulo di testo aggiungendo il testo "divi" nell'area del corpo.

Nella scheda Progettazione, aggiorna lo stile del testo come segue:

• Carattere del testo: Poppins
• Peso del carattere del testo: pesante
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 200px (desktop), 30vw (tablet e telefono)
• Spaziatura delle lettere del testo: -0.03em
• Altezza riga di testo: 0em
• Allineamento del testo: Centro

Successivamente, aggiorna le opzioni di dimensionamento e spaziatura:

• Larghezza: 100%
• Altezza: 50%
• Margine: 0px in basso

Nella scheda Avanzate, aggiorna quanto segue:

• Classe CSS: top-shutter

Useremo la classe CSS per attivare e disattivare l'animazione di trasformazione con il nostro codice in seguito.

Quindi aggiungi questo CSS personalizzato all'elemento principale:

display:flex;
align-items:flex-end;
justify-content:center;

Questo codice utilizza flex per assicurarsi che il testo sia allineato verticalmente nella parte inferiore del modulo. Poiché il testo ha un'altezza di riga pari a 0, il testo verrà mostrato come diviso mostrando solo la metà superiore.

Per posizionare il nostro otturatore in alto, dobbiamo prima nascondere l'overflow del testo e poi dargli una posizione assoluta come segue:

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto
• Posizione: Assoluta

Questo sposterà l'otturatore sulla metà superiore dell'immagine.

Creazione dell'otturatore inferiore con corrispondenza del testo diviso

Ora che abbiamo completato l'otturatore superiore, possiamo avviare la creazione dell'otturatore inferiore duplicando il modulo di testo dell'otturatore superiore.

Quindi apri il modulo di testo duplicato e aggiorna quanto segue:

• Classe CSS: top-shutter

Aggiorna il CSS dell'elemento principale sostituendo "flex-end" con "flex-start" per la proprietà align-items. Ecco il CSS finale:

display:flex;
align-items:flex-start;
justify-content:center;

Con "flex-start" il testo è allineato verticalmente nella parte superiore del modulo. E poiché il testo ha un'altezza di riga pari a 0, il testo verrà mostrato come diviso mostrando solo la metà inferiore.

Quindi aggiornare la posizione assoluta con un offset verticale come segue:

• Scostamento verticale: 50%

Questo porta il modulo di testo dell'otturatore a sedersi sopra la metà inferiore dell'immagine.

Il testo diviso su entrambe le persiane dovrebbe ora essere allineato come una corrispondenza perfetta.

A questo punto, abbiamo creato con successo la configurazione per la nostra sovrapposizione di immagini con otturatore con testo diviso. Questo è costituito dalla colonna dell'otturatore come contenitore, l'immagine principale, l'otturatore superiore che si trova nella metà superiore dell'immagine e l'otturatore inferiore che si trova nella metà inferiore dell'immagine.

Lo useremo come una sorta di modello di partenza per i prossimi esempi che includeranno le animazioni dell'effetto otturatore utilizzando le proprietà di trasformazione.

Parte 2: Il Codice

Per aggiungere la funzionalità dell'animazione dell'otturatore, abbiamo bisogno di alcuni frammenti di CSS e JS utilizzando un modulo Codice.

Aggiungi un nuovo modulo di codice alla pagina. Possiamo aggiungerlo alla colonna di destra della primissima sezione in alto che abbiamo usato per la nostra build iniziale di overlay.

Il CSS

Incolla il seguente CSS nella casella del codice assicurandoti di avvolgerlo con i tag di stile necessari:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Questo CSS è davvero semplice. Non fa altro che applicare transform: none alle persiane all'interno della colonna con la classe “divi-transform-none”. Questa classe verrà attivata e disattivata con JS per creare l'animazione. La transizione: trasformazione 1s imposta semplicemente la durata della transizione (o animazione) per durare 1 secondo.

il JS

Dopo il CSS, aggiungi il seguente JQuery alla casella del codice assicurandoti di avvolgerlo con i tag di script necessari:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

La prima parte del codice aggiunge la funzionalità che alterna le animazioni di trasformazione dell'otturatore al passaggio del mouse ogni volta che una colonna ha le classi "otturatore-colonna al passaggio del mouse divi-transform-none".

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

La seconda parte del codice aggiunge la funzionalità che alterna le animazioni di trasformazione dell'otturatore al clic ogni volta che una colonna ha le classi "otturatore-colonna al clic divi-trasformazione-none".

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Parte 3: Disegni di animazione dell'otturatore con testo diviso

Design #1

Per creare il nostro primo progetto di animazione dell'otturatore, avvieremo il processo di progettazione duplicando la prima sezione. Questo ci darà una nuova sezione con una sovrapposizione di immagini precostruita con le persiane di testo divise pronte per l'uso.

Aggiungi proprietà di trasformazione all'otturatore superiore

Normalmente, quando usi CSS per animare qualcosa con proprietà di trasformazione, l'elemento inizialmente non avrebbe uno stile di trasformazione, quindi lo stile di trasformazione verrebbe applicato ogni volta che l'utente passa con il mouse o fa clic sull'elemento. In Divi, capovolgeremo il processo e inizieremo aggiungendo lo stile di trasformazione all'elemento utilizzando prima Divi Builder. Questo ci consente di utilizzare le opzioni di trasformazione integrate durante la modifica visiva del design. Quindi, una volta terminata l'aggiunta di tutti gli elementi del progetto di trasformazione, possiamo inizialmente disabilitarli (utilizzando una classe CSS) e quindi attivarli e disattivarli quando l'utente interagisce con l'overlay.

Per aggiungere il design di trasformazione all'otturatore superiore, apri le impostazioni del modulo di testo dell'otturatore superiore e aggiorna quanto segue:

• Scala di trasformazione (X e Y): 150%
• Trasforma Trasla asse Y: -101%
• Trasforma origine: in alto al centro

Se l'hai fatto bene, l'otturatore superiore non sarà più visibile, che è quello che vogliamo perché vogliamo che l'intera immagine principale venga esposta dopo la transizione dell'animazione.

Aggiungi proprietà di trasformazione all'otturatore inferiore

Per l'otturatore inferiore, aggiorna le seguenti opzioni di progettazione di trasformazione:

• Scala di trasformazione (X e Y): 150%
• Trasforma Trasla asse Y: 101%
• Trasforma Origine: in basso al centro

Aggiungi una classe per disabilitare inizialmente i progetti di trasformazione

Come ho detto prima, una volta che abbiamo finito di aggiungere i progetti di trasformazione necessari per la nostra animazione dell'otturatore, possiamo disabilitare inizialmente quei progetti di trasformazione aggiungendo una classe CSS.

A causa del codice CSS personalizzato che abbiamo aggiunto in precedenza, il design apparirà senza alcun design di trasformazione in atto.

Aggiungi funzionalità al clic con una singola classe

Per ottenere la stessa animazione attivata al clic anziché al passaggio del mouse, tutto ciò che dobbiamo fare è sostituire una singola classe nella colonna.

Innanzitutto, duplica la colonna 1 con il nostro primo esempio funzionante al passaggio del mouse. Quindi eliminare la colonna vuota. Ora dovresti avere due colonne identiche con le stesse classi e contenuto.

Apri le impostazioni per la colonna 2 e sostituisci la classe "al passaggio del mouse" con la classe "al clic". Ecco quali dovrebbero essere le ultime tre classi:

• Classe CSS: shutter-column on-click divi-transform-none

Risultato

Inversione dell'animazione dell'otturatore al passaggio del mouse

Se vuoi che l'immagine principale venga visualizzata inizialmente scoperta e poi aggiungi la sovrapposizione quando passi con il mouse sull'immagine (il contrario di come funziona ora), puoi rimuovere la classe "divi-transform-none" nella colonna utilizzata per l'otturatore . Questo ti darà il seguente effetto.

Disegno #2

Per creare la seconda animazione dell'otturatore, possiamo duplicare la sezione precedente con la nostra prima animazione dell'otturatore.

Aggiorna persiane

Quindi utilizzare la selezione multipla per selezionare i moduli di testo dell'otturatore superiore e dell'otturatore inferiore. Quindi apri le impostazioni dell'elemento per entrambi e aggiorna quanto segue:

• Sfondo: #ffffff
• Colore del testo del testo: #000000
• Modalità di fusione: schermo

Risultato

Disegno #3

Per creare il terzo disegno di sovrapposizione dell'immagine di animazione dell'otturatore, duplica la sezione precedente.

Aggiungi nuova immagine

Quindi aggiorna il modulo immagine con una nuova immagine.

Aggiorna persiane

Utilizzare la selezione multipla per selezionare entrambi i moduli di testo dell'otturatore superiore e inferiore e aprire le impostazioni dell'elemento per entrambi per aggiornare quanto segue:

• Contenuto del corpo: d

• Sfondo: rgba(0,0,0,0,9)
• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 450px (desktop), 70vw (tablet e telefono)
• Modalità di fusione: Moltiplica

Apri le impostazioni del modulo di testo dell'otturatore superiore e aggiorna le seguenti opzioni di trasformazione:

• Scala di trasformazione (X e Y): 100% (predefinito)
• Trasforma Trasla asse Y: -101%
• Trasforma Ruota asse Z: -45°
• Origine della trasformazione: in alto a sinistra

Quindi aggiorna le impostazioni del modulo di testo dell'otturatore inferiore e aggiorna le seguenti opzioni di trasformazione:

• Scala di trasformazione (X e Y): 100% (predefinito)
• Trasforma Trasla asse Y: 101%
• Trasforma Ruota asse Z: -45°
• Origine della trasformazione: in basso a destra

Risultato

Altri esempi e possibilità

Qui un paio di altri progetti di esempio che utilizzano le stesse tecniche.

Eccone uno simile al design n. 2 ma senza la scala di trasformazione sulle persiane. Mostra anche come funziona ancora l'effetto lightbox sull'immagine.

Ed ecco un altro esempio che usa la trasformazione trasla per far scorrere le persiane orizzontalmente.

Risultati finali

Pensieri finali

La creazione di sovrapposizioni di immagini con animazioni con otturatore di testo diviso in Divi può essere un approccio efficace per far risaltare le tue immagini e coinvolgere i visitatori in un modo nuovo.

Si spera che questo stimolerà la tua creatività per aggiungere i tuoi design e trasformare gli effetti di animazione usando diversi colori, caratteri, modalità di fusione, ecc. Le possibilità sembrano infinite.

Non vedo l'ora di sentirti nei commenti.

Saluti!