O design responsivo está em toda parte e, independentemente de você estar usando uma estrutura ou escrevendo consultas de mídia, alguns elementos da sua página podem ser movidos ou dimensionados.
Se as suas consultas de mídia forem baseadas nas dimensões do navegador e o navegador for redimensionado, seus elementos se encaixarão. Adicionando um pouco de animação para essas propriedades é um toque agradável para qualquer site responsivo.
Hoje, mostrarei como é fácil adicionar esse toque extra, animando a largura e a opacidade dos elementos entre as consultas de mídia.
Para este exemplo simples, usaremos um div contendo 3 divs menores. Os divs serão dimensionados de acordo com o tamanho da janela do navegador. O HTML é simples:
Agora, nosso CSS principal colocará as três caixas dentro da div principal e também, alinhado com uma margem à direita:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Este é o nosso layout principal, sem consultas de mídia, este layout não será adaptado se a viewport mudar. Agora que temos o básico, vamos adicionar as consultas de mídia.
Consultas de mídia são usadas com freqüência hoje em dia. A maioria dos web designers os entende, mas no caso desta ser sua primeira vez, aqui está uma rápida atualização: as consultas de mídia verificam a capacidade do dispositivo que você está usando (largura, orientação e resolução) e executam CSS específico se as condições especificadas para a mídia consulta são atendidas. Em nosso exemplo, usaremos duas consultas de mídia que verificarão se o navegador é menor que 960 px e menor que 660 px. Em seguida, definiremos a largura dos elementos de acordo, também ocultaremos o último filho div para que os outros dois tenham mais espaço:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}É tudo o que precisamos para nossas consultas de mídia. Observe que é importante que esse código seja colocado abaixo do código CSS original acima, para que as consultas de mídia sobrescrevam o código acima delas. Se você testar seu arquivo agora, verá o tamanho dos divs sendo alterados e a opacidade do último div filho será alterada quando você redimensionar a janela do navegador.
Você notará que, para ocultar o último div filho, definimos sua opacidade como 0, em vez de defini-lo como: none. Isso é porque queremos poder animar a propriedade; A opacidade tem muitos graus diferentes, enquanto a exibição é verdadeira ou falsa (e, portanto, não pode ser animada).
As animações CSS provaram ser muito úteis ao executar essas pequenas animações que usamos para executar no jQuery, como animação de cor, largura e opacidade.
Como queremos que a página seja animada como um todo, usamos o seletor * CSS e configuramos nossa animação. As animações CSS são degradadas, mas você também deseja adicionar os prefixos do fornecedor para que haja o máximo de suporte possível:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Você pode ver o resultado final Aqui.
Adicionar animações simples como essas é um ótimo toque final em qualquer site. Algumas linhas de código adicionam um polimento realmente agradável ao seu site responsivo.
Você já fez animações de mídia em um projeto? Quais efeitos você alcançou? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, escala de imagem via Shutterstock.