171 lines
11 KiB
JavaScript
171 lines
11 KiB
JavaScript
// Registra o plugin ScrollTrigger do GSAP
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Seleciona o container principal, seções, barra de progresso e blocos individuais
|
|
const container = document.querySelector(".container");
|
|
const sections = gsap.utils.toArray(".container .panel");
|
|
const progressBarFill = document.querySelector(".progress-bar-fill");//Barra de progresso
|
|
|
|
//Blocos que reagem com o deslocamento da barra de progresso
|
|
const bloco1 = document.querySelectorAll(".blocos_1_1");
|
|
const bloco2 = document.querySelectorAll(".blocos_1_2");
|
|
const bloco3 = document.querySelectorAll(".blocos_1_3");
|
|
const bloco4 = document.querySelectorAll(".blocos_1_4");
|
|
const bloco5 = document.querySelectorAll(".blocos_1_5");
|
|
|
|
// Configuração da animação do GSAP
|
|
gsap.to(sections, {
|
|
xPercent: -100 * (sections.length - 1), // Move as seções horizontalmente
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: ".container", // Define o gatilho para a animação
|
|
pin: true, // Mantém o gatilho fixo durante a animação
|
|
scrub: 0.5, // Velocidade de "esfregamento" para a animação
|
|
snap: false, // Desativa o "snap" para a animação
|
|
end: () => "+=12000" + container, // Define o ponto final da animação
|
|
onUpdate: (self) => { // Função chamada durante cada atualização da animação
|
|
const progress = self.progress.toFixed(2); // Progresso da animação
|
|
const width = progress * 100; // Largura da barra de progresso
|
|
|
|
// Atualiza a largura da barra de progresso
|
|
progressBarFill.style.width = width + "vw";
|
|
|
|
|
|
// Bloco do primerio conteudo
|
|
bloco1.forEach(bloco1 => {
|
|
const bounds = bloco1.getBoundingClientRect();
|
|
// Cenario 1 onde a barra de progresso está sobre o elementos
|
|
if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
|
|
bloco1.style.transform = "scale(1.5)"; //definição de escala maior
|
|
bloco1.style.transition = "1s ease"; //tempo da transição que será feita na escala
|
|
document.querySelector('.conteudo1_1').style.display = 'flex'; // Definição da visibilidade do elemento na pagina como flexivel
|
|
document.querySelector('.conteudo1_1').style.position = 'fixed'; // Definição da posição do elemento na página como fixado
|
|
|
|
|
|
// Cenario 2 Onde a barra de progresso não está mais sobre o elementos
|
|
} else {
|
|
|
|
bloco1.style.transform = "scale(1)"; //definição de escala que retornar ao ponto zero, em outra palavras ao normal.
|
|
bloco1.style.transition = "1s ease"; //tempo da transição que será feita na escala
|
|
|
|
}
|
|
});
|
|
|
|
// Bloco do segundo conteudo
|
|
bloco2.forEach(bloco2 => {
|
|
const bounds = bloco2.getBoundingClientRect();
|
|
// Cenario 1 onde a barra de progresso está sobre o elementos
|
|
if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
|
|
bloco2.style.transform = "scale(1.5)";//definição de escala maior.
|
|
bloco2.style.transition = "1s ease";//tempo da transição que será feita na escala.
|
|
|
|
document.querySelector('.conteudo1_2').style.display = 'flex';
|
|
// Definição da visibilidade do elemento na pagina como flexivel
|
|
document.querySelector('.conteudo1_2').style.position = 'fixed';// Definição da posição do elemento na página como fixado
|
|
|
|
document.querySelector('.conteudo1_2').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_2').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
} else {
|
|
|
|
bloco2.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
|
|
bloco2.style.transition = "1s ease";//tempo da transição que será feita na escala
|
|
|
|
document.querySelector('.conteudo1_2').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
document.querySelector('.conteudo1_2').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// Bloco do Terceiro conteudo
|
|
bloco3.forEach(bloco3 => {
|
|
const bounds = bloco3.getBoundingClientRect();
|
|
// Cenario 1 onde a barra de progresso está sobre o elementos
|
|
if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
|
|
bloco3.style.transform = "scale(1.5)";//definição de escala maior.
|
|
bloco3.style.transition = "1s ease";//tempo da transição que será feita na escala.
|
|
|
|
document.querySelector('.conteudo1_3').style.display = 'flex';
|
|
// Definição da visibilidade do elemento na pagina como flexivel
|
|
document.querySelector('.conteudo1_3').style.position = 'fixed';// Definição da posição do elemento na página como fixado
|
|
|
|
document.querySelector('.conteudo1_3').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_3').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.
|
|
|
|
} else {
|
|
|
|
bloco3.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
|
|
bloco3.style.transition = "1s ease";//tempo da transição que será feita na escala
|
|
|
|
document.querySelector('.conteudo1_3').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
document.querySelector('.conteudo1_3').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
}
|
|
});
|
|
|
|
// Bloco do Quarto conteudo
|
|
bloco4.forEach(bloco4 => {
|
|
const bounds = bloco4.getBoundingClientRect();
|
|
// Cenario 1 onde a barra de progresso está sobre o elementos
|
|
if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
|
|
bloco4.style.transform = "scale(1.5)";//definição de escala maior.
|
|
bloco4.style.transition = "1s ease";//tempo da transição que será feita na escala.
|
|
|
|
document.querySelector('.conteudo1_4').style.display = 'flex';
|
|
// Definição da visibilidade do elemento na pagina como flexivel
|
|
document.querySelector('.conteudo1_4').style.position = 'fixed';// Definição da posição do elemento na página como fixado
|
|
|
|
document.querySelector('.conteudo1_4').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_4').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.
|
|
|
|
} else {
|
|
|
|
bloco4.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
|
|
bloco4.style.transition = "1s ease";//tempo da transição que será feita na escala
|
|
|
|
document.querySelector('.conteudo1_4').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
document.querySelector('.conteudo1_4').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
}
|
|
});
|
|
|
|
// Bloco do Quinto conteudo
|
|
bloco5.forEach(bloco5 => {
|
|
const bounds = bloco5.getBoundingClientRect();
|
|
// Cenario 1 onde a barra de progresso está sobre o elementos
|
|
if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
|
|
bloco5.style.transform = "scale(1.5)";//definição de escala maior.
|
|
bloco5.style.transition = "1s ease";//tempo da transição que será feita na escala.
|
|
|
|
document.querySelector('.conteudo1_5').style.display = 'flex';
|
|
// Definição da visibilidade do elemento na pagina como flexivel
|
|
document.querySelector('.conteudo1_5').style.position = 'fixed';// Definição da posição do elemento na página como fixado
|
|
|
|
document.querySelector('.conteudo1_5').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_5').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.
|
|
|
|
} else {
|
|
|
|
bloco5.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
|
|
bloco5.style.transition = "1s ease";//tempo da transição que será feita na escala
|
|
|
|
document.querySelector('.conteudo1_5').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
|
|
document.querySelector('.conteudo1_5').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
},
|
|
}); |