Come creare semplici animazioni per i campi d'input.

 

I campi per l'inserimento d’informazioni sono degli ottimi candidati per l'uso di effetti visivi. Impossibile animare moduli cartacei, il che non è vero per i moduli del web. Oggi vogliamo condividere con voi il nostro lavoro per animazione dei campi d'input. E per creare questi effetti d'animazione abbiamo usato varie proprietà di CSS.

Va notato che questi esempi sono sperimentali e funzionano correttamente soltanto nelle versioni più recenti di browser.

Effetti d'animazione per i campi d'input di un form

 

 Per capire di che cosa si tratta vediamo subito un esempio di un form  della raccolta dove puoi provare  di inserire dei dati per vedre l'animazione e  puoi afrontiamo il discorso come è stato fatto.

Come il contenitore per campi della nostra forma abbiamo usato il tag span, dove abbiamo messo gli elementi input e il suo label. Per ottenere l'effetto desiderato, mettiamo tag label dopo input. Questa disposizione viene generalmente usata quando si lavora con checkboks o pulsanti radio. Per evidenziare la posizione del cursore del utente utilizzeremo pseudo-classe :focus.

 Vorrei anche sottolineare che i nostri effetti d'animazione sono bassati su proprieta transform e transitioin del CSS3

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-1" />
    <label class="input__label input__label--haruki" for="input-1">
        <span class="input__label-content input__label-content--haruki">Nome</span>
    </label>
</span>

Nel nostro esempio, label avrà un ruolo primario. Per la decorazione delle varie parti del campo d'input  utilizzeremo pseudo-classi :before e :after. Possiamo anche creare un altro livello, che utilizzeremo nel effetto chiamato "Haruki":

Al primo sguardo "Haruki", può dare l'impressione che si cambia l'altezza dell'campo. Invece, l'animazione viene applicata a pseudo classi label:  nomi dei campi 

.input--haruki {
    margin: 4em 1em 1em;
}
 
.input__field--haruki {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #AFB5BB;
    font-size: 1.55em;
}
 
.input__label--haruki {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none;
}
 
.input__label-content--haruki {
    transition: transform 0.3s;
}
 
.input__label--haruki::before,
.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: #6a7989;
    transition: transform 0.3s;
}
 
.input__label--haruki::before {
    top: 0;
}
 
.input__label--haruki::after {
    bottom: 0;
}
 
.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
    transform: translate3d(0, -90%, 0);
}
 
.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
    transform: translate3d(0, -0.5em, 0);
}
 
.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
    transform: translate3d(0, 0.5em, 0);
}

Al momento di ativazione del input da parte del utente, il suo label sarà animato da entrambi i lati.

demoE cosa sono le forme in html scopri guardando il video

video prevui

 

Fonte lezione: http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

Letto 1231 volte