Demonstração de Animação de Página

Para este tutorial, nossa demonstração não vai ao vivo no CodePen. Como precisamos de páginas diferentes para mostrar a animação, decidi que é melhor hospedá-la no GitHub. Aqui está o estrutura do projeto:

1

panels-animation/

2

├── about.html

3

├── contact.html

4

├── index.html

5

├── main.css

6

└── main.js

Antes de continuarmos, vale a pena notar que a inspiração para esta demo foi tirada do adorável Site da Nine Orchard.

1. Comece com a marcação da página

Vamos descrever a marcação para o index.html página. Isso será semelhante às outras páginas.

Dentro dela, colocaremos:

• Um cabeçalho de página típico
• Os painéis que serão responsáveis ​​por dividir a tela em sete partes iguais.
• O main elemento onde o conteúdo principal da página ficará.

Além disso, importaremos:

Com tudo isso em mente, aqui está a marcação associada:

1

2

 lang="en">

3

4

     charset="utf-8">

5

     name="viewport" content="width=device-width, initial-scale=1">

6

     rel="preconnect" href="https://fonts.gstatic.com">

7

     rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">

8

     rel="stylesheet" href="main.css">

9

10

11

12

13

     class="page-header">

14

15

16

17

             href="index.html">Home

18

19

20

21

22

23

24

     class="panels">

25

       class="panel" style="--index: 3">

26

       class="panel" style="--index: 2">

27

       class="panel" style="--index: 1">

28

       class="panel" style="--index: 0">

29

       class="panel" style="--index: 1">

30

       class="panel" style="--index: 2">

31

       class="panel" style="--index: 3">

32

33

34

     class="page-main">

35

36

        
Home Page

37

38

39

40

41

42

43

Considere os estilos embutidos que adicionamos aos painéis. Como veremos mais adiante, usaremos o index Variável CSS para animá-los. Quanto maior o valor, mais tempo levará para o elemento associado ser animado.

2. Definir alguns estilos básicos

Em seguida, continuaremos com algumas variáveis ​​CSS e redefiniremos estilos:

1

:root {

2

  --panel-width: calc(100% / 7);

3

  --darkblue: #02020c;

4

  --white: #fff;

5

  --lightgray: #fafafb;

6

}

7

8

* {

9

  padding: 0;

10

  margin: 0;

11

  box-sizing: border-box;

12

}

13

14

ul {

15

  list-style: none;

16

}

17

18

a {

19

  color: inherit;

20

  text-decoration: none;

21

}

22

23

h1 {

24

  font-size: 3rem;

25

}

26

27

body {

28

  height: 100vh;

29

  font-family: "Montserrat", sans-serif;

30

  color: var(--white);

31

  background: var(--darkblue);

32

  overflow: hidden;

33

}

Três coisas a serem observadas:

• O panel-width variável determinará a largura do painel.
• A altura da página será igual à altura da viewport.
• Ocultaremos qualquer barra de rolagem em potencial que possa aparecer dependendo da quantidade de conteúdo da página.

3. Especifique os estilos principais

Vamos agora nos concentrar no principal estilos. Vamos deixar de fora os estilos de cabeçalho, pois eles não têm nenhuma importância.

Os Painéis

Os painéis serão elementos de posição fixa, e seus width e left os valores das propriedades dependerão do panel-width variável. Dito isso, o left o valor para o primeiro painel será 0, para o segundo em torno de 14,28%, para o terceiro em torno de 28,5% e assim por diante. Sua altura será igual à altura da viewport e invisível por padrão. vamos usar o clip-path propriedade para espremê-los e movê-los para a parte inferior da página.

elemento principal

O main elemento será em tela cheia com conteúdo centralizado horizontal e verticalmente. Para simplificar, colocaremos apenas um título e um link, mas você pode colocar o que quiser. Novamente, por padrão, todo esse conteúdo ficará invisível e ficará 100px afastado de sua posição original.

Aqui estão os estilos relevantes:

1	/*CUSTOM VARIABLES HERE*/
2
3	.panels .panel {
4	position: fixed;
5	top: 0;
6	left: 0;
7	bottom: 0;
8	width: calc(var(--panel-width) + 1px);
9	clip-path: inset(100% 0 0 0);
10	background: var(--lightgray);
11	transition: all 1s cubic-bezier(0.25, 1, 0.25, 1);
12	}
13
14	.panels .panel:nth-child(2) {
15	left: var(--panel-width);
16	}
17
18	.panels .panel:nth-child(3) {
19	left: calc(var(--panel-width) * 2);
20	}
21
22	.panels .panel:nth-child(4) {
23	left: calc(var(--panel-width) * 3);
24	}
25
26	.panels .panel:nth-child(5) {
27	left: calc(var(--panel-width) * 4);
28	}
29
30	.panels .panel:nth-child(6) {
31	left: calc(var(--panel-width) * 5);
32	}
33
34	.panels .panel:nth-child(7) {
35	left: calc(var(--panel-width) * 6);
36	}
37
38	.page-main {
39	display: flex;
40	height: 100%;
41	padding: 100px 15px;
42	overflow-y: auto;
43	}
44
45	.page-main > div {
46	text-align: center;
47	margin: auto;
48	}
49
50	.page-main > div > * {
51	opacity: 0;
52	transition: all 0.5s ease-out;
53	}
54
55	.page-main h1 {
56	transform: translateY(-100px);
57	}
58
59	.page-main p {
60	font-size: 20px;
61	margin-top: 20px;
62	transform: translateY(100px);
63	}

informação

se você verificar o width valor dos painéis, você notará que há um pixel extra. Sua função é fazer com que os painéis se sobreponham um pouco, evitando assim bordas azuis (a cor deles dependerá da cor da página) entre os painéis adjacentes.

4. Disparar as animações

Quando a página é carregada, as seguintes animações devem ser reproduzidas nesta ordem:

1. Primeiro, os painéis devem aparecer de baixo para cima.
2. Em seguida, os painéis devem desaparecer e passar para o topo.
3. Por fim, todo o conteúdo da página deve ficar visível.

Durante as duas primeiras etapas, os painéis serão transicionados com algum atraso. Como discutimos antes, isso dependerá do valor de seus index variável.

Imitar uma linha do tempo

Para criar uma sequência de interpolações como fizemos da última vez com a Timeline do GSAP, vamos ttirar proveito de um evento menos conhecido chamado transitionend. Esse evento é acionado toda vez que uma transição CSS termina e nos dá a capacidade de sincronizar as animações.

Claro, não estamos interessados ​​em todas as transições, em vez disso, nos preocupamos apenas com as transições dos painéis e especificamente com as transições do último painel animado. No nosso caso, os últimos painéis animados serão o primeiro e o sétimo (último) pois ambos possuem index: 3.

Como você verá no código, trabalharemos com o último, mas também poderíamos ter usado o primeiro. Para entender melhor, tente dar ao painel selecionado um grande atraso de cerca de 1s e veja como as animações ficam fora de sincronia.

Em termos de lógica de código, faremos o seguinte nesta ordem:

1. Primeiro, quando a página carregar, adicionaremos o loaded aula para o body.
2. Então, vamos esperar até que a transição do último painel termine-esse disparará duas vezes no total. Nesse ponto, adicionaremos outra classe ao body. Na primeira vez, adicionaremos o second-round classe, enquanto na segunda vez, vamos adicionar o third-round.

Após a conclusão de nossas transições, o body terá essas aulas:

Aqui está o código JavaScript:

1

const body = document.body;

2

const lastPanel = document.querySelector(".panels .panel:last-child");

3

4

window.addEventListener("load", () => {

5

  body.classList.add("loaded");

6

7

  lastPanel.addEventListener("transitionend", () => {

8

    if (body.classList.contains("second-round")) {

9

      body.classList.add("third-round");

10

    } else {

11

      body.classList.add("second-round");

12

    }

13

  });

14

});

E os estilos correspondentes:

1

.loaded .panels .panel {

2

  clip-path: inset(0);

3

  transition-delay: calc(var(--index) * 0.06s);

4

}

5

6

.loaded.second-round .panels .panel {

7

  clip-path: inset(0 0 100% 0);

8

}

9

10

.loaded.third-round {

11

  overflow: auto;

12

}

13

14

.loaded.third-round .page-main > div > * {

15

  opacity: 1;

16

  transform: none;

17

}

Conclusão

Parabéns, pessoal! Conseguimos construir uma atraente animação de carregamento de página JavaScript por meio de animações impressionantes, graças ao transitionend evento. Obviamente, para uso mais pesado de animações, uma biblioteca como GSAP é uma abordagem mais robusta a seguir. Sinta-se à vontade para estender a demonstração como desejar e compartilhá-la comigo!

Como sempre, muito obrigado pela leitura!

Mais projetos para praticar

Dê uma olhada nesses projetos no Tuts+ que usam o clip-path propriedade para aplicar diferentes tipos de animações.