Animação com gatilho scroll com Vanilla JavaScript

1. Apresentação: Olá, é bom ver você de volta. Mais uma vez, estou de volta com uma nova turma. E hoje, nesta aula, vamos aprender animação de rolagem em JavaScript. Vamos criar uma animação de gatilho de rolagem com a ajuda de JavaScript ML e CSS puros. Não vamos usar nenhuma biblioteca como a SAT. Portanto, esse é um layout simples de página da web. Se eu rolar na minha página, esta é a página número dois. E se eu rolar um pouco mais, quando a segunda página atingir uma certa distância, ela aciona uma animação. Isso acionou essa animação. Aqui aplicamos a animação de transformação e, se eu rolar esta página para cima, novamente, ela volta à sua posição original. Ele é acionado quando atinge uma certa distância. Da mesma forma, se eu fosse pular para outra página, novamente, ela atingia a posição certa, acionava a animação. Aqui aplicamos animação em escala com efeito de desvanecimento. Então, se eu rolar um pouco mais para baixo , nessa seção, aqui aplicamos animação rotativa com efeito de desbotamento E, por fim, aplicamos toda a animação e criamos uma galeria de imagens. Aplicamos animação rotativa, transformamos animação e alimentamos a animação juntos e criamos esta galeria Isso é o que vamos construir hoje nesta aula. Olá. Meu nome é John Shortca Sou desenvolvedor web e instrutor on-line da Fullstek. Então, a partir do próximo vídeo, vamos começar a prática. 2. Crie a estrutura HTML: Finalmente, estou no editor de código do meu estúdio e, como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo Scripto js e o arquivo CSS style dot E no meu diretório de trabalho atual, há uma pasta chamada images. E dentro dessa pasta, temos algumas imagens, como gatos, cavalos e leões, vamos usar essas imagens. Então, primeiro, dentro dessa página de estimativa, vou criar uma seção. Então, vou usar a tag de seção, seção. Em seguida, vou atribuir uma classe a essa tag, classe, e aqui vou atribuir a seção um. Com isso, quero atribuir outra classe a esta seção, que é show Animate. Então, dentro desta tag de seção, seguida, dentro desta tag de seção aqui, vou pegar uma tag H um, cabeçalho um. Além disso, vou definir uma classe para essa classe de tag de cabeçalho e vou torná-la animada Então, dentro da tag, vou digitar a primeira seção. Em seguida, vou pegar um parágrafo dentro desta seção usando a tag T, P, e também vou atribuir uma classe e o nome da nossa classe é animar esta Aqui vou digitar um pouco de DammiTextoWise, você pode digitar HTML, coma, CSS e JavaScript. Eu vou definir esses cinco. Depois disso, da mesma forma, vou duplicar esta seção Então, basicamente, aqui precisamos criar um total de cinco seções diferentes. Então eu dupliquei esta seção, e esta é a seção número dois, e vou usar o mesmo conteúdo aqui Eu não vou usar essa classe para animar. Eu não preciso disso por enquanto. Depois disso, novamente, vou duplicar esta seção, e esta é a seção número três Novamente, vou duplicar esta seção, e esta é a seção número quatro Além disso, você precisa fazer algumas alterações no título de uma tag, que é a quarta seção. Quarta seção. Esta é a terceira seção. Terceira seção, e esta é a segunda seção, e eu vou submeter este arquivo Depois disso, vou duplicar esta seção oito. Mas desta vez, vou chamá-la de seção cinco. Dentro desta Seção 5, eu quero colocar algumas imagens, não o texto. Então, aqui vou pegar outro Delement DV e o nome da nossa classe é Aqui, vou atribuir imagens a uma classe. Então, dentro dessa tag profunda, vou usar uma tag de imagem. Aqui, vou atribuir um total de três imagens. Então, para digitar a imagem IMG como fonte, e como fonte, aqui, vou usar a primeira imagem, cats dot JPG Que está dentro da minha pasta de imagens, images slash cat dot JPG Com isso, também vou atribuir uma classe e nosso nome positivo é animate. Eu quero subtrair esse arquivo. Opa, aqui eu cometi um erro de solo Precisamos fornecer o caminho no código-fonte, não no antigo. Então, vou revisar esse caminho de arquivo a partir deste lugar e vou colocá-lo dentro desse atributo de origem. Então eu vou configurar esse arquivo. É cats dot JBG. Vou substituir essa pilha. Depois de configurar esse arquivo, vou duplicar esta seção Em seguida, vou atribuir a próxima imagem, que é hors dot GPG Então, em vez de usar gatos, digite hors dot GPG Então eu dupliquei essa linha e desta vez vou usar os íons da terceira imagem Lion dot JPG Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu mostrar meu navegador, esse é o nosso navegador, é assim que nossa página se parece. Em seguida, precisamos estilizar essa página. Vamos entrar nesse arquivo CSS de pontos de estilo. Basicamente, fizemos nossa parte CSS e precisamos entrar no arquivo CSS de pontos de estilo. Como você pode ver, aqui eu abro um arquivo CSS. No começo, vou usar, vou importar uma fonte, que é Poppins do Google Depois disso, vou selecionar o seletor universal. Vou digitar estrela dentro dos Carlevs. A primeira propriedade que vou usar é margem, margem, e vou dizer que é margem zero. Em seguida, vou definir o preenchimento, preenchimento também de toda a direção zero É um seletor universal. É por isso que ele aplicará toda a margem e preencherá todos os elementos Em seguida, vou definir o tamanho da caixa, caixa, tamanho , caixa de borda Depois disso, vou estilizar a tag da seção. Seção. Então, no alias, diz: primeiro, vou primeiro usar essa propriedade, display, e vou torná-la flexível Em seguida, justifique o conteúdo, Justify Content Center. Além disso, vou digitar align IMs center porque quero centralizar os elementos horizontal e verticalmente e verticalmente Em seguida, vou definir a direção da flexão, a direção flexão, a direção da flexão, vou usar Depois disso, vou definir a altura mínima para esse contêiner. Altura mínima significa altura, e aqui vou usar 100 V HV para altura Em seguida, vou definir a cor do plano de fundo. Fundo do chão, e ele, eu vou usar a hashtag um, A, 24, dois D. Esse código de cores Este código de cor cinza escuro. Não é cinza. É um código de cores azul escuro. E depois disso, vou ocultar o estouro, às vezes o estouro oculto e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, esta é a aparência da nossa tag de seção. Temos a seção ptolFive e, em toda essa seção, ela aplicou esse escopo CS É por isso que toda a seção parece a mesma. Agora, vamos estilizar a outra seção, precisamos mudar a cor de fundo. Para isso, vamos voltar ao código do Visual Studio e, desta vez, vou focar na seção dois pontos ACC, Seção dois Então, dentro do Carlrss, eu quero mudar a cor de fundo, e eu quero usar a cor RGB, RGB para vermelho, eu vou usar 96 para cabelos verdes, eu vou usar 30, e para azul, eu vou É uma espécie de cor roxa, e eu vou guardá-la. Da mesma forma, precisamos alterar a cor de fundo da outra seção. Então eu dupliquei esse código, e é para a Seção 3 E para a Seção três, eu quero usar a cor de fundo. Esse código de cores, Hatag zero, cinco, seis, 96, quatro Em seguida, vou duplicar essa linha e, desta vez, vou selecionar a Seção quatro E aqui eu vou dizer que a cor Diagraund tem dag F, se for um seis duplo zero, essa Em seguida, vou estilizar a seção número cinco. Então eu dupliquei esta seção e vou mudar a cor de fundo da seção número cinco e quero fazer isso aqui. Vou aplicar a cor RGB, RGB, e para vermelho, vou usar o valor alto de 255 para o verde, aqui, vou digitar zero e para o azul, vou passar 85 Em seguida, vou definir esse arquivo neste arquivo se eu voltar ao meu navegador, aqui você pode ver todas as cores diferentes de todas as seções. Agora, precisamos trabalhar no tanque H dois, e agora precisamos trabalhar no elemento H, no cabeçalho de um elemento. Então, vamos entrar no código do estúdio. E desta vez, vou mirar no H 1. Dentro do ColSSF, vou definir o tamanho da fonte, fonte, tamanho, quero usar o tamanho da fonte de 90 pixels e, em seguida, vou definir a cor da fonte, a cor e quero usar a cor branca. Então, o tempo tem a tag E eu vou configurar esse arquivo. Agora, vamos aplicar o estilo da fonte. Então, para aplicar o estilo da fonte dentro desse seletor universal, vou usar a propriedade da família de fontes e a família de fontes precisam usar pop-ins da família de fontes Aparece e vem da família SanSerifon. Sanseri E eu vou atear esse fogo devolver esse cinquenta ao meu irmão É assim que nossa fonte se parece agora. Em seguida, vou estilizar esses parágrafos. Vamos entrar no editor de código novamente e, depois disso, vou selecionar a tag do parágrafo, P. Em seguida, dentro do recesso colorido, a primeira propriedade eu vou usar o tamanho da fonte, e aqui, vou digitar o tamanho da fonte 35 pixels Depois disso, vou definir cor, cor e, para cor, vou usar esse código de cores, zero, zero EF, essa cor azul clara. Depois disso, vou definir a fonte como oito. Fonte até oito, espessura da fonte, quero um pouco de pedregulho, vou usar 600 Em seguida, vou mudar a cor do parágrafo da Seção dois, Sootyp dot EC, dois parágrafos espaciais Então, dentro do clirass aqui, vou usar cores e quero o mesmo código de cores, então amTyphTag zero, zero, zero E aqui vou usar variantes de cor verde do tipo Hatack zero f zero, essa cor verde claro Então eu dupliquei esta seção, e esta é para a seção número três, e aqui eu quero mudar a cor FF zero, essa cor amarela clara Então eu vou mudar a cor para a seção número quatro, Seção quatro, e eu vou usar e na seção, eu vou usar uma cor diferente zero, cinco, 69, 64, esse código de cor, esse código de cor verde escuro. Depois disso, precisamos trabalhar nas imagens. Então, nessa seção, primeiro, vou selecionar T SEC, Seção cinco, depois quero selecionar as imagens que estão dentro da Seção cinco. Eu quero ter como alvo a classe Dot Images. Em GES. Em seguida, dentro dos cols. Basicamente, aqui eu miro. Basicamente, aqui da Seção cinco, quero direcionar essas imagens de elementos profundos. E dentro dos armários eu vou usar a propriedade de exibição, Display, eu quero display flex. Com isso, quero fornecer uma pequena lacuna entre esses itens, alguma lacuna de tipo, e quero uma lacuna de 40 pixels, 40 pixels. E eu vou satisfazer. Depois de voltar satisfatoriamente ao meu navegador, é assim que o texto do nosso parágrafo se parece e é assim que nossas imagens se parecem Agora vamos nos aproximar um do outro. Em seguida, precisamos trabalhar nessas imagens. Precisamos fornecer largura máxima. Precisamos definir a largura máxima para essas imagens. Ou então, voltemos aos usuários para o seu código. E aqui, vou selecionar a Seção cinco, o ponto SEC, Seção cinco, a Seção cinco e, a partir da Seção cinco, quero direcionar as imagens. Images DV e, do Images Dev, quero segmentar a tag IMG Image da imagem Então, dentro do Cariss aqui, vou usar a chamada de propriedade max com largura máxima, e vou defini-la em 350 pixels Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver o resultado. Então, essa é a primeira parte deste tutorial. Nessa seção, trabalhamos no design do layout. Então, na próxima parte deste tutorial, iniciaremos o JavaScript. Então, obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 3. Comece a trabalhar com JavaScript e adicione o curso em uma seção: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste tutorial e, nessa seção, vamos trabalhar em JavaScript. Vamos começar a trabalhar nos efeitos de rolagem. Vamos entrar no código do estúdio e entrar no arquivo script dot js. Inicialmente, dentro do arquivo js do script, vou focar em todas essas seções. Vou declarar uma variável AET atraso e o nome da nossa variável é seção Seção igual a esta, vou digitar document, quirselector Quielector dentro da redonda dentro um único curso Quero segmentar todas as tags de seção usando seu nome de classe section, section section Depois disso, vou digitar o ponto da janela no método de rolagem, na rolagem, igual a aqui, vou usar a função de seta. Então, dentro do Clss, basicamente, essa função é executada sempre que percorremos a página Dentro dessa função, precisamos examinar toda a seção, uma por uma. Seções de hemotp, eu vou usar, vou usar para cada loop, para cada um Então, dentro dos vestidos redondos aqui, vou passar pela seção AEC e pela função de seta Então, dentro da resina Cal, aqui examinamos esta seção e cada seção chamada sec Em seguida, uso uma função de seta para retorno de chamada e, dentro dela, declararei uma nova variável T atrasada e o nome da nossa variável está atrasado Aqui, vou declarar a distância de rolagem do nome da variável Distância de rolagem igual ao ponto da janela, scrollY, scroll Y. Basicamente, essa variável armazenará o valor da distância da rolagem da parte superior da tela até o quanto rolamos, ela armazenará o valor nessa Em seguida, precisamos recuperar a distância da seção. Vou declarar outra variável com atraso e nome da nossa variável é distância de seis seções Distância da seção igual ao segundo ponto, fora do local, fale. E então vamos para essa linha. Essa propriedade de deslocamento é a distância da borda externa da seção até a borda superior de sua matriz Deixe-me explicar isso com um exemplo, qual é o valor máximo do Oset Aqui você pode notar a distância. Esta é nossa primeira seção e esta é nossa segunda seção, e a distância entre a posição superior do navegador e a posição superior da segunda seção é chamada de distância superior deslocada Precisamos extrair essa distância de rolagem igual à distância do topo da página. Eu quero aplicar um pouco de estilo neste elemento da segunda segunda seção. Da mesma forma, precisamos nos inscrever na terceira seção, na quarta seção e na quinta seção. Então, sempre que atingirmos uma certa distância da seção da parte superior do navegador , eu quero acionar uma animação. Caso contrário, quero acionar um estilo. Basicamente, é bastante familiar com animação escrotal em Gizé Mas aqui não vamos usar nenhuma biblioteca para isso. Vamos usar JavaScript bruto. Vamos voltar ao código do estúdio. E aqui eu vou usar a condição. Se estiver dentro da distância de rolagem das redondas, a distância rolagem é maior que igual à distância de segundos Então, dentro do Carl diz, aqui, se essa condição for verdadeira, então aqui, eu vou digitar sec dot class list Quero adicionar uma turma. Adicionar ponto à lista de classes. Dentro do ss redondo, aqui, vou definir uma classe e nome da nossa classe é show animate. Mostrar animação. E semi, vá para uma linha. Como você pode ver, a distância I é igual à distância da seção; caso contrário, maior que a distância da seção, a instrução IP será executada Agora vamos ao navegador e ver quando essa condição está acontecendo. Então, aqui na primeira página. Desculpe, seção superior. A distância da seção é o valor fixo. A distância entre o topo e a segunda seção é a altura da primeira seção. Nunca muda, a menos que mudemos a altura. Enquanto isso, a distância de rolagem está mudando de valor. Quando rolamos a página para baixo, caso contrário, rolamos a página para cima, o valor é alterado. Em algum momento, esses dois valores são exatamente iguais. É aqui que a condição de IP se torna verdadeira, e isso acontecerá até que a desçamos até a borda superior da segunda seção. Então, sempre que ele toca na borda superior do navegador, ele aciona a animação Para esclarecer melhor esse conceito, vamos inspecionar a página Aqui vou inspecionar a página. Agora, aqui você precisa dar uma olhada mais de perto na segunda seção. Aqui eu rolo minha página para baixo e as seções tocam na parte superior. Como você pode ver, não está funcionando porque eu saltei um pouco de silamismo mais tarde para o editor de código Sim. Essa é a silabística. Não é uma aula. É etiqueta. Precisamos selecioná-lo usando o nome da tag porque se eu mostrar minha página estática de índice, é um nome de tag. Não usamos nenhum nome de classe para selecionar esse elemento. Primeiro, precisamos usar o nome da tag e também fazer alguma correção, a grafia da distância DI, não E, distância , DI, este, e precisamos definir esse arquivo novamente. Vou configurar esse arquivo e voltar para o navegador. Desta vez, se eu rolar minha página para baixo e clicar na segunda seção, posição superior, tocar na parte superior do navegador, você poderá ver que ela adicionou classe à nossa seção em nossa segunda seção. Da mesma forma, se eu rolar para baixo mais uma terceira seção, posição superior, toque nesta seção, toque na parte superior. Agora você pode ver dessa vez, novamente , adicionar uma nova classe. Em nossa seção três. Além disso, se eu rolar um pouco para baixo e, novamente, se a posição superior da quarta seção tocar na parte superior do navegador, você poderá vê-la adicionada na classe. É assim que funciona. Depois disso, agora precisamos direcionar essa classe show animate estilizar esta seção e implementar a animação Vamos fazer isso mais tarde, mas antes que eu queira definir alguma condição no meu Javascript, deixe-me mostrar o que. Vamos entrar no código do estúdio e aqui precisamos lidar com a parte s. Então, para digitar s dentro dos cálices. Desta vez, quero remover essa classe show animate. Se a condição não corresponder, então eu digito a seção SEC dot class list, dot, desta vez vou usar o método remove, remove. Então, dentro das rodadas, dentro do único curso, vou passar o nome dessa classe, show animate Portanto, sempre que a condição não for verdadeira, ela removerá a classe desta seção e o semicon para finalizar essa linha Vamos configurar o arquivo e voltar para o navegador. Agora, você pode observar se eu rolar minha página para baixo e a condição é verdadeira, como você pode ver, na aula por meio da animação em nossa seção dois Mas se eu escolhi esta página e essa condição falhar, novamente, ela removeu a turma desta seção. Da mesma forma, se eu rolar a página e a Seção três tocar na posição superior, agora você poderá vê-la na aula, mostrar animação Se eu falhar na condição, você pode vê-la remover a classe daqui. Usando isso, podemos acionar a animação. Também podemos remover a animação de nossas seções. Agora, antes de trabalhar nesta aula, quero definir outra condição. Agora eu quero adicionar a classe antes desta terceira seção, caso contrário, a segunda seção chegará ao topo. Quero adicionar essa classe, mostrar animação em nossa segunda seção quando ela atingir essa distância antes de tocarmos na barra de URL do navegador Para isso, basta menos. Da distância aqui, vou para menos 150 pixels, 150 pontos Se eu definir esse arquivo e voltar ao navegador, agora você pode notar que o Weboy rolou minha página para baixo e esta seção alcançou essa posição, agora você pode vê-la na aula show Da mesma forma, se eu rolar a página para baixo e esta seção, o topo da terceira seção alcançará essa posição, modo que, como você pode ver na aula desta seção, mostre animação Fazemos isso porque, quando eu rolo minha página para baixo e o conteúdo desta seção fica visível, quero executar essa animação. É por isso que eu faço isso. Isso é tudo para a segunda parte deste tutorial. Na terceira parte deste tutorial, vamos estilizar a classe. Vamos estilizar a classe Show Animate em nossa seção de estilo Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 4. Comece a trabalhar na animação: Olá, pessoal. É bom ver você de volta. Essa é a terceira parte deste tutorial. Em nossa segunda parte, aprendemos como adicionar uma classe em nossa seção. Se eu inspecionar esta seção e rolar para baixo nesta página em um determinado ponto, se nossa segunda seção atingir uma certa distância, ela adicionará uma classe em nossa segunda seção Mostrar animação. Da mesma forma, nossa terceira seção atinge certa distância, adiciona a classe, mostra animação. E se eu rolar para cima nesta página e a condição se tornar falsa , ela removerá a classe dessas seções. Agora, no estúdio, vamos estilizar essa aula, mostrar animação. Vamos voltar ao código do isal studio e vou entrar no arquivo CSS de estilo Depois disso, agora nessa seção, quero segmentar a classe de animação que está dentro da tag da seção Aqui vou digitar aqui. Vou selecionar a classe animate, que está dentro da seção, depois da seção animate Animate Então, dentro do Cariss, a primeira propriedade, vou usar a opacidade Opacidade, vou torná-la zero. Se aplicarmos opacidade zero, ela ficará oculta Em seguida, vou aplicar a propriedade do filtro. Filtre, e aqui eu quero aplicar o desfoque e quero o desfoque de cinco pixels Depois disso, vou aplicar a transição. Transição e para a transição que eu quero, a duração da transição é de 0,5 segundo. Se eu definir esse arquivo e voltar ao meu navegador, agora você poderá ver que todos os elementos estão ocultos. Você não pode ver nenhum elemento vinculado à classe animate Vamos voltar ao código novamente. Agora, sempre que rolamos esta página, quero tornar essa seção visível novamente. Eu quero a tag HH two e a tag de parágrafo. Para isso, precisamos ter como alvo a classe show animate. Então, seção de tempo, mostre animação. Mostre espaço animado, ponto, eu quero segmentar a classe animada. Eu quero estilizá-lo. Então, dentro do fígado, diz: primeiro, eu vou fazer opacidade, opacidade, eu vou torná-la Porque eu quero torná-lo totalmente tópico. Basicamente, quero dizer que quero torná-lo visível novamente. Depois disso, vou aplicar filtro Filter, Blur, blur. E aqui eu vou passar zero pixel. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver sempre que eu rolei na minha página e esta seção está ativa, agora você pode ver o texto aparecer Então, quando a classe show animate for adicionada a esta seção, ela mostrará o texto Como você pode ver, sempre que eu percorro minha página e a terceira seção está ativa, ela mostra o conteúdo Nas semifinais, trabalhe para a quarta seção. E se eu rolar para cima nesta página, como você pode ver, ela oculta o texto, ela fica invisível novamente. Agora você pode entender por que a primeira seção já está visível? Porque se eu mostrar meu arquivo de estimativa de pontos de índice, como você pode ver, ela usa show animate class Nós passamos manualmente essa aula nessa seção. É por isso que nossa primeira seção contém tudo que fica sempre visível e agora podemos adicionar efeitos diferentes em seções diferentes. Vamos trabalhar com o arquivo CSS e agora quero direcionar a classe animate que está dentro da segunda seção Então digite dot SEC seção dois e, a partir daqui, eu quero segmentar a classe animate, animate Então, dentro do Carras eu quero usar a propriedade transform, transform, e quero mover esse elemento 100% de excesso na direção do excesso Vou usar traduzir X, traduzir X, 100%. Então eu preciso desse arquivo. Eu configurei esse arquivo, se eu voltar ao meu navegador, agora você pode notar que vamos mover esse elemento 100% na direção XX. Agora, sempre que eu rolar esta página, quero mover esse elemento dessa posição para a posição zero. Para isso, vou duplicar esta seção e sempre que a classe show animate estiver ativa dentro desta seção, alguns digitam show animate, show animate Então eu quero fazer com que seja 0%, caso contrário, zero, zero simples. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, volto ao meu navegador, agora você pode perceber que sempre que eu rolo minha página para baixo, em nossa segunda seção, ela vem dessa direção. Da mesma forma, podemos adicionar efeitos diferentes para nossos diferentes elementos, como a terceira seção. Então, vamos fazer isso. Em seguida, vou duplicar esta seção e, para a seção três, vou direcionar a seção três, e aqui vou usar a propriedade de escala Escala. Em primeiro lugar, quero reduzir a tag do título e o elemento. Vou fazer com que seja 0,70 0,7 vezes sempre que atuarmos como show animate class Nesse caso, quero ampliar esse elemento, escalar Aqui eu vou usar um Val. E eu vou configurar esse arquivo. Vamos ao navegador. Como você pode ver, quando vamos pular para a terceira seção, ela aumenta o número de alienados quando a condição se torna falsa; novamente, ela desaparece Agora, vamos trabalhar na quarta seção. Novamente, vou duplicar esta seção. E desta vez, quero focar na quarta seção aqui. Quero aplicar a propriedade de rotação, Transformar, transformar, girar e, por padrão, quero girá-la em 30 graus e sempre que a classe show animate estiver ativa, quero girar até Vou configurar esse arquivo. Depois de definir esse arquivo, volto ao meu navegador e chegar à quarta seção. Agora você pode notar que esse elemento está girando. Novamente, você pode ver que é assim que o conteúdo é girado. Agora, vamos trabalhar na última seção, quinta seção. Em nossa quinta seção, temos três imagens. Para isso, vamos entrar no código do Visual Studio e, primeiro, vou duplicar esta seção E aqui, vou focar na Seção cinco e, nessa seção, quero aplicar a tradução X com valor de rotação Traduza X 100%, 100%. Com isso, quero aplicar o valor de rotação, girar e quero girá-lo até Então, aqui, eu vou aplicar translate g translate g, vou torná-lo zero. Se eu definir esse arquivo e voltar ao meu navegador e rolar para baixo até a seção de imagens, você poderá ver o resultado. Agora eu quero adicionar um pouco de atraso entre essas imagens. Também no parágrafo. Eu quero dizer este parágrafo. Para isso, aqui, vou usar a classe animate, que está dentro da tag de parágrafo, algum tipo P dot animate Dentro dos escultores, a propriedade que vou usar é de transição Faça a transição e eu quero adicionar um atraso de transição de 0,2 segundos. Depois de configurar esse arquivo, sempre que volto ao meu navegador e percorro esta página, agora você pode notar que depois de H uma tag, aparece a tag de parágrafo porque aqui adicionamos detalhes do porque aqui adicionamos detalhes atraso de transição neste parágrafo. Da mesma forma, se eu for pular para a quarta seção, depois de girar a tag H um, ela girará o parágrafo por causa desse atraso de transição de 0,2 segundos Em seguida, quero adicionar um pouco de atraso na imagem número dois e na imagem número três. Vamos voltar ao código de estúdio do usuário. Se eu mostrar minha página de estimativa de índice, como você pode ver aqui dentro desta classe de imagem, dentro desse elemento profundo, temos um total de três imagens. Precisamos segmentar a imagem nona criança dois e três. Para isso, vamos ao arquivo SASS de estilo e aqui. Vamos usar o seletor infantil, algum tipo de ponto, que é da Seção cinco, algum tipo de seção cinco, espaço, vou direcionar a imagem, ING, tag de imagem Então, dentro do cólon, quero matar a segunda criança, algum tipo N TH, enésima criança, enésima criança, quero atingir a segunda, vou passar para Então, dentro do carnívoro, vou usar uma propriedade chamada atraso de transição Atraso na transição e eu vou ultrapassar o atraso de transição de 0,2 segundos. Em seguida, quero selecionar o terceiro filho, três, a terceira imagem, aqui vou adicionar atraso de transição, 0,4 segundo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu usar meu navegador e pular para a quinta seção, agora você pode ver aqui que você pode notar que adicionamos atraso de detalhes na segunda imagem e na terceira imagem. É assim que criamos essa animação de gatilho de rolagem sem nenhuma biblioteca. Podemos fazer isso facilmente usando a animação GSAP, mas aqui não usamos nenhuma biblioteca Aqui, usamos JavaScript puro básico para fazer isso e CSS. Obrigado por assistir a este vídeo, fique ligado em nosso próximo projeto de animação em JavaScript