Efeito JQuery

Front-end
#1

Alguém poderia me dizer qual o nome deste efeito, ao clicar no input, oque esta dentro dele sobe

http://jsfiddle.net/89y26/117/

#2

Isso é feito via css, numa combinação de efeitos sobre o label dos elementos com classe “input–text”. Quando o elemento recebe o foco ( “.input–text:focus” ), a posição do topo do label associado à ele é mudada de 35px para 15px. Quando ele perde o foco, volta aos 35px. Isso é feito com uso de uma transição de 0.15 segundos (150 milissegundos), o que dá a sensação de deslizar para cima ou para baixo.

As partes relevantes são:

.input--text + label {
  display:block;
  cursor:text;
  color:#777;
  transition:.15s ease-out all;  // <----essa aqui
  position:absolute;
  top: 35px;   // <----essa aqui
  left: 23px;
  color: #666;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif; 
}

.input--text:focus + label,
label.input--active {
  top: 15px;   // <----essa aqui
  left: 23px;
  font-size:.7em;
  color:#007C92;
  transition:.15s ease-out all;   // <----essa aqui
  font-weight: bold;
}

Abraço.

1 curtida