Efeitos de page loading com CSS3
Existem diversas técnicas de design para fazer com que o seu site seja visualmente atraente e mantenha o interesse do visitante em explorar as diversas áreas do mesmo. Entre as diversas estratégias de design para isso, em 2017, algumas das tendências previstas são: Flat, semiflat, geometric shapes, material design e outros.
Entretanto tais técnicas lidam com o desenho do seu site e não têm relação direta com a performance do mesmo. E para o visitante, a performance/carregamento de um site pode-se tornar algo demasiadamente entediante.
Nem todo usuário possui uma internet capaz de carregar um site em uma velocidade extremamente rápida, então é importante criar maneiras de recompensar a paciência do mesmo, de justificar a sua espera. Tenha em mente que de nada servirá o belo design e as diversas horas de estudo investidas no aprendizado de paleta de cores, tipografia e etc, se o visitante desistir de ver o seu site no meio do caminho (no carregamento).
Recompensando o usuário
Não é que um belo design não seja satisfatório, mas além de agregar fluidez e beleza ao site, os chamados efeitos de page loading ou page transition, são uma fantástica maneira de bonificar o visitante do seu site com algo chamativo que direciona o foco do mesmo para os elementos que você julga serem o principal conteúdo, o cerne do seu site.
Page loading são efeitos de transição entre estados de exibição dos elementos de uma página. Eles tratam a maneira como um item ou página são exibidos. E para a nossa sorte e agilidade, existem ferramentas de uso familiar capazes de criar esses efeitos, como por exemplo o CSS.
Criando a estrutura do HTML
Primeira vamos criar os elementos onde aplicaremos os efeitos.
Posicionando os elementos
Agora vamos estilizar de forma rápida e básica tentando emular a distribuição dos elementos de uma página inicial, contendo ela os items criados anteriormente no código acima.
Manipulando o foco do usuário com o page loading
Agora vamos de fato entrar na parte que nos interessa. Uma vez criados e distribuídos os elementos em um dado layout, agora vamos decidir como mostrar os elementos criados. Arbitrariamente vamos escolher a tag ul como o conteúdo que merece um maior destaque, as demais tags também receberão tratamento, mas o foco será na ul.
Transition e animation
Usando puramente os recursos do CSS3, para criar efeitos de transição suaves e elegantes podemos usar duas propriedades: transition e animation. A primeira citada, exige interação com o usuário e não é isso que procuramos, lembre-se, a ideia é criar um efeito suave que mostre os elementos na tela, de acordo com a ordem de relevância, é criar uma transição elegante entre o carregamento e exibição da pagina inicial ou entre páginas. Por esse motivo vamos usar a propriedade animation.
Animando com CSS3
Ao ler a documentação sobre as propriedades animation, você pode até se assustar e pensar que é algo super complicado, mas na verdade elas não são nenhum bicho de sete cabeças, são super simples. De fato existem diversos valores pertencentes as propriedades, mas nesse artigo vamos aprender somente o básico necessário para o page loading.
Agrupando valores
Os valores dessa fantástica propriedade podem ser agrupados na abreviação animation, precisando conter apenas um nome, tempo de duração, número de vezes que ela acontecerá. Usaremos por enquanto apenas a abreviação “animation”.
Então assim ficará a nossa ul:
Note que a ultima propriedade, a animation agrupou três valores, sendo eles: up, 1.3s e 1. “up” foi o nome (name) escolhido para a animação, “1.3s” corresponde ao tempo de duração dela, que no caso será de 1,3 segundo. E o ultimo valor, o “1”, corresponde ao número de vezes que a animação ocorrerá. Como esse efeito será aplicado somente na primeira exibição da página, assim que ela for carregada, então é conveniente que ela ocorra apenas uma vez.
Animando de fato com @keyframes
Uma vez criada a propriedade dentro do seletor ul, agora vamos por a mão na massa e ver a magia acontecer. Para executar a animação precisamos definir ao menos um estado inicial e um final para o objeto que será animado, sinalizando o caminho que a animação percorrerá transicionalmente até o seu fim. Uma boa ideia de page loading é fazer com que o elemento vá aparecendo aos poucos e vá subindo suavemente alguns pixels. Tendo isso em mente então animaremos as propriedade “opacity” e “transform translateY” da nossa ul usando o seletor de animações “@keyframes”.
Usamos então o seletor @keyframes e dissemos a ele qual animação queríamos manipular, no caso foi a up, por isso escrevemos: @keyframes up. E para definir os estados, usamos from (de), to (para), definindo então o estado inicial e o final do elemento.
Animando as outras tags
Agora que já sabemos basicamente como funciona a propriedade animation vamos então aplicá-la definindo um atraso de execução para que as tags com menor relevância sejam animadas tardiamente em relação a ul, criando um efeito suave e uma sensação de fluidez na exibição da página.
Note que é possível reutilizar animações, bastando as referênciar dentro dos seletores desejados, que foi o que fizemos com “h1, h2 e p”. Também observe que aplicamos um estado nos seletores dos três citados anteriormente de opacity 0 e definimos com a propriedade “animation-fill-mode:fowards” que o ultimo estado da animação seria guardado como estado final do elemento após o fim da animação.
Outras possibilidades
É sempre importante ter um bom repertório de ideias para criar sites mais atraentes e manter o interesse do visitante, então é de suma importância pesquisar outras formas e efeitos de page loading em sites que possuem um vasto conteúdo a cerca disso, como no Tympanus. Lá você encontrará uma grande variedade de efeitos de page loading, preloading e transições de página em si.
Caso já esteja familiar com a propriedade animation e também tenha um bom conhecimento de javascript, você possuirá um leque bem maior de possibilidades, e poderá observar efeitos de outros sites com a possibilidade de implementar no seu site apenas tendo em mente uma ideia do que foi usado para executar tal page loading. Uma boa dica é procurar em sites que premiam sites, como o Awwwards ou então o cssdesignawards.
Concluindo
Esse foi apenas um breve aperitivo do que se é possível fazer com page loadings através da propriedade animation, existem diversos outros exemplos e demonstrações de efeitos mais complexos para criar essa sensação de fluidez na exibição de uma pagina e recompensar o visitante com uma animação suave e elegante.
