Como construir uma página de carregamento de página JavaScriptReviltec

Para entender melhor o que vamos construir, consulte a página de demonstração. Certifique -se de clicar nos links de menu para repetir o carregamento de página Animação JavaScript.

Como as duas animações do JS têm semelhanças, emprestarei algumas seções de conteúdo do tutorial anterior. Isso ajudará a manter cada tutorial detalhado e independente.

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:

panels-animation/
├── about.html
├── contact.html
├── index.html
├── main.css
└── 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:


 lang="en">
  
     charset="utf-8">
     name="viewport" content="width=device-width, initial-scale=1">
     rel="preconnect" href="https://fonts.gstatic.com">
     rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
     rel="stylesheet" href="main.css">
    </span>Simple JavaScript Page Loading Animation<span style="color: #f4bf75">
  
  
  
     class="page-header">
      
        
          
             href="index.html">Home
          
          
        
      
    
    
     class="panels">
       class="panel" style="--index: 3">
       class="panel" style="--index: 2">
       class="panel" style="--index: 1">
       class="panel" style="--index: 0">
       class="panel" style="--index: 1">
       class="panel" style="--index: 2">
       class="panel" style="--index: 3">
    
    
     class="page-main">
      
        Home Page
        
      
    
    
    <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"main.js"</span><span style="color: #f4bf75">>   
  


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:

:root {
  --panel-width: calc(100% / 7);
  --darkblue: #02020c;
  --white: #fff;
  --lightgray: #fafafb;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 3rem;
}

body {
  height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: var(--white);
  background: var(--darkblue);
  overflow: hidden;
}

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:

/*CUSTOM VARIABLES HERE*/

.panels .panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--panel-width) + 1px);
  clip-path: inset(100% 0 0 0);
  background: var(--lightgray);
  transition: all 1s cubic-bezier(0.25, 1, 0.25, 1);
}

.panels .panel:nth-child(2) {
  left: var(--panel-width);
}

.panels .panel:nth-child(3) {
  left: calc(var(--panel-width) * 2);
}

.panels .panel:nth-child(4) {
  left: calc(var(--panel-width) * 3);
}

.panels .panel:nth-child(5) {
  left: calc(var(--panel-width) * 4);
}

.panels .panel:nth-child(6) {
  left: calc(var(--panel-width) * 5);
}

.panels .panel:nth-child(7) {
  left: calc(var(--panel-width) * 6);
}

.page-main {
  display: flex;
  height: 100%;
  padding: 100px 15px;
  overflow-y: auto;
}

.page-main > div {
  text-align: center;
  margin: auto;
}

.page-main > div > * {
  opacity: 0;
  transition: all 0.5s ease-out;
}

.page-main h1 {
  transform: translateY(-100px);
}

.page-main p {
  font-size: 20px;
  margin-top: 20px;
  transform: translateY(100px);
}

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.

As linhas azuis que aparecem entre os painéis

4. Disparar as animações JS

Quando a página é carregada, a página de JavaScript seguinte deve tocar nesta ordem:

Primeiro, os painéis devem aparecer de baixo para cima.
Em seguida, os painéis devem desaparecer e passar para o topo.
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:

Primeiro, quando a página carregar, adicionaremos o loaded classe para o body.
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:

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

window.addEventListener("load", () => {
  body.classList.add("loaded");
  
  lastPanel.addEventListener("transitionend", () => {
    if (body.classList.contains("second-round")) {
      body.classList.add("third-round");
    } else {
      body.classList.add("second-round");
    }
  });
});

Em vez do load evento, poderíamos ter usado o DOMContentLoaded evento.

E os estilos correspondentes do Página Carregando Animação JS:

.loaded .panels .panel {
  clip-path: inset(0);
  transition-delay: calc(var(--index) * 0.06s);
}

.loaded.second-round .panels .panel {
  clip-path: inset(0 0 100% 0);
}

.loaded.third-round {
  overflow: auto;
}

.loaded.third-round .page-main > div > * {
  opacity: 1;
  transform: none;
}

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.

Relacionado

Posted by admin

Tagged with

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	</span>Simple JavaScript Page Loading Animation<span style="color: #f4bf75">
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

1	panels-animation/
2	├── about.html
3	├── contact.html
4	├── index.html
5	├── main.css
6	└── main.js

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	}

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	}

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	});

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	}