Como designer, você pode aprimorar a experiência do usuário em um site ou aplicativo móvel adicionando animações sutis aos seus componentes. Um desses componentes é uma caixa de entrada de pesquisa. Este tutorial abordará como criar uma entrada de pesquisa expansível; aquele que se expande quando um usuário clica em um ícone de pesquisa.
Você encontrará esse tipo de efeito de expansão de entrada de pesquisa se usar o YouTube no navegador:
Estrutura HTML
A estrutura HTML será apenas uma div simples contendo um elemento de entrada e um botão.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
Você notará que esta é uma entrada com um tipo de pesquisa, não texto. Não há diferença real entre os dois, mas a pesquisa é semanticamente correta no nosso caso.
“ elementos do tipo search são campos de texto projetados para o usuário inserir consultas de pesquisa. Eles são funcionalmente idênticos às entradas de texto, mas podem ter estilos diferentes pelo agente do usuário.” – mdn
Estilo com CSS
A primeira coisa que queremos fazer é centralizar tudo usando o Flexbox. Aplique os seguintes estilos ao corpo.
1 |
body { |
2 |
display: flex; |
3 |
align-items: center; |
4 |
justify-content: center; |
5 |
background-color: gray; |
6 |
min-height: 100vh; |
7 |
}
|
A seguir, estilizaremos a entrada de pesquisa completa e posteriormente trabalharemos no recurso de expansão. Para o elemento wrapper, adicione height, width, border, border-radius e background .
1 |
.search-wrapper { |
2 |
width: 50px; |
3 |
height: 50px; |
4 |
display: flex; |
5 |
border-radius: 4rem; |
6 |
background: #fff; |
7 |
align-items: center; |
8 |
justify-content: center; |
9 |
outline: none; |
10 |
border: 2px solid #888; |
11 |
|
12 |
}
|
Também adicionamos o estilo display: flex ao elemento div do wrapper para que os elementos filhos .ie input e button também sejam centralizados. Para o elemento de entrada, defina border:nonee outline:none. Também queremos que tenha largura e altura totais. Definir um margin-left:20px ao texto do espaço reservado e algum preenchimento.
1 |
.search-wrapper input { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
padding: 10px; |
5 |
margin-left: 20px; |
6 |
outline: none; |
7 |
border: none; |
8 |
font-size: 1.5rem; |
9 |
|
10 |
}
|
Para tornar o ícone visível, defina uma cor de fundo para o botão. Arredondar o botão com border-radius:50%e posicione-o à direita do elemento wrapper definindo margin-left: auto . Os estilos ficarão assim:
1 |
.search-btn { |
2 |
font-size: 2rem; |
3 |
border-radius: 50%; |
4 |
padding: 10px; |
5 |
border: 2px solid white; |
6 |
width: 60px; |
7 |
cursor: pointer; |
8 |
height: 60px; |
9 |
background: #e66610; |
10 |
margin-left: auto; |
11 |
}
|
Recurso de expansão
Agora que toda a entrada de pesquisa foi concluída, podemos trabalhar no recurso de expansão. A primeira coisa que queremos fazer é reduzir a largura do elemento wrapper.
1 |
.search-wrapper { |
2 |
width: 60px; |
3 |
height: 60px; |
4 |
display: flex; |
5 |
border-radius: 4rem; |
6 |
background: white; |
7 |
align-items: center; |
8 |
justify-content: center; |
9 |
border-radius: 100px; |
10 |
outline: none; |
11 |
|
12 |
|
13 |
}
|
Em seguida, defina position:relative para o elemento div wrapper e position:absolute para o elemento de entrada; Isso garantirá que a posição da entrada seja relativa ao elemento pai e não ao corpo.
1 |
.search-wrapper {
|
2 |
/* the rest of the CSS */ |
3 |
position: relative; |
4 |
} |
5 |
|
6 |
|
7 |
.search-wrapper input {
|
8 |
position: absolute; |
9 |
top: 0; |
10 |
left: 0; |
11 |
/* the rest of the CSS */ |
12 |
} |
Agora temos algo assim.
Como você pode ver, ainda precisamos de CSS adicional.
Vamos fazer o botão flutuar no topo da entrada definindo z-index:1 para o botão.
1 |
.search-btn { |
2 |
font-size: 2rem; |
3 |
border-radius: 50%; |
4 |
padding: 10px; |
5 |
border: 1px solid #be0671; |
6 |
width: 60px; |
7 |
cursor: pointer; |
8 |
height: 60px; |
9 |
background: #be0671; |
10 |
margin-left: auto; |
11 |
z-index: 1; |
12 |
|
13 |
}
|
O estilo final é ocultar qualquer estouro definindo overflow: hidden no elemento div do wrapper.
1 |
.search-wrapper { |
2 |
/* rest of the CSS */
|
3 |
overflow: hidden; |
4 |
|
5 |
}
|
Funcionalidade JavaScript
A funcionalidade JavaScript expandirá o elemento wrapper para largura total quando você passar o mouse e reduzirá a largura se você remover o mouse. Vamos primeiro definir a classe CSS para aumentar a largura.
1 |
.active { |
2 |
width: 350px; |
3 |
}
|
Selecione o elemento div do wrapper
1 |
const search = document.querySelector(".search-wrapper"); |
Em seguida, adicione dois ouvintes de eventos, mouseover e mouseout. Sobre mouseover, adicionaremos o estilo CSS ativo; sobre mouseoutremoveremos o estilo CSS.
1 |
search.addEventListener("mouseover", () => { |
2 |
if (!search.classList.contains("active")) { |
3 |
search.classList.add("active"); |
4 |
}
|
5 |
});
|
6 |
|
7 |
search.addEventListener("mouseout", () => { |
8 |
if (search.classList.contains("active")) { |
9 |
search.classList.remove("active"); |
10 |
}
|
11 |
});
|
Animação
A etapa final é adicionar um efeito de transição para torná-lo mais suave.
1 |
.search-wrapper { |
2 |
/* the rest of the CSS */
|
3 |
transition: 400ms ease-in-out; |
4 |
|
5 |
}
|
Você pode brincar com os valores de transição para obter a sensação desejada. É isso neste tutorial; confira o CodePen abaixo.
Conclusão
Este tutorial abordou a criação de uma barra de pesquisa expansível que inclui animações para melhorar a interatividade. Incorporar transições em seu design é essencial para tornar a interface do usuário mais envolvente e agradável.
