Come aggiungere effetti al passaggio del mouse di Ken Burns a immagini, moduli e righe in Divi

L'effetto Ken Burns è in circolazione da un po'. L'effetto è stato reso famoso dal documentarista americano Ken Burns, che ha utilizzato una combinazione di tecniche di panoramica e zoom per dare vita alle immagini nei suoi film. Nel web design, l'effetto Ken Burns ha dimostrato di essere una tecnica di design popolare per dare vita alle immagini di sfondo.

L'effetto Ken Burns può essere utilizzato anche come effetto al passaggio del mouse per le immagini. Sicuramente hai visto questo usato prima. Nel tentativo di dare vita alle immagini, i web designer aggiungono effetti al passaggio del mouse alle immagini che le fanno ingrandire, spostare e ruotare.

Con il rilascio degli effetti di trasformazione in Divi Builder, non è mai stato così facile portare gli effetti al passaggio del mouse sulle tue immagini. Queste opzioni di trasformazione ti consentono di ridimensionare (zoom), spostare (o eseguire una panoramica) e ruotare un'immagine come preferisci. E poiché è possibile applicare queste trasformazioni allo stato dell'immagine al passaggio del mouse, le possibilità di progettazione sono praticamente infinite.

In questo tutorial, ti mostrerò quanto è facile creare effetti di ken burn completamente unici su immagini e righe utilizzando Divi Builder.

Iniziamo.

Sbirciata

Ecco un'anteprima dell'effetto hover ken burns che può essere facilmente ottenuto con le opzioni di trasformazione di Divi.

Il concetto di base spiegato

Il concetto di base per la creazione dell'effetto al passaggio del mouse di Ken Burns prevede l'utilizzo delle nuove opzioni di trasformazione di Divi per ridimensionare, posizionare e ruotare l'immagine quando si passa con il mouse su di essa. È possibile aumentare la proprietà di trasformazione della scala di una certa percentuale per ingrandire l'immagine al passaggio del mouse. È possibile utilizzare la proprietà translate transform per spostare l'immagine lungo gli assi xey. E puoi ruotare l'immagine usando la proprietà di trasformazione di rotazione impostando un valore in gradi specifico (in questo caso il valore in gradi per la rotazione sull'asse x). Infine, puoi controllare la durata della transizione (velocità) e la curva di velocità per controllare la velocità del flusso dell'effetto hover ken burns. Le tre proprietà di trasformazione e le proprietà di transizione lavorano insieme per creare un effetto hover ken burns che dà vita alle tue foto.

Puoi facilmente ottimizzare le proprietà di trasformazione e le proprietà di transizione utilizzando le impostazioni integrate fornite da Divi. Tuttavia, la chiave per far funzionare questo effetto implica una semplice riga di css (overflow:hidden) che deve essere applicata alla colonna contenente l'immagine. Poiché ridimensionerai, sposterai e ruoterai l'immagine, desideri che l'overflow dell'immagine sia nascosto all'esterno della colonna che la contiene.

Una volta che hai l'idea di base e la funzionalità in atto, è notevole quanto sia facile posizionare l'immagine esattamente come vuoi usando le opzioni di trasformazione di Divi.

Scarica GRATUITAMENTE gli esempi di effetti al passaggio del mouse di Ken Burns

Per mettere le mani sugli esempi gratuiti di Ken Burns Hover Effect, devi prima scaricarlo utilizzando il pulsante qui sotto. 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.

Una volta scaricato il file zip, decomprimi la cartella. Quindi, importa il layout .json utilizzando la funzionalità di portabilità di Divi Builder. Oppure puoi semplicemente trascinare il file in Divi Builder utilizzando la funzionalità Drag and Drop di Divi. Questo è tutto!

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!

Iniziare con una nuova pagina

La prima cosa che devi fare è creare una nuova pagina. Quindi dai un titolo alla pagina e distribuisci Divi Builder sul front-end. Quindi scegli l'opzione "Costruisci da zero".

Aggiunta dell'effetto Ken Burns a un'immagine in una riga di una colonna

Per questo primo esempio di base, ti mostrerò come aggiungere l'effetto ken burn al passaggio del mouse a una singola immagine in una riga di una colonna. Userò le opzioni di ridimensionamento, traduzione e rotazione di trasformazione per ottenere questo effetto.

Innanzitutto, crea una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo immagine alla riga.

Nascondere l'overflow della colonna

Prima di iniziare ad aggiornare le impostazioni dell'immagine, apri le impostazioni della riga e fai clic sulla scheda Avanzate. Quindi aggiungi il seguente CSS personalizzato all'elemento principale della colonna:

overflow: hidden;

Ciò eviterà che l'immagine si estenda (o trabocchi) oltre il contenitore della colonna ogni volta che l'immagine si ridimensiona a una dimensione maggiore al passaggio del mouse. Se non lo aggiungi, l'immagine uscirà dal contenitore e nasconderà altri elementi della pagina. Tecnicamente, potresti aggiungere questo css all'elemento principale della riga anziché alla colonna, ma dovresti anche eliminare qualsiasi imbottitura di riga personalizzata.

Salva le impostazioni della riga.

Aggiungere la tua immagine

Ora possiamo aggiungere l'immagine al modulo immagine. Apri le impostazioni del modulo immagine e aggiungi un'immagine.

Assicurati che l'immagine sia considerevolmente più grande della colonna. Questo è importante per evitare che l'immagine appaia sfocata quando si ridimensiona l'immagine a una dimensione maggiore al passaggio del mouse. Se stai utilizzando le impostazioni predefinite di una riga a una colonna, la larghezza massima della colonna sarà 1080px. Quindi, sto usando un'immagine di circa 1500 px di larghezza e 900 px di altezza.

Importante: come regola generale, più grande è l'immagine, più spazio avrai per ridimensionare, spostare e ruotare l'immagine senza perdere la qualità dell'immagine.

Aggiunta di effetti al passaggio del mouse di trasformazione

Ora che abbiamo la nostra immagine a posto, è il momento di usare quelle opzioni di trasformazione per creare l'effetto hover Ken Burns. Passa alla scheda di progettazione e apri le opzioni di trasformazione. Attiva gli effetti al passaggio del mouse e seleziona la scheda al passaggio del mouse. Ora qualsiasi personalizzazione dell'effetto di trasformazione si applicherà solo allo stato al passaggio del mouse del modulo immagine. Quindi, nella scheda Trasforma scala, aggiorna quanto segue:

Asse x della scala di trasformazione (hover): 136%
Trasforma scala asse y (hover): 136%

Quindi fare clic sulla scheda Trasforma Traduci e aggiornare quanto segue:

Trasforma Trasla asse x (hover): 3%
Trasforma Trasla asse y (hover): 9%

Questo sposta l'immagine a sinistra del 3% e verso il basso del 9%. Per questa immagine specifica, stavo cercando un effetto che ingrandisse e portasse la coppia al centro della finestra della colonna.

Per impostazione predefinita, i valori della lunghezza della traduzione saranno in pixel (non in percentuale). Puoi usare i pixel per spostare l'immagine, ma trovo che l'uso delle percentuali renda il posizionamento più reattivo.

Quindi fai clic sulla scheda Trasforma Ruota e aggiorna quanto segue:

Trasforma Ruota asse x (hover): 6deg

Aggiorna opzioni di transizione

Infine, dobbiamo aggiornare la durata della transizione (quanto tempo impiega l'effetto di trasformazione al passaggio del mouse per completare) e la curva di velocità (la funzione di temporizzazione che consente alla transizione di cambiare velocità nel corso della sua durata). Per questo esempio, voglio che la transizione richieda più tempo per un effetto Ken Burns più drammatico (e classico) al passaggio del mouse. Per fare ciò, vai alla scheda Avanzate e aggiorna le opzioni di transizione come segue:

Durata della transizione: 2000 ms (o 2 secondi)
Curva della velocità di transizione: lineare (questo assicura che la velocità della transizione non cambi in durata)

Risultato finale

Ora diamo un'occhiata al risultato finale. Non lasciarti ingannare dalla frammentarietà della gif qui sotto. La transizione è davvero fluida su un sito live.

Aggiunta dell'effetto Hover Ken Burns a più immagini in una riga di tre colonne

Se si desidera aggiungere l'effetto hover ken burn alle immagini in più colonne, si applica lo stesso processo. La cosa principale che devi fare è assicurarti di aggiungere lo snippet css "overflow:hidden" a ciascuna delle colonne che contengono la tua immagine.

Usando il nostro esempio precedente sopra, cambia la struttura a colonne della riga in un layout a tre colonne.

Successivamente, aggiorna le impostazioni della riga con gli snippet CSS personalizzati che nasconderanno l'overflow di ogni colonna.

Colonna 1 Elemento principale CSS:

overflow:hidden;

Colonna 2 Elemento principale CSS:

overflow:hidden;

Colonna 3 Elemento principale CSS:

overflow:hidden;

Quindi copia il modulo immagine e incollalo nella colonna 2 e nella colonna 3.

Questo è tutto. Questo è il risultato finale.

Poiché questo design è più tipico di un layout a griglia di una galleria, probabilmente vorrai accelerare un po' la durata della transizione per rendere più nitida l'animazione al passaggio del mouse. Puoi farlo facilmente usando la funzione di selezione multipla di Divi. Tieni premuto ctrl o cmd e seleziona tutti i moduli immagine. Quindi fare clic sull'icona a forma di ingranaggio delle impostazioni su una delle immagini per aprire la modale Impostazioni elemento.

Ora tutti gli aggiornamenti apportati nelle impostazioni degli elementi verranno applicati a tutte le immagini contemporaneamente. Aggiorna le opzioni di transizione nelle impostazioni dell'elemento come segue:

Durata della transizione: 500 ms

Ecco la nuova durata della transizione in vigore.

Aggiunta dell'effetto Hover Ken Burns a qualsiasi modulo con un'immagine di sfondo

L'effetto hover Ken Burns può essere utilizzato anche per moduli diversi dal modulo immagine. Funziona bene se vuoi trasformare il testo o le icone insieme all'immagine di sfondo di un modulo.

Ecco come aggiungere l'effetto Ken Burns a un modulo di testo.

Per prima cosa crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi un modulo di testo alla riga.

Aggiorna il modulo di testo con il seguente contenuto:

<h1>We're Engaged!</h1>

Quindi aggiungi un'immagine di sfondo al modulo. Ricorda di aggiungere un'immagine abbastanza grande da lasciare spazio per ridimensionare e spostare l'immagine al passaggio del mouse.

E quindi aggiorna le opzioni di progettazione dell'intestazione come segue:

Carattere intestazione: Prata
Dimensione del testo dell'intestazione: 6vw
Imbottitura personalizzata: 10vw in alto, 10vw in basso, 3vw a sinistra

Durata della transizione: 5000 ms

Ora aggiungi le seguenti impostazioni di trasformazione al modulo di testo.

Asse x della scala di trasformazione (hover): 118%
Asse y della scala di trasformazione (hover): 118%

Trasforma Trasla asse x (hover): 6%
Trasforma Trasla asse y (hover): 6%

Ora aggiorna le impostazioni della riga con il seguente CSS personalizzato per la colonna.

Elemento principale della colonna CSS:

overflow:hidden;

Ora controlla il risultato.

Nota come il testo e l'immagine di sfondo si trasformeranno insieme al passaggio del mouse.

Combinare l'effetto al passaggio del mouse di Ken Burns con ulteriori effetti al passaggio del mouse

Puoi anche combinare l'effetto Hover Ken Burns applicato a un modulo con effetti aggiuntivi per una creatività ancora maggiore.

Combinare l'effetto Hover Ken Burns con gli effetti filtro

Nel caso te ne fossi dimenticato, gli effetti filtro sono un ottimo modo per aggiungere uno stile creativo ai tuoi moduli, specialmente al passaggio del mouse. E puoi combinare questi effetti filtro con l'effetto di trasformazione per alcune transizioni al passaggio del mouse piuttosto uniche.

Per mostrarti, usiamo l'esempio sopra che ha aggiunto l'effetto ken burn a un modulo di testo. Poiché il modulo di testo ha già l'effetto di trasformazione al passaggio del mouse, aggiungiamo un ulteriore effetto filtro per cambiare l'immagine da bianco e nero a colore.

Apri le impostazioni del modulo di testo e aggiorna la seguente opzione di filtro:

Saturazione (predefinito): 0%
Saturazione (hover): 100%

Questa transizione imposterà il modulo di testo alla saturazione dello 0% per impostazione predefinita, il che eliminerà il colore rendendolo bianco e nero. L'impostazione di nuovo al 100% al passaggio del mouse aggiungerà il colore originale dell'immagine.

Ecco l'effetto finale dell'effetto filtro combinato con l'effetto hover ken burns.

Combinazione dell'effetto al passaggio del mouse di Ken Burns con gli effetti di trasformazione delle righe

Per questo esempio, ti mostrerò come combinare l'effetto hover ken burns con un ulteriore effetto di trasformazione aggiunto alla riga. L'idea è di utilizzare gli effetti di trasformazione per ridimensionare e ruotare la riga al suo stato predefinito e quindi ripristinare il design originale al passaggio del mouse.

NOTA: questa tecnica funzionerà davvero bene solo per una riga a una colonna con un singolo modulo. Questo perché il visitatore dovrà passare con il mouse sopra il modulo e la riga contemporaneamente. Pertanto il modulo deve occupare l'intera altezza e larghezza della fila. Moduli o spazi aggiuntivi interromperanno lo stato di passaggio del mouse e causeranno problemi.

Per fare ciò, rimarremo con il nostro attuale design del modulo di testo che già combina l'effetto hover ken burns con un effetto filtro aggiuntivo. Quindi questo è in realtà un triplo effetto hover!

Apri le impostazioni della riga che contiene il modulo di testo. Quindi aggiorna quanto segue:

Imbottitura personalizzata: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra

Questo per assicurarsi che non ci sia spazio aggiuntivo tra il modulo di testo e la riga.

Quindi aggiungeremo un'ombra di scatola alla riga come segue:

Box Shadow: vedi screenshot
Forza sfocatura ombra scatola: 36px
Colore ombra: rgba(0,0,0,0.17)

Ora aggiungi i seguenti effetti di trasformazione:

Trasforma scala asse x (predefinito): 70%
Asse x della scala di trasformazione (hover): 100%
Trasforma scala asse y (predefinito): 70%
Trasforma la scala dell'asse y (al passaggio del mouse): 100%

Trasforma Ruota asse y (predefinito): 19deg
Trasforma Ruota asse y (hover): 0deg
Trasforma Ruota asse z (predefinito): 23 gradi
Trasforma Ruota asse z (hover): 0deg

Ora diamo un'occhiata al risultato finale.

Aggiunta dell'effetto Hover Ken Burns a un'intera riga di contenuti

Nel caso ve lo stiate chiedendo, l'effetto hover di Ken Burns può essere utilizzato anche per dare vita a un'intera riga di contenuti al passaggio del mouse. Questo non sarà molto pratico per le righe con molti contenuti perché sarà un modo per confondere o distrarre i visitatori. Ma per cose come le intestazioni, questa può essere una tecnica di progettazione utile. Il trucco consiste nell'aggiungere lo snippet CSS personalizzato "overflow:hidden" alla sezione. Quindi puoi aggiungere gli effetti di trasformazione alla riga.

Pensieri finali

Sebbene l'effetto Ken Burns sia in circolazione da un po', potresti comunque trovarlo utile per creare alcuni effetti al passaggio del mouse piuttosto unici per le tue immagini e moduli in Divi. Il trucco è sapere come utilizzare le opzioni Divi Transform che sono sorprendentemente intuitive. Questi esempi forniti in questo tutorial avevano lo scopo di introdurre il concetto e, si spera, fornire una piccola ispirazione per il proprio utilizzo. Quando pensi a tutti i modi in cui combini le opzioni di trasformazione con tutte le altre opzioni di stile disponibili in Divi, iniziano a spuntare tonnellate di idee.

Non vedo l'ora di sentirti nei commenti.

Saluti!