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
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.
