Rótulos flutuantes em input texts no wix

Sabe do que estou falando?

Você sabe exatamente do que se trata o título deste post? Se não, não se preocupe, abaixo você pode ver um exemplo do que é um rótulo flutuante. Experimente clicar em um cos campos (username ou password), veja como o placeholder do campo sobe e diminui de tamanho.

Legal demais este efeito 👍, você já pensou em algo assim no seu site Wix? Se sim e já percorreu as opções que eles tem, viu que nativamente isto não é possível, mas cá estou para compartilhar com você uma solução.

Conhecendo a solução 🧐

Abaixo você pode ver uma função chamada floatLabel( ), adequada para ser chamada em eventos de onKeypress( ). Ela recebe três parâmetros : rotulo, input e placeholder. O primeiro é o componet text que serve como label, o segundo é a caixa de texto onde ocorre o efeito, o terceiro é o texto escrito no rótulo. Você vai entender isso melhor mais tarde, apenas observe que a lógica toda ocorre entre as linhas 24 e 30.

abaixo você pode ver como essa função é chamada. Neste caso, o campo #labelNome nome é um text, #tbNome é um input e "nome" é o que aparecerá escrito em #labelNome.

Para que fique mais claro, veja a estrutura abaixo e identifique os elementos acima. A marcação amarela indica o componente #labelNome.

Marcando o rórulo

Por fim, é importante que você configure a animação de deslizar para cima, desmarque nela a opção de executar somente na primeira vez e reduza ao máximo o tempo de execução e atraso.

Configurando animação

Assista o vídeo!

😎😊