Stavo ammazzando un po’ di tempo sfogliando il mio feed CodePen per un po’ di piacere per gli occhi e non ho avuto bisogno di andare oltre la prima pagina prima di individuare un accurato effetto al passaggio del mouse CSS di Adam Argyle.
“Scommetto che sta usando una transizione su uno sfondo.”
Questo è stato il mio primo pensiero. Definisci il colore di sfondo, imposta la dimensione dello sfondo e la posizione dello sfondo, quindi trasferisci la posizione dello sfondo. È così che ho visto quella cosa del colore di sfondo “in crescita” fatta in passato. L’ho fatto io stesso su alcuni progetti, come questo:
See the Pen
Link Effectz – Background on hover by Geoff Graham (@geoffgraham)
on CodePen.
Se potessi fare la stessa cosa, solo da sinistra a destra, allora tutto ciò che resta è il mouse fuori, giusto? No. Il problema è che non c’è nulla che possa davvero effettuare la transizione della posizione di sfondo da sinistra a destra a sinistra a destra. Potrei fargli fare l’uno o l’altro, ma non entrambi.
“Forse invece è una trasformazione.”
Il mio prossimo tentativo è stato saltare nelle trasformazioni. La proprietà transform fornisce una serie di funzioni che possono passare insieme per movimenti leggermente più complessi. Ad esempio, lo sfondo può “crescere” o “rimpicciolirsi” modificando la scala dell’elemento (). O, in questo caso, solo lungo l’asse x con scaleX().
Ma come ho detto, non c’è un modo per isolare lo sfondo dell’elemento per farlo. Passare da scaleX(0) a scaleX(1) ridimensiona l’intero elemento, in modo che in pratica riduca il collegamento – contenuto e tutto – a zero, quindi lo estenda nuovamente alla sua dimensione naturale, il che è un effetto completamente diverso. Inoltre, significa iniziare con scaleX (0) che nasconde l’intera cosa pericolosa per impostazione predefinita rendendola inutilizzabile.
Ma uno pseudo-elemento potrebbe funzionare! Non importa se viene schiacciato o nascosto perché non fa parte del contenuto effettivo. Devo invece mettere lo sfondo su quello e posizionarlo direttamente sotto il collegamento.
a {
/* Keeps the pseudo-element contained to the element */
position: relative;
}
a::before {
background: #ff9800;
content: "";
inset: 0; /* Logical equivalent to physical offsets */
position: absolute;
transform: scaleX(0); /* Hide by default */
z-index: -1; /* Ensures the link is stacked on top */
}
“Ora ho bisogno di ::prima di cambiare al passaggio del mouse.”
Sapevo di poter creare ::before scala da 0 a 1 concatenandolo allo stato :hover dell’elemento link.
a:hover::before {
transform: scaleX(1)
}
Carino! Ero su qualcosa.
See the Pen
Mouse-Out Hover Effect: Step 1 by Geoff Graham (@geoffgraham)
on CodePen.
Cospargici sopra un po’ di polvere di fata di transizione e le cose iniziano a prendere vita.
a::before {
background: #ff9800;
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transition: transform .5s ease-in-out;
z-index: -1;
}
See the Pen
Mouse-Out Hover Effect: Step 2 by Geoff Graham (@geoffgraham)
on CodePen.
La transizione si muove in entrambe le direzioni
Ancora una volta, è qui che sono rimasto bloccato. Qualcosa nella mia testa non funzionava per qualche motivo. Come al solito, sono corso al CSS-Tricks Almanac per vedere quale proprietà potrebbe essermi sfuggita di mente.
Ah sì. Sarebbe l’origine della trasformazione. Ciò mi consente di impostare dove inizia la trasformazione, che non è del tutto dissimile dall’impostazione della posizione dello sfondo come ho provato in precedenza. La trasformazione potrebbe iniziare da sinistra anziché dalla posizione predefinita 50% 50%.
a::before {
background: #ff9800;
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: left; //ho right per partire da destra
transition: transform .5s ease-in-out;
z-index: -1;
}
See the Pen
Mouse-Out Hover Effect: Step 3 by Geoff Graham (@geoffgraham)
on CodePen.
