Animação de carregamento da página da web Demoção JavaScript

Para este tutorial, nossa demonstração de animação de carregamento da página da web não vai viva no codepen. Como precisamos de páginas diferentes para mostrar o carregamento da página JS, decidi que é melhor hospedá -lo no Github. Aqui está o Estrutura do projeto para o JS carregamento de página:

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 página carregando a demonstração de javascript é retirada da adorável Site do Nine Orchard.

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

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

Dentro dele, vamos colocar:

• 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 viverá.

Além disso, vamos importar:

Com tudo o que é acima em mente, aqui está a marcação associada para o Animação com JavaScript:

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 CSS variável para animá -los. Quanto maior o valor, mais tempo levará para o elemento associado animar.

2. Defina alguns estilos básicos para Carregamento da página JS

Em seguida, continuaremos com algumas variáveis ​​CSS e estilos de redefinição:

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 A variável determinará a largura do painel.
• A altura da página será igual à altura da viewport.
• Ocultamos quaisquer barras de rolagem em potencial que possam aparecer, dependendo da quantidade de conteúdo da página.

3. Especifique os estilos principais para o Carregamento da página JS

Vamos agora nos concentrar no principal Estilos para a página Carregando animação JavaScript. Vamos deixar de fora os estilos de cabeçalho, pois eles não têm importância.

Os painéis

Os painéis serão elementos de posicionamento fixo e seus width e left Os valores da propriedade dependerão do panel-width variável. Dito isto, o left O valor do 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. Usaremos o clip-path Propriedade para espremer e movê -los para a parte inferior da página.

Elemento principal

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

Aqui estão os estilos relevantes da página que carrega a animação JavaScript:

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ções

Se você verificar o width Valor dos painéis, você notará que há um pixel extra. Seu trabalho é fazer com que os painéis se sobreponham um pouco e, assim, impedir que as fronteiras azuis (sua cor dependerá da cor da página) entre os painéis adjacentes.

4. Disparar as animações JS

Quando a página é carregada, a página de JavaScript seguinte deve tocar 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. Finalmente, todo o conteúdo da página deve se tornar visível.

Durante as duas primeiras etapas, os painéis serão transferidos 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 adolescentes como fizemos a última vez com a linha do tempo do GSAP, nós t We WartAKE VABATE DE UM EVENTO MENOS CONHECIDO transitionend. Este evento dispara cada vez que uma transição CSS termina e nos dá a capacidade de sincronizar Página carregando JS animações.

Obviamente, não estamos interessados ​​em todas as transições; em vez disso, apenas nos preocupamos com as transições dos painéis e especificamente as transições do último painel de animação JS. No nosso caso, os últimos painéis animados serão os primeiros e sétimos (últimos), como ambos têm index: 3.

Como você verá no código, trabalharemos com o último, mas poderíamos igualmente 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 JavaScript ficam fora de sincronia.

Em termos da lógica do código, faremos as seguintes coisas nesta ordem:

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

Após a conclusão de nossas transições, o body terá estas 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 do Página Carregando Animação JS:

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

}

Agora você sabe como montar um Página Carregando Animação JS!

Parabéns, pessoal! Conseguimos construir uma atraente animação de carregamento de página JavaScript, impressionando animações graças ao transitionend evento. Obviamente, para uso mais pesado de Página carregando JS Animações, uma biblioteca como o 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 em tuts+ que usam o clip-path propriedade para aplicar diferentes tipos de animações.