animação ao carregar a página

[New Job 0]

Olá, alguem tem alguma ideia de como foi feito, ou como pdoeria ser feito algo como neste site, que ao navegar nos links, aparece uma pequena e simples animação com o título da página antes de carregar o conteúdo?

tela preta e título

 

https://www.thesocietymanagement.com/

[L. Henrique 179]

"New Job",

Considerando que você esteja usando uma biblioteca ou framework (por exemplo, React), pense o seguinte:

• Você tem componentes e estados desses componentes;
• No momento em que você acessa uma página, ele exibe o componente da imagem no topo da página;
• E, por trás dos panos, ele atualiza todo o componente da página com os novos dados.

Esse seria o jeito mais leigo possível de te explicar como as coisas funcionam. É como um mágico que desaparece, primeiro aparece um pano na frente, enquanto, por trás, o mágico está se trocando.

Mas, para uma referência mais simples, imagine que você só tenha HTML, CSS e JS puros. A ideia é que você troque o innerHTML de um conteúdo mas, antes disso, exiba um elemento com position fixed e que preencha toda a sua tela. Quando o innerHTML terminar o que precisa fazer, você remove o elemento overlay.

Eu fiz uma versão bem gambiarra e simples utilizando, inclusive, setTimeout como referência para você entender como esse efeito pode funcionar. Lembrando que, no mundo real, não existem setTimeouts e, sim, alterações de estado que sua aplicação fica "escutando". O conceito não é complexo, mas vamos focar na transição dos efeitos. Veja aqui o exemplo: https://jsfiddle.net/pwo86qkr/1/

No caso de você precisar recarregar uma página (imagina que está num Wordpress), a página anterior pode exibir o overlay e, a página posterior já iniciar com o overlay ativo e desativá-lo no window load.

Em resumo: Existem várias maneiras de chegar nesse resultado e alguns deles dependem muito da escolha de tecnologia que você realizou mas, em suma, o efeito é super simples e pode ser gerenciado somente por JS e CSS.

Abraço!
 

[Omar~ 87]

Para fins de estudo de caso outros cheguem até aqui.

O site sem si fornecido pelo autor do tópico usa como referencia elemento de autua e largura totais, a a propriedade fixed sobre esses elementos para cobrir.

Quando uma página é trocada ela não é trocada... Vou explicar apesar de ser um link da tag <a> exite um evento a espera desse click.

No momento do click a função responsável troca o conteúdo da tag que irá cobrir ao mesmo tempo que a mostra pois ela está oculta.

Os efeitos nada mais é que css de margin, opacity etc... 

Voltando ao caso do click a função executa Asynchronous JavaScript And XML a um arquivo que irá devolver a resposta como texto html.

Durante o processo de comunicação do AJAX, o histórico da url é manipulado. Fazendo pensar que na verdade clicasse em algum link.

Quando a resposta está pronta a mesma função altera o html da página com o html da resposta e oculta o elemento que cobre a tela.

 

Etapas:

1 - Obter todos links

2 - Remover comportamento padrão dos links.

3 - Acionar uma requisição ajax quando o link é ativado.

4 - Enviar pedido ao servidor para que forneça o arquivo referente ao link ativado.

5 - Obter solicitar a resposta como text/html.  (Etapa 7 inicia aqui.)

6 - Alterar HTML do elemento de animação. 

7 - Alterar o histórico da url.

8 - Alterar o HTML do elemento que irá carregar a página.

9 - Alterar o HTML do elemento de animação.

 

O resto é só css simples e básico position/opacity/margin/translate.