Come creare un'animazione dell'immagine dell'otturatore di testo diviso su Divi

Image Overlay è un mezzo molto creativo per offrire un'esperienza visiva attraente ai visitatori del sito Web. Animazioni personalizzate ed effetti in bilico sono un ottimo modo per mostrare un'immagine ed è molto popolare tra tutti in questi giorni. Nel tutorial di oggi, vedremo come creare bellissime sovrapposizioni di immagini con animazione di testo diviso fino a Divi.

Abbiamo diviso il tutorial di oggi in tre parti. Nella prima parte, vedremo come creare una sovrapposizione di immagini personalizzata e nella parte successiva aggiungeremo del codice nella progettazione. Infine, vedremo come creare un design unico per la sovrapposizione di immagini utilizzando l'opzione integrata di Divi.

Iniziamo senza indugio.

Anteprima

Prima di iniziare il tutorial di oggi, dai un'occhiata al nostro design che impareremo oggi.

Prima di iniziare

Divi è un ottimo tema WordPress che offre funzionalità impressionanti e serve al vero scopo di un tema WordPress multifunzione. Il suo generatore di pagine facile da usare ha molte funzionalità che possono creare design fantastici. Ottenere il tema e attivarlo dopo l'installazione.

Crea una nuova pagina dal dashboard di WordPress e apri la pagina per la modifica con il generatore Divi. Scegli "Costruisci da zero" e siamo pronti a lavorare!

Sezione 1: Costruire il progetto

Abbiamo accennato in precedenza che avremmo creato la struttura del nostro design nella prima parte. Non appena avremo finito con la configurazione della sovrapposizione dell'immagine con persiane di testo divise, caricheremo l'animazione sulla parte successiva.

Aggiungi: Riga 1

Impostazioni riga

Aggiungere una riga regolare a 2 colonne nella sezione e, prima di aggiungere altri moduli, modificare le impostazioni seguenti.

• Larghezza grondaia: 2

Impostazioni colonna

Le colonne conterrà le nostre immagini e gli elementi di sovrapposizione dell'otturatore, quindi questo sarà il nostro contenitore principale. Inoltre, questa colonna avvierà gli effetti al passaggio del mouse dell'animazione dell'otturatore. Semplicemente, quando un mouse entra in questa colonna, l'intera animazione inizierà e, non appena il mouse è fuori, tornerà allo stato precedente.

Aggiungere la classe CSS alla colonna per selezionare la colonna come "colonna dell'otturatore" e per animarla in un secondo momento "al passaggio del mouse".

• Classe CSS: colonna dell'otturatore al passaggio del mouse

Apportare anche le seguenti regolazioni.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi: Modulo immagine

Ora aggiungeremo la nostra immagine principale che si siederà dietro la sovrapposizione dell'otturatore con un modulo immagine.

A questo punto apportare una leggera modifica all'allineamento nella scheda progettazione.

• Allineamento immagine: Centro

Creazione di un testo diviso dell'otturatore superiore

Man mano che la nostra immagine è posizionata, aggiungeremo un modulo di testo sotto il modulo immagine per aggiungere un otturatore superiore.

Aggiorna Il modulo di testo con un testo.

Aprire la scheda progettazione, apportare queste regolazioni.

• Tipo di carattere testo: Poppins
• Spessore carattere testo: pesante
• Stile carattere testo: TT
• Colore testo testo: #ffffff
• Dimensioni testo testo: 150px (desktop), 20vw (tablet e telefono)
• Spaziatura lettere di testo: -0.03em
• Altezza riga di testo: 0em
• Allineamento testo: Centro

Aggiornare ora le impostazioni di ridimensionamento e spaziatura.

• Larghezza: 100%
• Altezza: 50%
• Margine: 0px inferiore

Ora aggiungi la seguente classe CSS nella scheda avanzata.

• Classe CSS: otturatore superiore

Successivamente, useremo la classe per attivare e disattivare l'animazione di trasformazione con codice personalizzato. Quindi, aggiungi questo codice CSS all'elemento principale.

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

Per mettere in posizione il nostro testo, dobbiamo apportare queste modifiche.

Creazione di un testo diviso dell'otturatore inferiore

Poiché il testo diviso dell'otturatore superiore è stato eseguito, duplicare il modulo di testo per creare un testo diviso dell'otturatore inferiore. Non è necessario aggiungere alcuna classe CSS; come abbiamo appena clonato il modulo precedente, la classe CSS è già lì. Ma dobbiamo apportare alcune modifiche al codice CSS sull'elemento principale.

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

Riferimento a "flex-start", il testo è allineato verticalmente nella parte superiore del modulo. Nel modulo di testo precedente, abbiamo impostato l'altezza della linea a 0, Quindi la metà inferiore dell'intero testo sarà visibile.

Aggiungete una posizione assoluta con un offset verticale.

• Offset verticale: 50%

Ora, abbiamo realizzato con successo la struttura del nostro tutorial di oggi in cui faremo animazione con la codifica nella parte successiva. Rinominamo i moduli per una migliore comprensione futura.

Sezione 2: Il codice

Per ottenere un effetto di animazione dell'otturatore sulla nostra struttura, abbiamo bisogno di un codice CSS e JS. Useremo un modulo Codice per questo. Aggiungere il modulo di codice nella parte superiore della colonna destra.

Il codice CSS

Incollare il codice CSS seguente all'interno di un tag di stile.

/* 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;
}

Il codice JS

Aggiungere quindi il codice JQuery seguente all'interno di un tag script.

(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);

Sezione 3: Progettazione animazione otturatore di testo diviso

Ora duplicheremo la prima sezione del nostro design per creare la nostra prima animazione dell'otturatore.

Aggiungi: Proprietà trasformazione otturatore superiore

Di solito, quando animamo qualcosa usando proprietà di trasformazione CSS, all'inizio non esiste uno stile di trasformazione per quell'elemento. Quindi, dopo aver sorvolato l'elemento, possiamo vedere quello stile. In Divi, invertiremo l'intero processo. Trasformeremo prima quell'elemento usando Divi Builder. Il vantaggio di questo è che possiamo modificare tutto visivamente. Quindi, al termine dello stile, inizialmente lo disabiliteremo usando una classe CSS. Quindi attivarlo e disattivarlo quando l'utente interagisce con la sovrapposizione.

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

• Scala di trasformazione (X e Y): 150%
• Trasforma traduci asse Y: -101%
• Transform Origin: centro superiore

Se modifichi tutto correttamente, il testo dell'otturatore superiore non sarà più visibile perché vogliamo che l'intera immagine venga esposta dopo la transizione di animazione.

Aggiungi: Proprietà trasformazione otturatore inferiore

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

• Scala di trasformazione (X e Y): 150%
• Trasforma l'asse Y di traduci: 101%
• Trasforma origine: in basso al centro

Aggiungi: classe CSS per disabilitare la proprietà Transform (inizialmente)

Sappiamo già che dopo aver progettato le proprietà di trasformazione per l'animazione dell'otturatore, disabiliteremo i progetti di trasformazione utilizzando una piccola classe CSS. A causa del codice CSS personalizzato che abbiamo aggiunto in precedenza, il design apparirà senza alcun design di trasformazione in atto.

Aggiungi: On- Fare clic su Funzionalità

La nostra prima animazione era sull'effetto hover. Quindi, il passaggio del mouse attiverebbe effettivamente l'animazione con il cursore del mouse sull'immagine e sul testo. Ora vedremo come possiamo farlo con il clic del mouse senza passare il mouse. Molto semplice, ometteremo il comando "on-hover" e aggiungeremo il comando "on-click" alla sezione.

• Classe CSS: divi-transform-none della colonna dell'otturatore su clic

Quindi il design sarà così.

Inversione dell'animazione

Ora, se vogliamo, possiamo fare un'animazione in cui l'intera immagine rimarrà esposta e il testo arriverà quando aleggieremo - il che significa esattamente il contrario di quello che abbiamo ora. Possiamo ottenere facilmente tali animazioni rimuovendo la classe CSS "divi-transform-none".

Un altro design

Qui abbiamo un altro design.

Aggiornare le persiane

Selezionare i moduli di testo superiore e inferiore da ogni modello di otturatore. Aprire quindi le impostazioni dell'elemento per entrambi e aggiornare quanto segue:

• Contesto: #ffffff
• Colore testo testo: #000000
• Modalità blend: schermo

Progettazione finale

Il nostro design finale sarà così.

Conclusione

Qualsiasi design, incluso il design dell'otturatore a testo diviso, può essere eseguito molto facilmente fino al Divi. È un modo molto efficace per attirare visitatori. Speriamo che il tutorial di oggi aggiurerà una nuova dimensione alla progettazione del tuo sito web. Se ti piace questo tutorial, non dimenticare di farci sapere nella casella dei commenti.