Effetto galleggiamento in Elementor senza plugin

Effetto galleggiamento elementor

Mi è capitato diverse volte di voler includere nei miei progetti alcune funzioni o animazioni che elementor non fa nativamente, quindi mi trovavo a ricercare tra mille addon, plugin o altro che se pur fatti bene includono anche molta porcheria, senza parlare di eventuali problemi con aggiornamenti ecc ecc.

Uno di questi effetti è il Floating (galleggiamento)

Floating Effect

L’effetto floating per elementor l’ho visto per la prima volta nel plugin Happy addon che se non erro è anche gratuito o comunque freemium.

In ogni caso come al solito ho cercato scervellarmi un pò e dopo alcune ricerche sono riuscito a riprodurre lo stesso effetto con poche righe di codice e non solo funziona per elementor ma potete usarlo ovunque nei vostri progetti.

L’effetto che andremo a realizzare è questo

Sei pronto a sporcarti le mani? Procediamo…

1. Il codice

Copia questo codice:

.floating {  
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 14px); }
    to   { transform: translate(0, -0px); }    
}

Opzione 1: incollalo nel tuo “style.css” del tuo child theme (se non sai cos’e leggi qui) e salva

Opzione 2: Incollalo in Aspetto > personalizza > css aggiuntivo

Opzione 3 su elementor per i più pigri: Selezioni elemento > vai nella tab avanzato > css personalizzato > incolli il codice

2. Assegna classe “floating”

Ora che il tuo css e stato integrato nel tuo foglio stile devi solo assegnare la classe “floating” all’elemento che vuoi far galleggiare, può essere qualsiasi cosa nel tuo sito.

Di seguito alcuni esempio di assegnazione classe

Esempio di assegnazione classe su gutenberg
Esempio di assegnazione classe su Elementor

FINITO!

Pensavi fosse più complicato?

PS: Ovviamente potete andare a modificare i valori

animation-duration: 2s;

e

65%  { transform: translate(0, 14px); }

Per accentuare o ridurre l’effetto.

Condividi se ti è piaciuto

Condividi su facebook
Condividi su linkedin
Condividi su twitter
Condividi su email

Potrebbero interessarti anche

Questo sito utilizza cookie tecnici sul dispositivo, analytics e di terze parti. Abilitando questi cookie, ci aiuti a offrirti un'esperienza migliore.. Cookie policy