Animação GSAP

1. Apresentação: Olá, pessoal. Bem-vindo ao GSAP Animation Viagem do iniciante ao avançado. Sou Join the Shortcut, web da FooStac, programador de Python e instrutor apaixonado por dar vida desenvolvedor web da FooStac, programador de Python e instrutor apaixonado por dar vida à animação na web. Se você já ficou fascinado por uma transição suave, efeitos atraentes ou introdução dinâmica de páginas , este curso é para Agora, a pergunta é por que você escolhe a animação SAP? plataforma Grinsoc Animation ou SAP é uma das bibliotecas JavaScript mais poderosas para animação na web Ele permite que você crie animações incríveis na web com facilidade, seja uma animação simples ou leve, caso contrário, uma animação complexa acionada por rolagem Ao contrário da animação CSS, o GSP oferece mais controle, melhor desempenho e infinitas possibilidades Agora vamos falar sobre o que você aprenderá com isso. Ao longo deste curso, exploraremos tudo, desde a animação básica de lacunas até a sequência de movimento avançada, animações SVG e efeitos baseados em rolagem Vamos aprender sobre cronogramas, animações rolagem do TigeredPath No final, você poderá criar animações de nível profissional. Isso levará seu site e projetos a um novo patamar. Não importa se você é iniciante ou já está familiarizado com os princípios da animação Eu vou te guiar passo a passo. Se eu falar sobre os projetos que abordarei neste tutorial, criaremos animação de cursor personalizada, animação Elastric string Vigi, projeto de animação de linha do tempo, animação de texto e animação de texto em rolagem Elastric string Vigi, projeto de animação de linha do tempo, animação de texto e animação de texto em rolagem . Depois disso, depois disso, vou criar um design de ritmo de aterrissagem. Além disso, vou analisar animações de caminhos de movimento, mais animações SVG e muito De tempos em tempos, vou adicionar um novo projeto em nossa classe. Vamos começar e levar seu design para o ar com o SA. 2. O que é animação GSAP: Olá, bem-vindo ao curso Mastering SAP Animation. Meu nome é Joana Shortca. Sou desenvolvedor Full Stack Web e instrutor on-line. Usamos a Biblioteca SAP para animação na web. Neste curso, aprenderemos muitas coisas sobre animação SAP com ótimos detalhes. E vou garantir que você aproveite todo o processo. Agora, vamos ver o que é animação JSAP. Basicamente, o JSAP é uma biblioteca de animação em JavaScript. Eu quero dizer que é uma biblioteca de animação pré-construída, que é feita por JavaScript. Agora a pergunta é: o que é animação? Que tipo de animação? Eu quero dizer a animação na web. Qualquer movimento que você vê em sua página da web, ele é feito com animação. Qualquer tipo de transição é uma animação, e a animação na web nos ajuda a interagir com o usuário, além de aprimorar a experiência do usuário, além de os usuários passarem uma boa quantidade de tempo em sua página da web Então essa é a vantagem de usar animação em nossas páginas da web. Mas o que exatamente é o JSAP? Como eu disse, o SAP é uma biblioteca JavaScript e sua forma completa é a plataforma Greensok Animation É uma biblioteca JavaScript que nos ajuda a realizar uma animação complexa em nossa página da web Com a ajuda do SAP, precisamos escrever uma pequena quantidade de código para criar belas animações na web Ele nos fornece mais recursos com menos código. Se você não tem conhecimento prévio sobre JavaScript, também pode aprender animação JSAP Mas é bom, se você tem conhecimento do modelo de objeto de documento Dom em JavaScript. E se você não tem nenhum conhecimento sobre CSS e TML, esse curso não é para você Não é para iniciantes. Agora, vamos entrar no site oficial da animação SAP. Este é o site oficial da animação GSAP, sap.com. Se você clicar neste site, aqui poderá observar algumas animações. Se você clicar neste link, poderá observar alguns exemplos de animação. Como você pode ver, todas essas animações são criadas pelo GSAP Além disso, é o site oficial. Se eu rolar um pouco para baixo, aqui você pode ver muitas animações SVG, animações de mudança de forma, animações de efeitos de texto e, em seguida, animação com gatilho de rolagem Então, como você pode ver, quando eu rolo esta página, nessa seção, essa área se move lateralmente Além disso, ele executa algumas animações bonitas. Podemos aplicar efeitos de atenuação e muito mais. Há muitas coisas que podemos fazer com a animação do GSAP, como animações escolares, AVG, animações de texto, interações de interface do usuário e outras animações e Usando o JSAP, podemos executar o gatilho de rolagem, rolar de forma mais suave e rolar Além disso, na seleção de SVG, podemos usar a morfologia SVG, como mudança de forma, animação de desenho SVG, animação caminho de movimento SBC Então, para a interface do usuário, podemos aprender, virar, dividir texto, arrastar e, para o texto, podemos usar texto dividido, texto embaralhado e Vamos aprender tudo isso em nossos próximos tutoriais Este curso é um pacote completo de animação SAP. E se você quiser ver mais exemplos, nesse caso, você precisa clicar em Showcase Aqui você pode ver centenas de sites feitos com animação GAP. Se eu rolar um pouco para baixo, eles também são classificados por tipo de animação, como animação de três gs, animação SVG, animação de texto, animação escolar, reação de fluxo de ondas e Neste tutorial, basicamente, vamos nos concentrar nos conceitos de código JSAP Além disso, você aprenderá SVG, animação pixelada, animação rolante e interações com a interface do usuário Agora você pode ter se perguntado como podemos implementar a animação SAP em nossas páginas da web Para isso, você pode pesquisar o link da CRL. Então, aqui você pode pesquisar o CRN Link no Google. Então digite G SAP Syrian. Como você pode ver, ele fornece um site chamado cinjs.com. Se eu abrir este site, e aqui você poderá ver todas as animações de SP relacionadas aos sírios SP relacionadas Esta é a animação principal do Can about SP, e essas são as bibliotecas suportadas sobre animação SAP, como sleep, motion path, plugin, scroll trigger, plugin de texto. Vamos aprender tudo isso em nossos próximos tutoriais. Não se preocupe com isso. Nessa seção, você pode encontrar todos os CENS importantes Além disso, você pode acessar a seção de documentos deste site. Além disso, você pode encontrar o link CDN neste site. Se você escolher a seção de instalação, nessa seção, poderá descobrir como instalá-la usando o NPM, note o gerenciador de pacotes Além disso, você pode encontrar o link CDN desta biblioteca. Além disso, se você tiver conhecimento sobre RN, poderá implementá-lo Então, neste tutorial, basicamente, vamos nos concentrar no CDM. Agora, deixe-me mostrar um projeto que vamos construir nesta série. 3. Implementação de animação GSAP: Portanto, este é o primeiro tutorial relacionado à animação SP. Neste tutorial, aprenderemos como podemos implementar a animação JSP em nossa página da web Além disso, vou explicar a palavra-chave de e para na animação JSP Então, vamos atrofiar a tática. Então, como você pode ver no meu diretório de trabalho atual, temos apenas o arquivo HTML de pontos de índice Agora vou criar um arquivo JavaScript, Sound type app dot Js. E eu vou apertar Enter. E agora vou vincular esse arquivo JavaScript ao meu documento HTML Então, aqui vou usar a tag Script. Fonte de script igual a app dot js. Vou configurar esse arquivo. E você pode usar qualquer nome para seu arquivo JavaScript. Não é obrigatório usar o app dot js. Você pode usar script root js, hm doj, ht dogs Tudo gira em torno de você. Agora, vamos voltar para a página do documento. Depois de abrir a seção de documentação, você precisa clicar na opção suspensa Instalar Caso contrário, você pode pesquisar por Instalar. Vou clicar nesta seção Instalar, e aqui ela fornece todos os tipos de métodos de instalação. Usando o gerenciador de pacotes de notas NPM, você também pode usar o CEN, rede de entrega de conteúdo, e também fornecer R. A melhor e mais fácil maneira de usar essa animação é E este é o link do CEN fornecido pelo JSAP Devo copiar este link e voltar para o editor de código do meu estúdio Wizar E vou colá-lo antes da tag app dot js script. E eu vou configurar esse arquivo. Sempre use seu arquivo JS personalizado abaixo do arquivo de origem. Porque primeiro, seu navegador deve ter conhecimento sobre JSAP Em seguida, ele pode facilmente chamar as funções em seu arquivo JS personalizado. E agora vamos experimentar com pouca animação Além disso, podemos criar essa animação usando CSS, mas não vamos usar CSS aqui. Então, vamos implementar a animação do aplicativo GSO. Então, em nossa tag corporal, primeiro, vou criar uma tag profunda, Dev dot box. Aqui eu criei uma tag profunda com a caixa de nome da classe. E então vou estilizar um pouco essa caixa. Deixe-me te mostrar. Então, vou usar a tag de estilo. Estilo e dentro da etiqueta de estilo, vou selecionar a caixa, ponto, caixa e, dentro da resistência Carli, primeira propriedade em que vou usar maconha E aqui, eu vou dizer com 200 pixels. Além disso, vou dizer altura, altura, 200 pixels. Basicamente, vou criar uma caixa quadrada. E então eu vou dizer isso de fundo. Plano de fundo, e pode ser de qualquer cor. Por enquanto, vou usar a cor vermelha porque a cor vermelha é muito mais visível. E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Então, fizemos nossa parte de DML e CSS. Vamos entrar no arquivo JS de pontos do aplicativo, animação greensock. Você se lembra que em nossos tutoriais anteriores, aprendemos sobre dois e Suponha que eu queira mover essa caixa na direção do XSS. Eu quero movê-lo 100 pixels em direção excessiva. Por enquanto, a posição desta caixa S é zero, e eu quero movê-la em cem pixels. Se você quiser mover de zero a 100, precisará usar dois. E se você quiser mover 100 para zero novamente, precisará usar from. Você só precisa se lembrar do conceito básico sobre isso. Basicamente, no GSab, usamos esses dois métodos para realizar nossa animação de e para Sem isso, há outro método chamado de dois, mas não vou discutir sobre isso nesses dois. Agora, vamos tentar entender como isso funciona. Suponha que esta seja a nossa janela onde eu vou realizar a animação, e aqui colocamos um elemento e é a posição inicial desse elemento. Agora eu quero mover esse elemento em direção excessiva nessa direção. Além disso, quero escalar esse elemento, algo assim. E durante essa tradução, eu quero animar esse elemento E essa é a posição final dessa animação. E se você quiser animar esse elemento da posição inicial para a posição final, você precisa usar essa metanfetamina, Gs two meth E se você quiser reverter isso, eu quero dizer que, se você quiser executar a animação da posição final para a posição inicial, nesse caso, você precisa usar o método from. Então, se executarmos essa animação usando dois métodos, ele trabalhará esse objeto dessa posição para essa posição e também aumentará esse elemento. E se usarmos o método from usando a mesma propriedade , ele fará a coisa oposta. Vai funcionar esse objeto, posição final à posição inicial. Eu quero dizer que vai rodar a animação na direção oposta. Esse é o principal uso desses dois métodos. Então, vamos examinar novamente o código do estúdio perdido. Vamos começar o código para esclarecer o conceito. Então, aqui, eu vou empatar Gs. GsApt, vamos usar duas funções. Para. Então, dentro da base redonda, você precisa mencionar esse seletor, qual elemento você deseja selecionar Vou selecionar essa caixa usando o nome da classe. Então, dentro dos códigos duplos, vou digitar caixa de pontos. Em seguida, vírgula. Na próxima linha, vou usar o Calibrasis e aqui precisamos mencionar o que queremos fazer com essa caixa? Eu quero mover esta caixa na direção Xxs. Eu passaria X, dois pontos, e vou movê-lo até 300 pixels E antes de configurar esse arquivo, se eu mostrar meu arquivo de estimativa de pontos de índice e se eu mostrar minha seção de estilo, e como você pode ver na minha seção de estilo, não usamos nenhuma animação. Depois de configurar esse arquivo, como você pode ver, não estão funcionando porque meu autosaon substituiu essa palavra-chave por esta Então, novamente, precisamos substituí-lo pelo GSAP. Sim E eu vou configurar esse arquivo. Para configurar esse arquivo, como você pode ver, ele moveu o elemento dessa posição para essa posição na direção de X. Agora, deixe-me explicar para você o que está acontecendo nos bastidores. Então, vamos inspecionar esta seção e, primeiro, vou desmarcar essa opção e depois selecionar esse elemento, e aqui vou abrir minha sessão de estilo Como você pode ver nesta sessão de estilo, como você pode ver nesta seção de estilo, Heart use transform probity, transform, translate 300 pixels Então, nos bastidores, o GSAP usa essa probidade CSS para mover esse elemento Deixe-me esclarecer o conceito. Vou estender o valor. Eu vou fazer com que sejam 500. Desta vez, vou movê-lo para 500 pixels. Se eu definir esse arquivo, aqui você pode ver que agora o valor de tradução da transformação é xxS na posição 500 pixels e na posição YxS ainda zero Como não movemos esse elemento na direção de YxS, é por isso que ele está definido como zero Então, a estrutura central feita com CSS. Para este tutorial, acho que o servidor ativo não é obrigatório, então vou desligar o servidor ativo. E, por enquanto, vou abrir o arquivo HTML de pontos de índice do nosso diretório. Então, como você pode ver, desta vez que abro esse arquivo do meu diretório, não vou usar nenhum servidor ativo. Então, se eu recarregar este navegador, você poderá ver a animação Você pode experimentar essa animação. Se eu usar o servidor ativo , ele não está funcionando muito bem. Então, por enquanto, se eu recarregar este navegador, como você pode ver que ele está se movendo tão rápido, vou definir uma duração Então, aqui, eu vou usar vírgula. Em seguida, vou usar a duração da chamada de propriedade. Duração, cólon, por enquanto, vou definir cinco segundos E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu recarregar este navegador, agora você pode ver nossa animação levar cinco segundos para concluí-la Se eu recarregá-lo novamente, aqui você pode notar que, de tempos em tempos ele aumenta nosso valor de Ss Basicamente, ele altera a propriedade CSS de acordo com a duração. E se você quiser executar essa animação após 2 segundos, sim, você pode usar o delay. Basta introduzir Coma, então você precisa digitar delay. Atraso, dois pontos, e eu quero dois segundos de atraso. Se eu definir esse arquivo e recompensar meu navegador, como você pode ver, após 2 segundos, ele iniciará nossa animação. Então, para fazer essa animação acontecer, não precisamos digitar uma grande quantidade de código CSS em nossa seção CSS Só quero usar essa quantidade de código se usarmos a Biblioteca GSAP Em seguida, vou mover essa caixa na direção de YxS. Então, aqui, vou digitar Y, dois pontos, e da direção YX, quero movê-lo em 300 pixels Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, depois de esperar dois segundos, depois de esperar dois segundos, XXs também movem a dicção YxS Ao mesmo tempo, se você quiser alterar a cor do plano de fundo, poderá usar essa propriedade. Suponha que eu queira alterar o plano de fundo, então vou usar a propriedade do plano de fundo. Cor do plano de fundo. Cólon, e eu quero dizer que é de cor verde. Cor de fundo verde. E então eu vou configurar esse arquivo. Para configurar esse arquivo, vou recarregar o navegador. Até configurar esse arquivo, como você pode ver, ele não está funcionando porque acho que cometi alguns erros. Precisamos fornecer esse valor uma roda de corda, então eu preciso fornecer esse valor dentro da cotação. Então, vou usar aspas simples. Então, novamente, vou configurar esse arquivo e reescrever meu navegador Depois de vermelho meu navegador, depois de escrever apenas dois segundos, como você pode ver, ele iniciou a animação e também mudou a cor de fundo desse elemento profundo. Por enquanto, vou reduzir a duração. Eu vou fazer isso em dois segundos. Além disso, vou remover o atraso e configurar esse arquivo novamente. Como você pode ver, agora ficou vermelho para verde. E lembre-se, em CSS, usamos propriedades de fundo como essa. Hífen de fundo colorido. Mas em JavaScript, não usamos propriedades de fundo como essa. Aqui usamos a ordem de estojos de camelo. Como você pode ver, nossos personagens C começam com camel case. Então, usamos camel case. Em script Java. Aqui você pode usar com propriedade de altura. Também dimensiona a propriedade. Suponha que eu queira escalar esse elemento. Então, escala de tipo de herói. Escala, e eu quero escalá-la até duas vezes e depois vírgula. Agora, se eu executar essa animação, ela estenderá esse elemento no tempo. Deixe-me te mostrar. Então, para executar essa animação, como você pode ver, ela amplia o tamanho dessa caixa. Agora se tornou 400 pixels em Xxs e 400 pixels em YxS. Além disso, você pode definir largura e altura, deixe-me mostrar. Então, novamente, vou subtrair esse arquivo e meu navegador e, desta vez, vou definir a largura Nós e aqui eu vou definir a largura de 100 pixels. Basicamente, se eu definir esse arquivo e executar essa animação, isso reduzirá a largura do elemento porque, por padrão, largura do nosso elemento é de 200 pixels. Então, se eu relacionar essa animação, como você pode ver, ela reduz a largura desse elemento. Então, como você pode ver usando dois métodos, podemos mover o elemento da posição inicial para a posição final. Mas podemos fazer o oposto usando o método from. Se eu substituir dois por from e, em seguida, definir esse arquivo e recarregar meu navegador Vamos ver o que vai voltar. Desta vez, você pode ver o contrário. Agora você pode ver que sempre que eu leio meu navegador, ele move a posição final para a posição inicial. Além disso, você pode notar que ele aumenta a largura e muda a cor de volta ao estado inicial. Então, isso é o que podemos fazer com o método de e para. Então, obrigado por assistir a este vídeo Situe para nosso próximo tutorial 4. Método e propriedades de animação do GSAP: Ei, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado à animação de meias verdes. Em nosso tutorial anterior, criamos essa animação básica usando o GSOC Se eu recarregar esta página, como você pode ver, esta é a nossa animação Demorou 2 segundos para concluir a animação. Além disso, reduziu a largura desse elemento. Com isso, altere também a cor de fundo desse elemento, de vermelho para verde. E agora vou mostrar como você pode girar esse elemento Então, por enquanto, vou comentar essa linha com. Em seguida, vou usar outra propriedade chamada rotacionar. Gire e eu quero girá-lo 360 dias Se eu configurar este arquivo e carregar meu navegador, você pode ver Podemos fazer tudo isso usando propriedade CSS na animação GSP No futuro, vamos aplicar essa animação com eventos. É por isso que o JavaScript é importante. E agora vamos pular para a função from novamente. Agora vou comentar todas as linhas. Então eu vou ligar a partir da função. Então, novamente, vou digitar G GSapt novamente, minha sugestão automática substituirá minha palavra-chave. Então, vou digitar JSAP Mnuali. SAP dot from. Em seguida, dentro da grama redonda. Primeiro, vou selecionar o elemento da caixa. Caixa de pontos. Na próxima linha, vou usar aliases. Dentro da resina de Cali, precisamos definir nossas propriedades e valores, e vou aplicar exatamente as mesmas Então, aqui estou do tipo X. O valor de X é 500. O valor Y é 300. Em seguida, vou passar o valor enraizado. Valor do Rotd Vou me inscrever em 360 graus. No próximo valor, vou dizer duração. Duração, e eu vou correr dois segundos. Em seguida, vou aplicar a cor de fundo. Cor do plano de fundo. Cor de fundo, vou aplicar no código único verde. E eu quero configurar esse arquivo. Então, basicamente, eu aplico as mesmas propriedades que eu aplico nas minhas duas funções. Se eu recarregar meu navegador, agora você pode entender qual é a diferença entre a função two e from Quando eu uso duas funções, ela moveu o elemento da origem. Mas quando aplicamos a função from , ela volta ao seu local de origem. Então, se eu recarregar meu navegador, como você pode ver, ele retornará ao local de origem Se eu recarregar meu navegador novamente, como você pode ver, ele voltará à posição de origem Então essa é a diferença básica entre a função dois e a função from. Se você notar, pode ver que ela se transformou na cor verde para vermelha. Além disso, ele gira na direção oposta. Agora vamos falar sobre propriedades repetidas. Se você quiser repetir essa animação várias vezes, precisará usar essa propriedade. Então, o tipo dela, repita. Repita, e eu vou dizer que repita três vezes. Se eu recarregar meu navegador, ele repetirá essa animação no total quatro vezes Porque, por padrão, ele executará nossa animação uma vez e depois repetirá a animação três vezes. Deixe-me te mostrar. Então, vou recarregar meu navegador Depois de carregar meu navegador, como você pode ver, ele repetirá essa animação no total quatro vezes. E agora, se você quiser repetir isso por um tempo infinito, você pode usar menos um valor Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, ele executará nossa animação em tempo finito Não vai parar até que eu altere o valor. Então, por enquanto, vou alterar o valor, repita. Zero, e eu vou configurar esse arquivo. Depois de configurar esse arquivo, vou recarregar meu navegador. Então, desta vez, ele executa a animação apenas por uma vez, mas não a repete. E agora vou aplicar o Efeito UU. Como você pode notar, nossa animação se move apenas em uma direção. Mas se acertarmos uma bola no chão, ela se recupera. Eu quero que vá direto e volte. Para isso, precisamos usar uma propriedade chamada UU. Então, para digitar Yu Yu. Eu vou passar por verdade. Verdadeiro. Então eu vou repetir essa animação. Quarta vez. Eu quero subtrair esse arquivo. Se eu recarregar o navegador, você poderá ver o efeito U. Agora funciona como UU. Se eu tornar esse valor verdadeiro, ele avançará e retrocederá Vai sair uma vez e voltar. E se eu passar o valor de repetição infinito, depois o tempo infinito, ele fará a mesma coisa. Além disso, você também pode aplicar a mesma propriedade nessas duas funções. Então, ele fornecerá o mesmo efeito, mas a diferença é que, se usarmos duas funções , esse elemento não voltará para ou estará na posição. Eu paro na posição de destino naquele lugar. Agora vamos voltar para a página de teste de pontos de índice. Como você pode ver, agora temos apenas um elemento profundo, mas vou obter essa linha no total três vezes. Agora temos um total de quatro elementos profundos. Além disso, vou comentar algumas propriedades na função dot js do meu aplicativo. Primeiro, vou remover a função de rotação. Então eu quero movê-lo apenas na direção de X. Em seguida, removerei o valor de repetição. Além disso, vou comentar o valor do EURO. Então eu quero definir esse arquivo. Em seguida, volte para a página ATL e reduza o tamanho dessa caixa Desta vez, vou fazer com que seja 100 pixels de largura por 100 pixels. Se eu definir esse arquivo e recarregar meu navegador, ele aplicará toda a animação de animação, todo o elemento profundo, porque a classe deles é a mesma Vamos fornecer uma pequena margem entre eles. Margem de cinco pixels. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu ler meu navegador, agora você pode ver a lacuna entre eles. E agora vou mudar o nome da classe de todos esses elementos. Essa é a caixa 1. Esta é a caixa número dois. Esta é a caixa número três, e esta é a caixa número quatro. E eu vou configurar esse arquivo. Agora, vamos voltar ao arquivo dot js do aplicativo. Então essa é a caixa número um. Primeiro, vou mudar o estilo de animação. Vou usar duas funções. Este aplicativo dois. Então, vou duplicar esta seção várias vezes. Basicamente, vou remover todas essas linhas comentadas. Eu não preciso disso. Então, vou duplicar esta seção no total três vezes. Esta é a caixa número dois. Esta é a caixa número três. Desculpe, este é o número da caixa. Esta é a caixa número três e a última é a caixa número quatro. Se eu definir esse arquivo e reescrever meu navegador, ele retornará o mesmo resultado Opa, precisamos fazer alterações em nossa seção de estilo de arquivo HTML de índice Aqui, vou direcionar todo o elemento DV de uma só vez , porque eu mudo porque, a partir daqui, eu mudo os nomes das classes Então, vou passar o nome do elemento tag name D. E definir esse arquivo. Se eu excluir meu navegador, vocês verão o resultado. Agora, todos os elementos completam a animação ao mesmo tempo. Mas agora eu quero executar o segundo número após o primeiro número. Quero dizer que depois de executar a animação do primeiro elemento, quero um pouco de atraso para o segundo elemento. Para isso, aqui vou usar outra propriedade chamada delay. Então, em nossa caixa dois, vou usar a propriedade de atraso. Atraso, e eu quero atrasá-lo em até 2 segundos. Opa, atrasar a ortografia está errada, DEAY. Então, eu quero configurar esse arquivo novamente e recarregar meu navegador. Depois de recarregar meu navegador, como você pode ver, após dois segundos de atraso, ele executa nossa animação Então, um por um, você pode atrasar a animação. Suponha que, para o terceiro elemento, eu queira atrasá-lo em até quatro segundos. Então, para o quarto elemento, quero atrasá-lo em até seis segundos. Então, novamente, vou configurar esse arquivo e recarregar meu navegador Depois de carregar meu navegador, depois de concluí-lo, ele espera dois segundos e depois é executado um por um. Agora, o problema é que você precisa selecionar todas as caixas, uma por uma. Além disso, você precisa aplicar o atraso várias vezes. Mas a Greensock tem essa solução para isso. Então, vou comentar toda a linha , exceto a primeira. Então eu duplico o primeiro e comento esse duplicado. E desta vez, vou selecionar todas as caixas de uma vez, então vou remover a caixa um. Além disso, precisamos fazer alterações em nosso arquivo estável. Agora, novamente, vou mudar todo o nome da classe. Caso contrário, também podemos adicionar outra caixa de nome de classe. Então, aqui vou adicionar uma caixa. Caixa. Vou configurar esse arquivo. Basicamente, aqui usamos vários vidros no mesmo elemento. Agora, vamos voltar ao arquivo js do aplicativo. Agora vou aplicar o mesmo atraso na minha animação. Para isso, preciso usar uma propriedade chamada Stagger, STAGER Stagger e vou definir seis Com. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, vou recarregar meu navegador. Como você pode ver, depois de concluir o primeiro, execute o segundo. Depois de concluir o segundo , ele executará o terceiro. Da mesma forma, depois de completar o terceiro, ele executará o quarto. Se eu reduzir o valor do punhal, se eu fizer quatro e depois definir esse arquivo, agora ele fará a mesma coisa um pouco Então, depois de concluir o primeiro, ele executará o segundo. Em seguida, ele executará o terceiro. Por fim, vai rodar o quarto. E se eu reduzir mais esse valor do punhal, se eu fizer 1 segundo, um e depois definir esse arquivo e carregar meu navegador, agora você pode ver que depois de 1 segundo, ele executará toda a animação uma por uma Agora, não precisamos digitar essa quantidade de código para obter o resultado. Apenas uma propriedade e um valor fazem a mesma coisa. Não precisamos criar animações individuais para isso. ajudar a aumentar o valor do Stagger, você pode definir o tempo de atraso entre as animações Valor impressionante ao gerenciar seus atrasos individuais. Se você abrir a documentação dessa animação GSP e pesquisar duas funções, duas GSAP funcionarão E se você abrir esta seção, aqui poderá ver o uso dessas propriedades especiais. Você pode ver o atraso dos dados, duração, es, o ID, a preguiça Há muitas propriedades relacionadas à função e você pode usar todas elas. Depois de rolar um pouco para baixo nesta página, aqui você pode ver a propriedade stagger E nesta seção, você pode ler a documentação sobre a propriedade de escalonamento documentação oficial é a melhor maneira de aprender alguma coisa. Sempre fornece a resposta certa e atualizada. Você pode ler sobre a propriedade U, UEs, quadros-chave, etc Em nosso primeiro tutorial e no segundo tutorial, eu apenas tento apresentar como podemos usar a animação GSP e quais são as propriedades Acabamos de aprender sobre o processo de trabalho da animação GSP. No próximo tutorial, aprenderemos sobre cronogramas. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 5. Como usar o gatilho de rolagem, parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação GSAP E hoje, nesta seção, vamos aprender o gatilho de rolagem. É um dos recursos mais importantes da animação GSAP Nessa seção, aprenderemos como podemos acionar nossa animação em um determinado momento. Como você pode ver, se eu rolar para baixo nesta página, agora você pode ver quando nosso interruptor de gatilho, este é o nosso interruptor de gatilho, cruza a seção inicial do scroller e iniciará nossa animação na segunda página Deixe-me te mostrar. Então, quando eu rolo para baixo nesta página e quando ela cruza esta seção, agora você pode ver que ela acionou essa animação. Então, isso é o que podemos fazer com o Scroll trigger. Então, vamos ver como podemos aplicar Scroll trigger em nossas páginas da web. Então, vamos entrar no editor de código do Visor Studio. Finalmente, estamos no editor de código do Visor Studio e, como você pode ver no meu diretório de trabalho atual, temos um total de três arquivos, ponto de índice TML, script ponto js e estilo CSS E eu já crio o clichê para STML. Então, primeiro, vou vincular o arquivo CSS a esse documento HTML Então, o link do Hemotype e eu vou passar o estilo Film dot css Além disso, precisamos inicializar o arquivo script dot js com este documento Então, digite a tag do script. Script e, dentro da fonte, isRC, vou passar o nome do arquivo JavaScript, que é script dot js, este Vou configurar esse arquivo. Depois disso, vou entrar no estilo de arquivo CSS dot CSS e, aqui, vou digitar a placa base do arquivo CSS. Então, vou digitar start o seletor universal. Então, dentro do Cariass, vou dizer que está fundindo Zero. Então eu vou dizer preenchimento, também zero. Depois disso, precisamos dizer tamanho da caixa, tamanho caixa, e aqui vou usar a caixa de borda Então, se você quiser selecionar qualquer fonte, sim, você pode. Por enquanto, vou selecionar a família de fontes e vou usar a fonte aérea Você pode usar o que quiser. Em seguida, vou selecionar a tag ML, HTL. Com isso, também vou selecionar body tag. Corpo, depois dentro dos pseudônimos. Aqui vou digitar altura. Eu vou definir a altura. Vou definir a altura de 100%. Em seguida, vou dizer maconha. Além disso, vou definir nós 100%. Agora vamos voltar para a página HTML com pontos de índice. E dentro da tag body, primeiro, vou criar uma tag profunda, tag DH, e vou dizer ID, página um, página um Da mesma forma, vou criar duas outras páginas. Então, eu dupliquei esta seção ao longo do tempo. Esta é a página número dois. E essa é a página número três. Como você pode ver, aqui criamos um total de três páginas, página um, página dois e página três. Agora, vamos colocar toda essa página em um bloco. Então, vamos entrar no arquivo CSS de pontos de ladrilho. E aqui, vou digitar página, hashtag, página um, dentro do recesso colorido Eu vou dizer que é altura. Devo dizer que é altura, 100%. Além disso, vou dizer que nos casamos cem por cento e, em seguida, vou adicionar uma cor de fundo. Cor de fundo, e eu vou usar a cor azul claro. Azul claro, esse. Agora, vamos abrir a página e ver o que ela vai criar. Então, aqui eu abro esta página sem o Live Server. Como você pode ver, esta é nossa primeira página com cor azul claro. Esta é a primeira página. Da mesma forma, vou estilizar outras páginas. Então, vamos ao código do Visual Studio. Então, vou duplicar essa seção duas vezes. Isso é para a segunda página, e eu vou mudar a cor. Vou mudar a cor do diagrama e vou torná-la um pouco mais Essa quantidade de escuridão. Da mesma forma, vou estilizar a página três. Primeiro, vou mudar o nome do ID, página três. Então eu vou selecionar essa quantidade de sombra escura, essa quantidade de cor. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu acessar meu navegador e recarregar esta página, agora você pode ver que temos um total três páginas diferentes com cores diferentes Esta é a página um, esta é página dois, e esta é a página três. Vamos criar a página três mais escura. Vamos usar o código do estúdio e vou torná-lo mais obscuro. Eu acho que esse é bom. Vou configurar esse arquivo novamente. Vamos acessar o navegador e eu vou recarregar esse arquivo. Agora você pode diferenciar as duas páginas. A cor é diferente. Então, está claro para você como criamos executamos três páginas diferentes e estilizamos essas páginas. Agora, vamos voltar à estimativa de cinco pontos do índice. Agora, na primeira página, vou criar um elemento D com Dame box Stip D tem tag e nosso DM E esta é a caixa 1. Além disso, vou atribuir uma caixa de aula para a turma. Em seguida, vou criar as mesmas caixas em nossas outras páginas. Então, para copiar esta seção, eu vou colá-la aqui. Isso é para a página dois, e este é para a página três, mas vou mudar o nome do ID. Essa é a caixa três, e essa é a caixa dois. E eu vou configurar esse arquivo. E então eu vou estilizar esta caixa. Então, vou usar sua caixa de nome de classe. Então, vamos entrar no arquivo CSS de estilo, e aqui vou estilizar a caixa de pontos. Entre no pseudônimo. Primeiro, vou dizer altura, altura e vou fazer com que seja de 300 pixels. E então eu vou dizer Com. Para With, também vou usar 300 pixels e, para a cor de fundo, a cor de fundo, aqui vou defini-la como carmesim Esse, e eu vou configurar esse arquivo. Agora, vamos voltar ao navegador. E se eu recarregar este navegador, como você pode ver, como você pode ver em nossa primeira página, ele cria uma caixa Além disso, ele cria a caixa em nossa segunda página e em nossa terceira página. E agora precisamos alinhar essa caixa, no centro desta página. Para isso, vamos ao código do estúdio do usuário e, em nossa primeira página, vou usar display probity, display e vou usar display flick Em seguida, digite Hemo no centro de alinhamento do item. Além disso, precisamos justificar o conteúdo, justificar o conteúdo e também centralizar E, como você sabe, precisamos colocar todas as caixas no centro desta página, então vou copiar esse código e colá-lo na segunda página. Além disso, vou colá-lo na página três e vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar esta página, você poderá ver o resultado Agora, em todas as nossas páginas, ele alinha esse centro profundo do elemento Então, agora está claro para você como podemos criar essa estrutura. Agora, vamos falar sobre o GSAP. Então, estou de volta à minha página HTML de pontos de índice e aqui precisamos importar o link do GSAP Precisamos importar usando CDN. Para importar o link do CDN, vou voltar ao navegador e vou abrir uma nova guia, e aqui vou pesquisar o GSAP Só é preciso lembrar que se quiser algum link CDN do JSAP, você precisa digitar SAP você precisa digitar SAP E a partir daqui, você pode usar este site, cinj.com. Então, se eu abrir este site, SAP Libraries, ele fornece todos os links sérios relacionados ao SAP. partir daqui, você pode selecionar suas versões do SAP, mas eu vou usar a mais recente, então vou usar esta daqui e daqui, vou copiar este link, o primeiro link, e vou copiar e voltar ao meu código do Visas Studio, e vou colá-lo aqui antes do skid dot JS five e você conhece o processo Então, nós já criamos essa estrutura e também estilizamos essa estrutura. Então, depois de configurar esse arquivo, vamos pular para o arquivo JS de pontos de script Então, dentro dessa tag de script, primeiro, vou digitar GSAP e depois SAP no tipo DT E, como você sabe, às vezes nosso editor de código do Visual Studio recomenda e eu não gosto. Então, novamente, vou digitar GSAP. São pontos. Aqui você tem duas opções no total. Você pode usar a partir do método qualquer um dos dois métodos. E para este exemplo, vou usar o método from. De. Em seguida, você precisa usar chaves redondas e, dentro das chaves redondas, como você sabe, primeiro é necessário selecionar o Então, da página um, tem tag, página um, eu quero selecionar tem caixa de tag. Vou selecionar todas as caixas de uma vez, então não vou usar o nome de ID, então vou usar a classe. Então, aqui vou digitar dot box. Depois do coma, vou usar as maldições. Então, primeiro, aqui vou usar a propriedade de escala. Escala, e eu vou defini-la como zero. Se eu definir esse arquivo, voltar ao meu navegador e acessar esta página, você poderá observar a animação. Está de volta à posição normal 02. Se eu reescrevi esta página, você pode notar. Em seguida, vou adicionar um pouco de atraso a essa transição, tipo Sumo, atraso e vou usar 1 segundo de atraso. Além disso, precisamos usar entre esses dois valores. Em seguida, vou dizer a duração do tipo Sumo , a duração e vou dizer a duração de dois segundos. Além disso, você precisa usar vírgula entre essas duas propriedades. Então, usamos mais uma vez o delay. Então, depois de recarregar esta página, demorou mais uma vez para iniciar a animação e dois segundos para concluir a animação Então, depois de definir esse arquivo, vamos voltar ao navegador, e eu vou recarregar esse navegador Então, depois de recarregar este navegador, você pode perceber que ele vai esperar por 1 segundo, então ele vai começar a animação, e levou um total de dois segundos para completar a animação Já aprendemos sobre isso apenas para encerrar isso, e então vou usar o valor de rotação Gire, e eu quero dizer gire 360 graus. Então eu defino esse arquivo com escala, ele também vai girar o elemento Então é assim que parecia. 6. Como usar o gatilho de rolagem, parte 2: Então, aqui criamos nossa animação de primeira página. Funciona apenas em nossa primeira página porque aqui está a página número um Então, se eu recarregar meu navegador, como você pode ver, ele executa apenas nossa animação de primeira página, não todas as animações Agora vamos voltar ao código do estúdio de resultados. Agora eu quero executar a mesma animação para outras páginas. Então eu seleciono esse código e dupliquei esse código ao longo do tempo. Então, vou mudar o número da página. Vou executá-lo na página dois, e vou executá-lo na página três, e vou configurar esse arquivo. Agora, depois de configurar esse arquivo, vamos voltar ao navegador. E vou recarregar meu navegador. Agora você pode notar que ele executa nossa animação de primeira página e completa a animação. Mas o que? Se eu rolar para baixo, isso funciona? Funciona na nossa página dois? E isso também funciona na nossa página três? Não, não funciona. Sim, funciona nos bastidores, mas não funciona quando eu o rolo para baixo. Portanto, não há eficácia dessa animação se não a vemos. Se eu recarregá-lo novamente, funcionará para todas as páginas, mas não podemos ver todas as páginas ao mesmo tempo Então, ao mesmo tempo, podemos experimentar apenas uma página de animação. Agora, se eu rolar para baixo na minha segunda página , quero executar essa animação. Da mesma forma, se eu rolar para baixo na minha terceira página , quero executar essa terceira animação. Agora você pode pensar que pode resolver esse problema facilmente. Você pode pensar que pode usar o atraso para isso. Você pode pensar que, se aumentar o valor do atraso para páginas diferentes, isso funcionará. Não, não vai funcionar assim. Deixe-me te mostrar. Vamos voltar ao código do estúdio. Suponha que em nossa caixa dois, aqui, eu vou dizer atraso. Eu vou dizer um atraso de 5 segundos. Depois de cinco segundos, ele vai rodar essa animação. E em nossa terceira página, vou dizer atraso de dez segundos. Com menos de dez segundos de atraso, vai rodar a terceira animação E eu vou configurar esse arquivo. Então, depois de configurar esse arquivo, vamos voltar ao navegador. Agora vou recarregar esse navegador novamente e, depois de executar essa animação, suponha que os usuários passem muito tempo Suponha que o usuário passe mais de dez segundos nessa seção. Então, vou passar mais de dez segundos lendo todo o conteúdo desta página. Depois de 10 segundos, se o usuário rolar um pouco para baixo, como você pode ver, ele já executou essa animação porque aqui há apenas cinco segundos de atraso. Da mesma forma, se eu rolar um pouco para baixo, agora você pode ver que já rodou nossa terceira animação. Não sabemos quantas vezes um usuário gastará em uma única página. Suponha que o usuário gaste mais de dez minutos, 20 minutos em uma única página para ler o conteúdo, caso contrário, preencha um formulário. Precisamos acionar essa animação quando você rola a página para baixo em uma determinada área. Se rolarmos para baixo em uma certa área, ela acionará a animação. Isso é chamado de gatilho de rolagem, e aprenderemos sobre isso nessa seção. Além disso, você pode pensar que o cronograma e o estranho podem resolver o problema Não, isso não vai resolver o problema porque a linha do tempo executa a animação uma após a outra Agora, vamos ver como podemos usar o gatilho Scroll? Para isso, precisamos que a Boeing acesse este site novamente, onde usamos o link Can Neste site, você precisa usar este link, Scroll trigger, este. Existem outros links de CDS, como scroll to plug in, mas você precisa usar apenas este para scroll trigger, scroll trigger dot main dot js Então, para copiar esse link do CDN e voltar para o editor de código do fissure studio Em seguida, vamos entrar no arquivo TML de índice e precisamos usar esse CDN de gatilho de rolagem abaixo do DubsDIN principal Depois dessa obsidiana, vou colar o gatilho de rolagem Vou colar o gatilho de rolagem neste e vou configurar esse arquivo. Basicamente, o scroll trigger é um plugin GSAP. É uma biblioteca de apoio ao GSAP. Com ele, você pode executar sua animação com base na rolagem. E lembre-se, você precisa seguir essa ordem. Caso contrário, ele está passando por um erro. Primeiro, você precisa usar o GSA CD e, em seguida, você pode usar o Scroll Tigger e, por fim, sempre usar seu próprio arquivo de script Agora vamos ver como podemos implementar o trigger de rolagem. Então, vamos voltar ao arquivo script dot js. Vamos executar nossa primeira animação quando carregarmos a página. Mas em nossa segunda animação, animação de segunda página, vamos executá-la quando rolamos a página e acionamos essa animação. Então, nessa página, vou implementar o trigger de rolagem. Então, para digitar, role, depois digite trigger e lembre-se de que T deve ser maiúsculo. Então, dentro da função de gatilho de rolagem, arquétipo de gatilho de rolagem, precisamos especificar o objeto Caso contrário, o elemento em que queremos implementar o gatilho de rolagem. Então, vou usar esse objeto de caixa que está dentro da página dois. Então, vou copiar essa seleção e colá-la aqui. Além disso, vou usar o atraso normal, então vou atrasar mais uma vez. Agora, vamos configurar o arquivo e voltar ao navegador. E aqui, na minha primeira página, vou recarregar esse navegador Agora, ele executará nossa animação de primeira página. Então eu vou esperar por algum tempo. Depois disso, se eu rolar minha página para baixo e pular para a página dois, agora você pode ver que depois de pular para a página dois, iniciaremos nossa animação da segunda página. Então, isso é exatamente o que podemos fazer usando o gatilho de parafuso. Deixe-me mostrar o exemplo mais uma vez. Como você pode ver, estou na minha primeira página e vou recarregar este navegador novamente. Então, depois de recarregar o navegador, como você pode ver, por padrão, ele iniciará essa animação Mas quando eu percorro um pouco e pulo para a seção da página dois, agora você pode ver que, após 1 segundo de atraso, a animação começa. Então está funcionando. Agora, vamos tentar entender o gatilho de rolagem em detalhes. Primeiro, vou duplicar essa linha e comentar a linha anterior Agora, vamos aprender algumas propriedades específicas do gatilho de rolagem. Então, aqui, eu vou usar o Carrass. Então, em vez de decirass, vou aplicar algumas propriedades. Então, primeira propriedade, vou usar o gatilho. Acione, e eu quero acionar a caixa, que está dentro da página dois. Então eu copio esta seção e passo aqui. E então vou mencionar o scroller. Supervírgula, herem t, scroller. Carrinho de criança, e vou mencionar o corpo. Agora você pode ter cuidado porque eu seleciono corpo na propriedade scroller Na maioria das vezes usamos o corpo até usarmos a locomotiva. Então, se rolarmos nosso corpo tamal, isso acionará essa animação que está dentro da caixa da página dois Depois de definir esse estilo, se eu recarregar meu navegador, ele executará nossa animação como está Ele executará a animação normalmente. Então, depois de executar nossa animação de primeira página, se eu rolar um pouco até a segunda página, agora você pode ver que ela inicia a animação da segunda página. Agora vamos falar sobre marcadores. Então, vou voltar ao código do estúdio Viser e, aqui, vou digitar marcadores Coma Marcadores verdadeiros. Com ele, podemos entender de qual posição ele acionará a animação. Deixe-me te mostrar. Então, depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar minha página Agora você pode ver aqui uma opção chamada início da rolagem, início da rolagem e, acima, você pode observar o final da rolagem. Essa é a posição final do rolador. Então, se eu rolar um pouco para baixo nesta página e pular para a seção da página dois, agora você pode ver, agora você pode notar que depois que esse gatilho cruza a área inicial de rolagem, ele inicia a animação. Deixe-me te mostrar novamente. Então, aqui, vou recarregar meu navegador nessa posição Agora você pode notar que alguém recarrega este navegador primeiro, ele executa nossa primeira animação Mas se eu rolar esta página para baixo e você notar a mudança. Quando esse interruptor cruza a área de início do passeio, ele aciona a animação Mas agora eu quero mudar a posição inicial, a posição inicial do rolador Eu quero colocá-lo nessa posição. Para isso aqui, precisamos mencionar a posição inicial. Então, depois da vírgula, vou digitar start. Comece aqui dentro do curso duplo, vou digitar da posição superior, quero movê-lo em 60%, 60% e vou definir esse arquivo. Ao configurar esse arquivo, deixe isso para o navegador. E, novamente, vou raciocinar meu navegador. Agora você pode notar que esta é a nossa posição inicial. Se nossos elementos começarem na posição, suponha que essa posição inicial ultrapasse essa limitação, então ela iniciará essa animação. Não iniciará a animação até cruzar essa linha. Então você pode notar que sempre que eu cruzo essa linha, agora você pode vê-la iniciar a animação após 1 segundo de atraso. Aqui mudamos nosso ponto de partida. De cima, aqui usamos 60%. Só é preciso lembrar que são os trajes de gatilho dessa animação. Quando essa linha cruzar esse botão de gatilho, ela iniciará essa animação. É por isso que é conhecido como scroll Trier. É isso para esta seção. Na próxima parte desta seção, aprenderemos mais sobre isso. Vamos aprender mais sobre mais recursos do Scroll Trier. 7. Linha do tempo no GSAP Crie sua primeira linha do tempo parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação GSP E neste tutorial, vamos aprender o cronograma do GSP A linha do tempo do GSP é uma ferramenta de sequenciamento que permite aos usuários controlar e gerenciar o tempo da animação Basicamente, é um contêiner para gêmeos e outras linhas do tempo e é usado para criar sequências complexas Com cronogramas, as animações são exibidas na água. Eles estão listados no código. Assim, novas animações podem ser adicionadas sem calcular manualmente Os cronogramas também possibilitam a criação de uma sequência de animação facilmente ajustável e resiliente Aqui estão algumas coisas que você pode fazer com os cronogramas do aplicativo. Posicionando a animação no tempo, as animações repetidas incluem atrasos antes da repetição e animação em cadeia Em uma palavra simples, cronograma é qualquer coisa definida em um período de tempo Suponha que essa seja nossa linha do tempo de cinco segundos. Mas aqui podemos especificar tarefas diferentes em segundos de tempo diferentes. Podemos realizar tarefas diferentes em períodos de tempo diferentes. Basicamente, usando a linha do tempo, podemos especificar o que vamos executar passo a passo Em nosso tutorial anterior, aprenderemos sobre como podemos executar a animação GSP E se você quiser executar animações uma após a outra , precisamos fornecer atraso cada uma das animações E para resolver o problema de atraso, o GSAP introduziu o cronograma Então, vamos discutir o cronograma. E lembre-se, nossa linha do tempo está conectada entre si e funciona passo a passo Então, finalmente, estamos na página de documentação da animação do SAP. E em nossos tutoriais de prefácio, já aprendemos como instalar a animação GAP Agora, vamos voltar ao código do isal Studio. Então, como você pode ver, lado a lado, abro meu editor de código do isults Studio e meu navegador E como você pode ver no meu diretório de trabalho atual, temos todos os três arquivos, index dot html, arquivo css de ponto principal e arquivo js de ponto de aplicativo. E em nosso arquivo TML de pontos de índice, eu já vinculo a animação GSAP nessa tag de script Agora, dentro da tag body, vou criar três caixas TDL Então, o tipo de martelo Dev tem etiqueta, caixa. Essa é a caixa número um. Então eu cavei esta seção. Esta é a caixa número dois. Novamente, vou fazer esta seção, e esta é a caixa número três. Além disso, vou atribuir uma aula. Vou atribuir a mesma classe à qual podemos direcionar todas as caixas de uma só vez. Então eu vou digitar class, isso é apenas uma caixa. Em seguida, copio esta seção e colo em nossa caixa dois e caixa três. Novamente, vou configurar esse arquivo e, em seguida, vou pular para o arquivo CSS de pontos principais. Primeiro, vou usar o seletor universal. estrela dentro do calibre diz, eu vou dizer margem zero Em nossa próxima propriedade, vou usar o preenchimento zero, e nossa terceira propriedade é o tamanho da caixa, caixa E então eu vou estilizar o elemento da caixa. Então, vou usar a caixa de pontos do nome da classe dentro das calices Primeira propriedade, vou usar com 100 pixels, altura 100 pixels. Em seguida, vou usar a propriedade de fundo. Plano de fundo, e eu vou usar a cor dourada. Além disso, vou adicionar margem. Margin e eu vou adicionar uma marcha de cinco pixels. E eu vou configurar esse arquivo. Se eu definir esse arquivo e recarregar meu navegador, aqui você pode ver o resultado V. E agora eu quero atribuir animações diferentes a esses itens, mas uma após a outra. E para atribuir a animação, vamos usar o GSAP Então, vamos entrar no arquivo JS do app dot. Então, primeiro, vou digitar GAP SAP. Novamente, nossa sucessão automática substitui a palavra-chave. Então, estou de volta à posição GSAP dot e vou usar a função From De. Em seguida, dentro do círculo ss dentro dos códigos duplos. Primeiro, vou selecionar o primeiro elemento, caixa um. Vou selecionar esse elemento usando o nome de ID dele na caixa um. Em seguida, Oma dentro dos cálices. Primeira propriedade, vou usar opacidade. Opacidade. Primeiro, vou tornar a opacidade zero e, em seguida, vou usar a duração, a duração do tempo de duração da animação e quero definir a duração total de cinco segundos Se eu definir esse arquivo e recarregar meu navegador em 5 segundos, esse elemento se tornará 021 Eu quero dizer que a opacidade desse elemento se torna zero a um. Deixe-me te mostrar. Se eu recarregar meu navegador, como você pode ver, em 5 segundos, ele se torna zero a um Além disso, vou dizer que excede o valor 300. Do excesso de direção, ele vem de 300 pixels. Então, vou configurar esse arquivo e recarregar meu navegador, você pode ver o resultado Acho que cinco segundos é muito tempo para essa animação, então vou fazer com que sejam dois segundos. Em seguida, vou duplicar esta seção. Desta vez, vou selecionar a caixa número dois. Então, vou mudar a caixa de nome de identificação número dois. Se eu definir esse arquivo e recarregar meu navegador , as duas animações funcionarão juntas Deixe-me te mostrar. Você pode ver o resultado. Agora temos uma solução. Podemos usar a propriedade Day. Atraso e eu quero adicionar um atraso de dois segundos. Se eu definir esse arquivo e ler meu navegador, como você pode ver, precisamos usar o COVA entre esses dois Então, novamente, vou configurar esse arquivo e redirecionar meu navegador Aqui você pode ver que depois de concluir a primeira animação e dois segundos de atraso, conclua a segunda animação. Se eu fizesse a mesma coisa várias vezes, então se tornou um código enorme. Toda vez que precisamos calcular o valor do atraso em cada uma das caixas. Como você pode ver, nossa primeira caixa leva dois segundos para completar a animação. Eles duram dois segundos. Em nossa segunda caixa, aqui usamos o atraso de dois segundos. Depois de concluir a animação da primeira caixa, quero concluir a segunda animação da caixa. É por isso que aqui eu digo para o segundo atraso. Então, ele iniciará a animação da segunda caixa após 2 segundos. Da mesma forma, se você quiser executar nossa animação de terceira caixa, após concluir a animação da segunda caixa, nesse caso, em nossa terceira caixa, precisamos atribuir um atraso de quatro segundos. Então, toda vez que precisamos calcular o valor do atraso, cada um dos elementos. Se tivermos 50 animações em nossa página da web e eu quiser executar todas as animações uma após a outra, nesse caso, toda vez que precisarmos gerenciar o valor do atraso. Para resolver o problema, o GAP introduziu o cronograma. Vou comentar todos os códigos. 8. Linha do tempo no GSAP Crie sua primeira linha do tempo parte 2: Em seguida, volto para a seção de documentação. Em seguida, você pode pesquisar a linha do tempo nesta barra lateral do filtro. Além disso, você pode clicar na linha do tempo dessa opção. Aqui, eu apenas tento mostrar de onde você pode obter a documentação do cronograma Depois, basta voltar ao arquivo JS. Primeiro, vou declarar uma variável. Então, aqui nós digitamos Const Cs, e o nome da minha variável é TL que TL faz para a linha do tempo, igual a jsAPgsApttLine Função Sap dot Timeline. Então, aqui criamos a linha do tempo, e agora vou usar esse mesmo código Vou copiar esse código e executá-lo usando o JSAP Deixe-me te mostrar. Então, aqui, vou colar o código e descomentar esse Agora, não precisamos dessa probidade de atraso. Então, para remover essa probabilidade. E aqui, vou substituir o GAP pelo TL. TL. Vou configurar esse arquivo. Agora, como criamos a linha do tempo. Se eu recarregar meu navegador, como você pode ver depois de concluir o primeiro, ele iniciará o segundo Mas você pode notar aqui que não usamos nenhum atraso. Se eu fizer a mesma coisa com o terceiro, duplicarei essa linha e alterarei a caixa de nome de ID número três, esse arquivo, configurarei essa pilha e recarregarei Agora você pode ver que depois de concluir o primeiro, ele iniciará o segundo e depois iniciará o terceiro. Basicamente, o cronograma substitui a propriedade de atraso. Obviamente, você pode usar o delay se trabalhar com pouca animação. Se sua animação for grande, caso contrário, se você usar várias animações, elas sempre seguem a linha do tempo É muito útil quando cria uma série de efeitos. Agora vamos voltar à documentação. Se quiser repetir sua linha do tempo, você pode usar esse objeto Deixe-me te mostrar. Então, vou copiar esse valor e propriedade do objeto. Depois, volte para o código do Visual Studio. Então, dentro dessa função de tanino, vou usar Cariss Em seguida, vou colar o valor de repetição. Quero repetir essa animação no total duas vezes. Então, se eu definir esse arquivo e recarregar meu navegador, como você pode ver, primeiro ele completa o primeiro, depois o segundo e depois o terceiro Agora ele vai repetir a linha do tempo. Então, esse é o nosso trabalho repetido. E se você quiser atrasar entre esses cronogramas, sim, você pode Só você precisa usar essa propriedade, repita o atraso. Então, vou copiar essa propriedade e valor e, em seguida, voltar para o com o código do estúdio. E depois do coma, vou colar aqui. Então, ele vai repetir esse produto de animação duas vezes. Além disso, adicionará um pequeno atraso de 1 segundo entre esses cronogramas Então, se eu configurar esse arquivo e recarregar meu navegador, completar a linha do tempo, você pode ver que ele vai esperar por 1 segundo Depois de 1 segundo, ele executará a linha do tempo novamente. Você pode ver o resultado. E se eu aumentar o valor , ele vai esperar por muito tempo. Além disso, ele fornece algumas outras funções, como pausar, retomar sik e Suponha que, se você quiser reverter a linha do tempo, se clicar em qualquer botão , isso inverterá a linha do tempo Ele fornece todas as opções diferentes, como você pode usá-lo. Você pode ler a documentação para obter mais conhecimento sobre isso. A partir daqui, você pode aprender todas as opções. Agora vamos falar sobre o tempo absoluto. Foi medido desde o início da linha do tempo. Deixe-me mostrar o exemplo. Agora, vamos voltar ao código s are studio e vamos voltar ao ponto de índice no arquivo. Então, aqui, eu vou usar a tag de cabeçalho, H dois. Além disso, vou atribuir um ID igual a DM e, à base de ervas, digitar um texto, olá palavra E vou configurar esse arquivo e recarregar meu navegador. Em seguida, vamos voltar ao arquivo JS do app dot. Aqui, vou animar essa tag de cabeçalho. Mas, a princípio, vou reduzir o valor da repetição. Eu quero repetir isso apenas por uma vez. Em seguida, vou selecionar essa tag de cabeçalho usando a linha do tempo , ponto TL e vou usar do Método Então eu coloco os latões redondos, primeiro, vou mirar primeiro, vou mirar na etiqueta de cabeçalho usando o nome de identificação, hastag É nesses calibres que vou usar uma propriedade chamada opacidade Opacidade, e eu vou definir a opacidade zero. E então eu vou usar o tempo obsoleto exatamente assim Então, aqui vou usar o tempo obsoleto e quero configurá-lo para três segundos. Se eu configurar esse arquivo e carregar meu navegador, como você pode ver, após 3 segundos, ele iniciará a animação. Primeiro, ele mostrará o hello world, depois iniciará essa animação uma por uma. Basicamente, isso adiciona um pouco de atraso a essa animação. Basicamente, ele mostrará esse elemento após 3 segundos. Mas se eu mover este, se eu mover isso abaixo da caixa dois, então eu vou cortar essa parte e colar abaixo da seção da caixa dois. Se eu definir esse arquivo e recarregar meu navegador, depois de 3 segundos, ele mostrará esse texto Mas esse cronograma já começa. Deixe-me te mostrar. Então, se eu recarregar meu navegador, como você pode ver, ele inicia minha animação e, após 3 segundos , mostra o texto É assim que funciona se eu trocar a água. Há muitas coisas assim na linha do tempo do GSP. Comece o rótulo e aprenderemos sobre isso de tempos em tempos em nosso próximo tutorial. Em seguida, vamos criar um site. Em nosso primeiro tutorial, aprendemos como podemos usar o GSP e, em nosso segundo tutorial, aprendemos sobre a linha do tempo Então, no próximo tutorial, vou tentar criar uma página de destino interessante usando esse método de linha do tempo Além disso, vou tentar implementar todas as coisas que aprendi em nossos tutoriais anteriores Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 9. Scroll Ative várias animações e esfoliação: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao gatilho de rolagem. Em nosso tutorial anterior, já criamos com o trigger de rolagem E hoje, neste tutorial, aprenderemos um novo recurso sobre o gatilho de rolagem, por exemplo, como podemos executar várias animações de gatilho de rolagem em uma única página, como podemos usar a propriedade scrub e muito Então, vamos entrar no editor de código do estúdio de resultados e ver como podemos aplicá-lo. Então, como você pode ver, estamos no editor de código do meu estúdio de resultados. E você pode notar aqui na nossa página dois que animamos essa caixa Mas desta vez, quero animar várias animações. Para isso, vou voltar ao arquivo de estimativa de pontos de índice e, nesta sessão da segunda página, vou comentar esta caixa e criar dois cabeçalhos. E vou criar nosso primeiro cabeçalho usando tag H one e o Hemot Hello World Em seguida, vou criar outra tag de cabeçalho, H two. Eu vou dar as boas-vindas. Vou configurar esse arquivo. Agora, vamos estilizar esse elemento, H um e H dois. Para isso, vou entrar no arquivo CSS de estilo. Mas antes, no início, em nosso contêiner principal, na fase dois, precisamos mudar a direção, então vou digitar a direção do flak Direção flexível, vou fazer com que seja uma coluna. Em seguida, vou estilizar as etiquetas auditivas, H one. Em seguida, dentro dos mineiros. Então, dentro da tag H one, primeiro, vou alterar o tamanho da fonte e quero torná-la de 50 pixels. Além disso, vou mudar a posição e a posição, vou torná-las relativas. Então eu vou mudar a cor do diagrama. Cor de fundo, vou torná-la vermelha. Além disso, vou adicionar um pouco de preenchimento, então vou digitar preenchimento de todas as direções Eu quero adicionar um preenchimento de dez pixels. Em seguida, vou duplicar esta seção e vou alterar o nome do seletor Desta vez, vou fazer com que seja H dois, título dois, e vou definir esse arquivo. Mas precisamos mudar a cor de fundo do título dois, então vou torná-lo amarelo. E eu vou configurar esse arquivo e voltar para o navegador. Se eu recarregar o navegador, aqui você pode ver o resultado Tinha os dois textos, mas precisamos de um pequeno espaço entre eles. Para isso, dentro do contêiner pai, página dois, vou usar a propriedade gap. Gap, e eu quero usar o gap 50 pixel. Vou configurar esse arquivo e voltar para o meu navegador, e vou recarregar esse navegador Acho que essa lacuna é boa para o exemplo. Basicamente, neste exemplo, vamos executar várias animações de gatilho de rolagem em uma única página. Então, agora, vamos voltar ao arquivo de script J. E primeiro, vou remover todo o código desnecessário e o tipo Hemo GSAP e precisamos digitar dot, e vou usar o método from Então, dentro das rodadas, primeiro, precisamos passar para selecionar um nome Então, vou usar nosso nome de identificação na página dois. Em seguida, vou selecionar H uma tag. Depois da vírgula, dentro das maldições, vou usar as propriedades Em primeiro lugar, vou adicionar Opacidade aqui. Então, para digitar Opacidade. E vou definir a opacidade como zero. Como você pode ver, aqui usamos o método from. Então, do zero, ele volta à opacidade normal. Então eu vou usar a duração. E eu vou dizer duração em segundos. Em seguida, vou usar a direção a partir da qual eu quero mover esse texto. Então eu vou usar Xxs e vou passar de 500 pixels. Então, por favor, defina este arquivo se eu recarregar meu navegador, vamos ver se ele está funcionando em nada Como você pode ver, funciona. Aqui, não aplicamos o gatilho de rolagem. Ele executa automaticamente a animação. Agora vou aplicar o gatilho de rolagem. Para isso, aqui vou digitar vírgula e vou digitar scroll trigger Gatilho de rolagem. T deve ser capital, e você precisa se lembrar disso. Role o gatilho e, dentro das cálices, primeiro, vou chamar o gatilho Acione, e eu vou colocá-lo dentro do curso duplo, eu vou zumbir Eu quero acionar essa animação. Então eu copio esta seção e vou colá-la aqui. Em seguida, precisamos definir esse rolador em nosso corpo, algum tipo de rolador Scroller, e eu quero configurá-lo em nossa seção corporal. Na maioria das vezes, precisamos usar o corpo até rodar a locomotiva Então, também precisamos de marcadores para identificar esse ponto de regra, o ponto de gatilho Então, digite marcador, marcadores, e eu quero que isso seja verdade Em seguida, precisamos definir o tipo de ponto inicial principal start, start e sua passagem inserir núcleos duplos, top. Da primeira posição, quero reduzi-la em 60%. Além disso, vou definir na posição, rolar em, onde ele vai parar de executar nossa animação Então, vou digitar ain't dentro das aspas duplas a partir do topo, quero movê-lo para baixo em 30%. E eu vou configurar esse arquivo. Sim, com a posição inicial, também podemos definir nossa posição final. Deixe-me te mostrar. Então, se eu recarregar meu navegador, agora você pode ver que esta é a posição inicial do nosso acadêmico e essa é a posição final do nosso acadêmico Se eu ultrapassar esse limite, ele executará essa animação. Deixe-me te mostrar. Não se preocupe Explicarei qual é o uso do anúncio em rolagem em nosso próximo exemplo. Então, aqui animamos nosso primeiro texto. Agora precisamos animar o segundo texto. Para isso, voltamos ao código do Visor Studio, e vou duplicar esta seção Desta vez, vou mudar o seletor. Vou fazer com que seja H um, dois H dois. Além disso, precisamos mudar a direção. Eu quero mover esse texto na direção oposta, então vou usar o valor -500 Agora, depois desse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora você pode ver o total para iniciar a troca por uma diferença na tag de cabeçalho Se eu ultrapassar esse limite, ele executará a primeira animação de texto. Então, se eu ultrapassar esse limite, isso acionará a segunda animação de texto. Como você pode ver, ele executa a animação na direção oposta. É assim que podemos acionar várias animações usando o gatilho de rolagem. Agora eu quero aplicar um efeito de animação diferente. Mas, para isso, antes de comentar este ícone, segunda seção de animação. Vamos voltar ao código do estúdio do usuário e, primeiro, vou comentar esta seção. Em seguida, volto ao arquivo da tabela de pontos do índice e vou comentar essa tag H two. E eu vou configurar esse arquivo. Agora, vamos voltar ao navegador novamente e recarregar meu navegador Agora você pode ver que temos apenas uma animação de texto. Se eu acionar a animação, como você pode ver, ela executa a animação normalmente, mas eu não quero esse efeito. Agora eu quero executar essa animação entre o scroller Start e o scroller Quero dizer que, se eu cruzar essa posição inicial de rolagem, instantaneamente ela não executará a animação completa. De acordo com esse valor de rolagem, ele moverá o elemento. Para isso, precisamos usar outra propriedade. E agora vou aplicar um novo efeito de animação usando a propriedade scrap Deixe-me te mostrar como. Então, vamos ver um código de estúdio, e eu vou mergulhar na diversão dos DJs do Scribe Primeiro, vou usar outra propriedade, e o nome da nossa propriedade é escala. Escala e eu vou dizer escala zero. A partir da escala zero, ele volta à posição normal. Em seguida, vou definir a duração de apenas 1 segundo. Agora vou aplicar a nova propriedade scrub, SCRUB, aqui você pode usar dois Qualquer valor de Bullen, ou valor numérico. Se você usar o valor numérico de 1 a 5, ele controlará a suavidade Vou começar com o valor de Bullen, então vou continuar Agora vamos ver que tipo de efeito de animação ele fornecerá. Então, vamos configurar o arquivo e voltar ao navegador, e agora você pode notar o efeito. Então, vou ler meu navegador e agora você pode notar essa animação será reproduzida à medida que rolamos. Se eu rolar para baixo, agora você pode vê-la completar a animação. Ele executa a animação até chegarmos à posição final da rolagem. Agora ele completa a animação. E se eu rolar esta página para cima, agora você pode vê-la se movendo para trás Então esse é o efeito que podemos obter usando sucata. Ele não executará a animação instantaneamente, e podemos executar essa animação várias vezes. Em nossos exemplos anteriores, ele executa a animação instantaneamente quando ultrapassamos o limite. Além disso, ele não executa a animação várias vezes, mas usando o Scrab, podemos fazer a coisa várias vezes Se eu rolar para baixo, como você pode ver, ele move o elemento e completará a animação até cruzar a posição final da rolagem, e também fará o oposto se rolarmos para cima. Se você quiser aplicar suavidade a ele, para isso, você pode usar outros valores, como vamos voltar ao código do salt studio, TFI, passe dois aqui Eu dupliquei esta linha e comento linha anterior e aqui estou eu para passar o valor de sucata dois e, em seguida, definir este arquivo Agora, vamos voltar ao navegador e eu vou ler meu navegador. Desta vez, você pode ver um pouco suavidade nessa animação Depois de alterar o valor, você pode experimentar a suavidade dessa animação Se você definir o maior valor cinco , ele fornecerá mais suavidade. Mas dois é a suavidade normal para este exemplo. Como você pode definir a posição inicial e final do seu carrinho Nós já aprendemos sobre isso. Então, isso é tudo para este tutorial. No próximo exemplo, vamos aplicar o Pin NAP nele Então, obrigado por assistir a este vídeo Stone, para nosso próximo tutorial. 10. Gatilho de rolagem com pino: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao desenho de pergaminhos e hoje, neste tutorial, vamos aprender a fixar. Vamos entrar no editor de código do Visas Studio. Em nosso tutorial anterior, aprenderemos sobre o scrub Se aplicarmos essa propriedade e depois configurarmos esse arquivo e voltarmos ao meu navegador, como você sabe, eu executo nossa animação quando rolamos nossa página, acordo com o valor da rolagem, ela continua a animação Já estamos familiarizados com isso. Agora, vamos usar uma nova propriedade chamada pin. Aqui eu vou aplicar outra propriedade chamada pin aqui eu vou atribuir um valor, um valor booleano Eu vou fazer com que seja verdade. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, se eu rolar para baixo, agora você pode perceber ao rolar para baixo, nossa animação ficou presa nessa posição, deixe-me mostrar Como você pode ver, nossa animação ficou nessa posição até o final da animação. Agora, fixe esse elemento nessa posição. É isso que o Pin faz, mas usando o Pin, podemos criar um belo efeito de texto. Deixe-me mostrar o exemplo do que vamos criar neste tutorial. Vou abrir um site e mostrar o que vamos criar neste tutorial com a ajuda do Pin. Como você pode ver, aqui eu abro um site e demoro pouco para carregar. Essas são as animações feitas com o GSA. Se eu rolar um pouco para baixo, aqui você pode ver a animação. É feito por sucata. Nós já nos divertimos com isso. Quando eu rolo para baixo, como você pode ver, ele aumenta. Então eu quero te mostrar esse exemplo de experiência, este. Agora você pode ver que se eu rolar ao redor do meu Karza, ele corre na direção vertical da animação Você pode ver o que a experiência dura. Você pode notar como isso o anima. Vamos criar esse efeito usando um alfinete. Depois de concluir a animação, agora podemos rolar para a próxima página. Mas até concluirmos a animação, não podemos rolar a página para baixo. Precisamos executar essa animação para rolar para baixo, caso contrário, rolar a página para cima. Então, vamos criar esse mesmo efeito usando pino de canto, caso contrário, pino. Este exemplo faz parte da animação do gatilho de rolagem. Então, vamos voltar ao código do Visual Studio e começar a codificação. Então, eu estou no meu editor de código do Visual Studio e aqui eu abro o arquivo de ponto js da tela. Primeiro, vou remover todo o código desse arquivo JS. Em seguida, removerei todo o código do estilo ou do arquivo CSS. Eu não preciso disso. E então eu volto para minha página HTML de pontos de índice. A partir daqui, vou remover a caixa. Eu não preciso dessa caixa. Além disso, vou remover esse texto, essa tag de cabeçalho. Agora, vou criar vou amarrar o texto na seção da página dois. Estou tentando criar quase o mesmo efeito. Então, aqui, vou digitar H uma tag, H um. E aqui vou digitar a experiência. Então eu vou configurar esse arquivo. Depois de definir esse arquivo, vamos pular para a seção de estilo. Precisamos estilizá-lo. Caso contrário, nossa página ficará assim. Aqui vou começar nosso estilo. Primeiro, vou selecionar a estrela seletora universal Então, por dentro, o Calibra diz, eu vou dizer margem Eu vou dizer margem zero. Além disso, vou dizer preenchimento, preenchimento zero. Então eu vou dizer que é o tamanho da caixa. Tamanho da caixa: caixa de borda. Em seguida, vou definir a família da fonte. Fonte, de forma justa. Aqui você pode escolher sua própria família de fontes, mas, por enquanto, vou escolher esta de Franklin Gothi Em seguida, vou projetar a seção do corpo, o corpo e o SDL, algum tipo de corpo STL. Então, dentro dos calibres , vou definir a altura e a largura desse corpo Então, para definir a largura, alguns definirão a altura. Eu vou fazer isso 100%. Então eu vou definir maconha. Vou substituir a altura em que removemos ervas daninhas, 100%. Agora, uma por uma, vou estilizar as páginas. Para isso, vou usar seu Dym, como página um, sumtyHTag, página um, as calices, vou atribuir a vou Altura, 100%. Então eu vou atribuir W W 100%. Também para definir a cor de fundo, tipo verão, cor de fundo azul claro Essa. Da mesma forma, vou definir altura e peso para outras páginas. Então eu dupliquei essa linha várias vezes. Isso é para a segunda página, e vou mudar a cor do fundo para torná-lo um pouco mais escuro Então isso é para a página três. Também vou mudar a cor de fundo, essa. E eu vou configurar esse arquivo. Agora eu quero configurar esse arquivo, vamos voltar ao navegador e recarregar esta página Então é assim que parecia. Agora vamos voltar para eles com um código de estúdio e estilizar o texto, este, a tag H one. Então, aqui digite na página dois, eu quero segmentar a página dois. Eu quero ter como alvo H uma etiqueta, H um. Então, primeiro, dentro da resis ali, vou atribuir o tamanho da fonte, o tamanho da fonte e vou usar fontes pequenas e grandes Vou usar 40 VW. Então eu não vou usar muita fonte em negrito. Depende de você o tipo de espessura da fonte que você vai usar. Algum tipo de espessura de fonte. 500. Em seguida, vou atribuir preenchimento, preenchimento e, dentro do preenchimento, vou atribuir preenchimento de dez pixels de todas as direções Em seguida, vou transformar essas tomadas em maiúsculas. Então digite takes, transform, arcs e eu vou configurar esse arquivo Depois de configurar esse arquivo, se eu acessar meu navegador e recarregar minha página, é assim que nosso texto se parece Agora você pode notar que temos a barra de rolagem vertical para o texto que eu uso, porque aqui eu uso uma fonte grande. É por isso que aparece. Agora precisamos ocultar essa barra de rolagem vertical usando a propriedade overflow Precisamos usar overflow X porque o texto se expande na direção xs Aqui, vou usar uma propriedade em nossa tag corporal. Então digite body dentro do recesso de cores, vou usar overflow X O flow X hidden Vou configurar esse arquivo. Agora vamos voltar ao navegador e recarregá-lo Agora não temos nenhuma barra de rolagem vertical. Agora, vamos entrar na seção de animação. Para isso, precisamos entrar no arquivo Js do script doot. Para criar a animação, aqui precisamos usar dois métodos. Então, aqui vou digitar o ponto dois do JSAP. Então, primeiro, dentro da prensa redonda, precisamos atingir o elemento. Em qual elemento, vamos aplicar a animação. Então, vou marcar a tag has, página dois, e a partir da página dois, quero segmentar H uma tag. Então, eu vou usar vírgula, então dentro das cálices aqui não usaríamos nossas propriedades No início, vou usar a propriedade transform. Digite Sun, transform Transform e dentro dos códigos duplos, eu vou usar translate X, translate X. Então, dentro dos rounders aqui, precisamos fornecer a posição De qual posição ele vai traduzir o texto. Aqui eu vou usar menos um 50%, e vou definir esse arquivo Agora, vamos definir o arquivo e C e voltar para o meu navegador e ver se ele acionou a animação corretamente ou não. Então, estamos no meu navegador e vou recarregá-lo agora Aqui na seção, você pode ver o resultado Se eu segurei meu navegador novamente, agora você pode perceber que sim, está funcionando. Aqui você pode notar que a partir da posição original deste texto, ele moveu o texto na direção XXs. Ele moveu o texto em -150% na direção XXs desta maneira, deste lado Se eu for meu navegador, você pode notar isso. Agora, só precisamos acionar essa animação usando o método de gatilho de rolagem, e também precisamos usar scrap, porque quando rolamos essa animação, caso contrário, esta página , podemos controlá-la Podemos controlar o grecton dessa animação. Podemos movê-lo para frente, caso contrário, para trás. Vamos entrar novamente no item de código do Visual Studio. Então, aqui vou usar a propriedade scroll trigger. Então morra, role o gatilho. Role o gatilho e, dentro do Calibra, diz: primeira propriedade, vou usar o gatilho Acione e dentro do curso duplo, aqui, precisamos segmentar apenas a página. Precisamos acionar somente a página não a animação somente neste exemplo Aqui vou digitar Has tag, página dois, página dois, e então precisamos definir o scroller no corpo, o tipo S scroller E eu vou definir o corpo dessa seção de régua. Em seguida, precisamos definir a propriedade que já está em nosso tutorial anterior, scrub SCRUB E para esse esfoliante, você pode usar o valor de Bollan verdadeiro Caso contrário, você pode usar e, caso contrário, se quiser suavidade, se você controlar a suavidade, poderá passar qualquer valor numérico Vou passar dois aqui. E então vamos usar a propriedade pin, PIN, e aqui, vou usar o valor Brilliant true. É isso mesmo. Se eu definir esse arquivo e voltar ao meu navegador recarregar meu navegador e tentar rolar a página para baixo, agora você poderá experimentar essa animação Agora você pode vê-lo executando a animação quando eu rolo o cursor para baixo. Aqui você pode observar a barra. Se eu rolar para cima, ele move o texto na direção positiva na direção XS positiva, e se eu me mover para baixo, ele move o texto na direção e se eu me mover para baixo, negativa s. Em seguida, conclua a animação alcance totalmente a posição Agora você pode rolar para baixo até a terceira página. Caso contrário, você não poderá rolá-la. Da mesma forma, até você executar essa animação, agora você pode vê-la completar a animação e, em seguida, podemos rolar para cima e voltar para a primeira página. Então é assim que podemos criar esse efeito. É um efeito muito bonito em sites de modelos. Espero que agora esteja claro para você como podemos usar pino de canto e a sucata para criar esse belo exemplo Então, obrigado por assistir a este vídeo Stune, para nosso próximo tutorial 11. Animação no GSAP com SVG Graphic: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação GsAP E hoje, neste tutorial, vamos trabalhar com o gráfico BG. Sim. Big significa gráfico escalável de Victor VG é formato de arquivo de imagem. Existem dois tipos de formato de arquivo como restaurar gráfico e Vctorraphi e SVG significam ctorGraphi escalável Se você ampliar qualquer imagem de repouso, como imagens de bitmap, ela pixelizará a imagem, caso contrário, distorcerá a imagem caso contrário, Mas se você aumentar a escala de qualquer imagem vetorial, ela não a pixelará. Você pode ampliar uma imagem vetorial o quanto quiser. Deixe-me mostrar a demonstração. Como você pode ver na tela, é a imagem da flor. É um gráfico de restauração, caso contrário, uma imagem de bitmap. Se eu tentar escalá-la, deixe-me mostrar agora que você pode ver os pixels nesta flor. Esses são os pixels com os quais a imagem foi feita. Não podemos escalar a imagem restaurada de forma ilimitada. Isso vai distorcer a imagem. Aqui você pode observar o pixel sólido com cores diferentes. Esse é o principal problema com imagens em repouso. Agora vamos falar sobre imagem vetorial, gráfico vetorial. Agora, este é o exemplo da versão gráfica vetorial dessa flor. Se eu tentar ampliar essa flor, agora você pode ampliar essa flor o quanto quiser. Agora você não pode ver nenhum pixel nessa imagem porque as formas gráficas vetoriais são feitas com um caminho fechado, como se fosse um caminho fechado, e esse caminho fechado fosse preenchido com cores. É como um objeto. É por isso que podemos escalar essa imagem ilimitada e ela não perderá sua qualidade. Então essa é a principal diferença entre imagem rasterizada e imagem vetorial Neste tutorial, não vou dar uma introdução aprofundada dos gráficos Sigi porque é um tópico enorme Eu já criei um curso diferente sobre esse tópico. Você pode conferir. Basicamente, neste tutorial, vamos nos concentrar na animação SAP, não na animação SVG, mas vamos usar o gráfico SVG com Então, vamos ver o que vamos criar neste tutorial. Como você pode ver, aqui abrimos um site chamado Brandim dot NL, e se eu rolar um pouco para baixo nesta página, aqui, você pode ver um exemplo de animação SVG Essa linha. Aqui você pode ver uma linha de string. Mas se eu colocar meus carros na linha de corda, você pode ver um lindo efeito de corda Aqui você pode notar que, de acordo com a posição do meu cursor, ele esticou essa corda E se eu mover meu cursor um pouco mais, agora você pode ver um efeito de string. Então, vamos criar esse efeito de string usando animação SVG Essa linha foi feita com SVG com tag Put. Portanto, precisamos entender o que é a tag put e como podemos desenhar elementos de caminho usando a tag Put. Então, podemos aplicar a animação GSP nessa tecnologia de bunda para criar esse efeito Vamos criar esse tipo de efeito de animação SVG de seda usando o GSAP Vamos voltar ao código do isal studio. Como você pode ver, estamos no meu editor de código sul studio e eu já criei o arquivo dot css no estilo Index Dotile e o arquivo script dot js Eu já criei o modelo da caldeira para o arquivo IDexDTETIml Primeiro, vou vincular o arquivo CSS estilizado a esse arquivo de estimativa de pontos de índice Então, aqui, eu estou digitando link tag. Link e Amutypty dot Css. Em seguida, dentro da minha tag body, aqui vou inserir o tipo de arquivo script Source Como fonte, vou passar esse arquivo de script, script dot JS. Vou configurar esse arquivo. E eu já abro esse arquivo usando extensão de servidor ativo no meu navegador. Agora, primeiro, dentro da tag body, aqui vou criar uma tag profunda. Então, dê uma dica ao Dev e aqui vou atribuir um ID a essa tag profunda e nosso nome de ID é string. Então, dentro da tag string, vamos criar a tag SVG, o gráfico SVG Mas antes de entrarmos na pilha de estilo CSS, aqui vou criar o modelo inicial para CSS Sot, seletor universal, e dentro da propriedade calibrSF, vou usar a margem e atribuir à margem toda Em seguida, vou atribuir preenchimento, preenchimento também zero. Dez, vou adicionar o tamanho da caixa. Vou aplicar o tamanho da caixa. Caixa de borda de tamanho da caixa, e também vou atribuir família de fontes se usarmos qualquer família de fontes, mas caso contrário, você pode ignorá-la Então, vou atribuir uma família de fontes à família e vou usar esta Franklin Gatheri Depois disso, vou estilizar nossa seção de HTML e corpo. Então, experimente HTML, corpo em DML. Vou estilizar o ESTml e a tag body. Primeiro, vou atribuir altura, altura por altura, vou usar 100%. Vou usar 100% da minha tela. E então eu vou atribuir, com, e aqui vou passar 100%. Depois disso, quero atribuir a cor de fundo a esse corpo. Eu quero dizer que a etiqueta corporal, corpo, então dentro do Calibra diz, aqui vou dar uma dica sobre a cor do fundo, a cor do fundo, fundo, e eu quero que um pouco de cor escura tenha a etiqueta um, um, um, cinza Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, é assim que nossa página se parece. Agora, vamos desenhar uma tela SVG em nossa página da web. Antes de criar qualquer forma SVG em nossa página da web, precisamos definir uma área de tela SVG para essa Então, dentro dessa área da tela em V, podemos desenhar a forma. Eu quero criar uma tela em V deste ponto até este ponto, e vou subir até uma altura de 600 pixels Deixe-me mostrar o que estou tentando criar. Suponha que essa seja a área branca da página do nosso navegador e, nessa página do navegador, eu queira definir uma tela SVG Quero definir o tamanho da tela de um ponto a outro. Então, eu quero tirar com quase 1920, e vou pegar uma altura de quase 600, algo assim. Para entender melhor, vou aplicar uma cor de fundo a esse gráfico em V. Suponha que eu aplique essa cor. Esta é a nossa área SVD Canvas. Agora, dentro dessa área do V Canvas, podemos desenhar qualquer forma. Pode ser um círculo, uma linha, etc. Mas, para este exemplo, precisamos desenhar uma linha. Precisamos desenhar uma forma de linha. Então, precisamos desenhar uma linha desse ponto até esse ponto. E como você pode ver, você pode notar, aqui alinhamos essa linha verticalmente no centro dessa tela E agora precisamos mover essa linha de acordo com a posição do cursor. Precisamos cortar a linha acordo com a posição do cursor, algo assim. Para isso, precisamos usar curvas laterais quadráticas. Então, vamos entrar no código do Visor Studio. E para definir uma área de tela SVG, precisamos usar a guia Vg Então, digite SVG. Então, dentro dela está a tag Vg. Primeiro, vou atribuir a largura. Então, para digitar a largura igual a, e aqui vou atribuir quase 1920 pixels porque resolução da tela do meu computador é 1920 5.080 Então, eu vou tirar com quase 1920. Então, digite 1910. Então eu vou atribuir altura, altura igual a, e vou tomar uma altura de quase 600 pixels, caso contrário, 500, isso é bom. Agora vamos entrar no arquivo CSS de pontos de ladrilho e vou estilizar esse fluxo profundo de elementos. Então eu copio seu nome de ID e vou pular para o arquivo CSS tile dot, e a tag hero tem fluxo de tag. Então, dentro dos versos da coli, vou atribuir altura, largura e cor de fundo Primeiro, vou atribuir altura, altura e vou medir altura, e vou medir mesma forma que no Visigraphic Então eu vou digitar 500 500 pixels. Então eu vou designar com. Mas para maconha, vou atribuir 100%. Nós, eu vou ficar com 100%. Em seguida, vou atribuir a cor de fundo. Cor de fundo. Para isso, vou usar quase uma cor de fundo, mas vou usar uma versão um pouco mais clara porque precisamos identificar essa área, algo descolorido Que você possa identificar a área da corda e a área do corpo. Em seguida, vou configurar esse arquivo e vou entrar no navegador. Depois de configurar esse arquivo, se eu voltar ao meu navegador, você não verá nada aqui porque depois de configurar esse arquivo, se eu voltar para o navegador, aqui você pode ver a área, a área da tela. Esta é a área de tela da nossa vigigrafia. E agora precisamos desenhar uma linha. Precisamos desenhar uma corda desse ponto até esse ponto. Então, na próxima parte deste tutorial, vamos criar um elemento de caminho para desenhar uma linha. Há muitas coisas que você precisa saber sobre a tag Path, então não vou explicar tudo neste tutorial. Fique ligado no nosso próximo tutorial. 12. Elemento path SVG: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a VG com animação GSP E hoje, neste tutorial, vamos aprender o elemento do caminho. Particularmente, vamos aprender curvas quadráticas de Bezier Basicamente, a tag Path, caso contrário, elemento path é a tag avançada no gráfico VG Usando a tag Path, podemos desenhar linhas, curvas cúbicas de bezier, curvas quadráticas de bezier e arcos, ou quaisquer quadráticas de bezier e arcos, ou quaisquer outras formas. Podemos desenhar a forma de polígono, a forma de poliano e qualquer tipo de forma que você imaginar e qualquer tipo de forma que você imaginar. Sem círculo. No SVG, o elemento path vem com alguns comandos, como comando de linha, comando we sier curve, comando quadrático sier curve e comando arc Mas neste tutorial, estamos particularmente focados na curva ser quadrática porque precisamos dessa curva para criar a animação Silk SVG com Agora, deixe-me explicar o que são curvas ser quadráticas e como podemos desenhá-las Para criar essa curva, precisamos do ponto inicial, ponto final e do ponto da curva Esse é o ponto de freio. De acordo com esse valor em pontos, ele reduzirá a linha Suponha que essa seja nossa área de tela para o AVG Art. Aqui, atribuímos 910 pixels de largura e 500 pixels de altura. Agora, primeiro, precisamos fornecer o ponto de partida dessa linha. Em seguida, precisamos fornecer o ponto de freio. Agora a questão é: como você pode definir o ponto de partida? Aqui, precisamos passar o valor XXS e o valor YXS. Aqui você pode ver que usamos o comando. Sim, o usuário quadrático começa a partir do comando. Em seguida, você precisa passar o valor do primeiro ponto Xs. Que é 20, e então você precisa passar o valor YXS, que é 150 Em seguida, você precisa passar o valor da curva, o valor quadrático da curva ser Então, aqui, como você pode ver, a partir do XXs, mas antes de digitar o comando Q, Q, você precisa digitar o valor de x. Então, dos Xs, eu pego 950 pixels e dos YXs aqui pegamos 20 De acordo com esse valor, podemos controlar o contorno dessa linha E se você quiser reduzir a curva, você pode aumentar o valor de Xs. E, finalmente, você precisa atribuir o ponto final dessa linha desse caminho. Então esse é o nosso ponto final. Do Xxs aqui pegamos 900 pixels e do YxS aqui pegamos 150 E é assim que podemos desenhar a curva de quadriidade em SVG. E lembre-se, para criar a curva de quadriidade, aqui precisamos usar um atributo chamado D. Então, vamos entrar no Visa Studio code eater e tentar criar uma Então, estou de volta ao meu coditor do Viz Studio e já abri meu navegador usando Agora precisamos desenhar um PAT desse ponto até esse ponto. Para isso, precisamos usar a tag Put. Deixe-me te mostrar como. Então, dentro da tag SVC, vou criar a tag Put So tight PT Então, dentro dessa tag de caminho, vou usar um atributo. Precisamos usar o atributo D para criar o P D para desenhar. D igual a dentro das aspas duplas, como eu disse, precisamos começar com o ponto de partida. Então, para definir o ponto de partida, precisamos usar A e, em seguida, fornecer os xs que fazemos. Do Xxs eu vou passar 20 e do YXs aqui eu vou passar pelo hub dessa altura, aqui eu vou pegar Então, precisamos definir o valor quadrático do vizir. Então, para digitar Q para o valor quadrático do zier, vou passar 950 Isso é para xxSF YxS eu passar 20. Em seguida, precisamos definir o ponto final. Para o endpoint, vou pegar 900. Esse é o valor de XXs e, para os YxS, vou usar o mesmo valor, 250, porque quero desenhar uma linha reta Depois disso, vou definir traçado, traçado, traçado igual a, e quero a cor branca do traço. Em seguida, vou definir traçado, traço, erva daninha e vou atribuir traçado com pixel. Em seguida, vou definir a cor do campo, o preenchimento. E para a cor do campo, vou atribuir transparente. Caso contrário, por padrão, ele será preenchido com a cor preta, tipo transparente. Eu vou satisfazer. Depois de definir esse arquivo, vamos voltar para o navegador. Como você pode ver, aqui ele desenha uma bela curva. Eu desenho uma bela curva quadrática de vizir. Agora, se eu alterar o valor quadrático sier, como o valor YxS, deixe-me mostrar que se eu mudar, se eu fizer 100, isso reduzirá a curva Depois de configurar esse arquivo, se eu voltar ao meu navegador, você poderá observar o resultado. Reduz as curvas dessa cal. Se você quiser fazer uma linha reta, nesse caso, aqui você pode passar o mesmo vdu Se eu passar 250 do YxS e depois definir esse arquivo e voltar para o meu navegador, agora você poderá vê-lo desenhando uma linha reta Aqui, apenas manipulamos o valor YX. Além disso, você pode alterar o XXS VDO. Suponha que se eu alterar o valor do XSS, suponha que para XXS eu passe 200 e para YXS também Agora você pode observar um tipo diferente de linha curva. Deixe-me te mostrar. Após a etapa deste arquivo, se eu mostrar meu navegador, você poderá ver o resultado. Agora, é assim que nossa curva se parece. Agora podemos alterar a curvatura dessa linha de acordo com o valor dos cursores e o valor YXS Se eu mover meu cursor nessa posição, acordo com os excessos do cursor e o valor de YXS, podemos controlar a curvatura desse ponto. Isso é o que vamos fazer neste projeto. Agora, vamos voltar ao código do estúdio. Agora vamos criar um link com a animação do GSAP. Então, no meu navegador, vou pesquisar SAP CDA, GSAP CDN E a partir desse primeiro link, cinjs.com, vou usar esse link e vou copiá-lo Depois disso, aqui, vou colá-lo antes desse script dot JS five Em seguida, vou entrar no arquivo script dot js e agora vou começar nossa codificação Primeiro, no meu arquivo JavaScript, vou declarar uma variável lá e nossa variável é P path igual a dentro dos códigos duplos Aqui, vou passar esse valor de atributo. Eu copio esse valor, o valor inteiro, e vou colocá-lo aqui dentro desse caminho. Então eu duplico essa linha e aqui estou eu para digitar o caminho final Basicamente, aqui vou declarar duas variáveis. Caminho final igual ao mesmo valor. Posteriormente, você poderá entender por que eu uso o mesmo valor em uma variável diferente. Depois disso, precisamos selecionar esse elemento, stream, e vamos selecionar esse elemento profundo usando seu nome IN. Eu copio seu nome de ID e volto para o ponto de fluxo JSP. Para selecionar o elemento, precisamos usar métodos Dom Dom Precisamos usar o método Dom. Precisamos usar o seletor de consultas. Selecione o seletor de QoI de pontos do documento, o seletor de identificação de pontos do documento dentro do arredondador dentro da tag de hash de curso duplo, o fluxo do nome de ID, e eu vou Aqui vou declarar onde e nome da nossa variável é string igual a asilo it, esse é o fluxo do elemento Depois disso, precisamos aplicar um evento de mouse a esse elemento. Deixe-me te mostrar como. Se você está familiarizado com o modelo de objeto de documento Dom , espero que não seja tão difícil para você. Então digite a variável string dot add event listener, esta Então, dentro da rodada, diz: Aqui vou usar o evento, um evento do mouse, vou usar o evento de movimento do mouse, o movimento do mouse e vou chamá-lo de função. Então dentro do css e ela passam um coma entre eles, depois dentro do CLiress, eu quero imprimir o vdu do evento Para imprimir o valor do evento dentro dessa função, será necessário passar DEPs Então, dentro dessa função, se eu imprimir, Console, se eu pegar o log de pontos do Console, dentro das datas de resinas redondas, vou definir esse arquivo Agora, depois de configurar esse arquivo, se eu voltar ao meu navegador e abrir meu console. Deixe-me te mostrar. Agora você pode notar sempre que eu movo meu cursor dentro dessa área de string dv, caso contrário, essa área do elemento SVG, você pode notar que ela aciona o evento do mouse Como você pode ver, sempre que eu movo meu cursor dentro dessa área, ele imprime, eu imprimo o valor x da tela, o valor y da tela, o valor do cliente x e o valor do cliente Y. Ele retorna a posição do cursor. Ele fornece o XXS e o YXs. Se eu mover meu carro nessa seção, agora você pode notar. Agora você pode notar nos XXs aqui que ele imprime 1.790 e nos YxS Agora, vamos voltar ao código do Visor Studio. E se você imprimir somente o valor YX, basta digitar datas ponto Y. Depois de configurar este arquivo, se eu voltar ao meu navegador novamente, agora se eu cortar nessa área, agora você pode vê-lo imprimir somente o Então, de acordo com os valores de XXs e YX, vamos definir o valor da curva quadrática Então, ele vai mover a linha sempre que eu mover o mouse. Então, é isso para este tutorial, e no próximo tutorial, vamos aplicar a animação GSP neste stream Então, obrigado por assistir a este vídeo Stube. 13. Crie animações slick SVG: Portanto, esta é a última palavra deste tutorial e, nessa seção, vamos animar essa linha de string usando animação GSP Mas, a princípio, vou comentar essa linha, não preciso dela. Então, dentro dessa função aqui, vou chamar esse caminho. Essa variável de caminho. Vou digitar path e, em seguida, aqui, vou usar backticks porque aqui vamos aplicar o método de string de modelo Vou usar acentos cravos e, em seguida, vou copiar esse valor exato Depois disso, vou colá-lo aqui. Então, como você sabe, para mover a linha da string de acordo com a posição do cursor, aqui precisamos alterar o valor do ponto quadrático, esses valores Em primeiro lugar, vou alterar o valor do YXS. Então, aqui vou amarrar o cifrão e os cálices. Esse é o método de string Tremblt. Espero que você já esteja familiarizado com isso. E aqui eu vou passar o valor YXS. Vou amarrar DE com o ponto Y. Vou dizer isso bem. Agora você pode pensar que depois disso vai funcionar. Não, não vai funcionar porque não aplicamos, não aplicamos esse caminho a esse atributo. Precisamos alterar o atributo e aplicar esse caminho a esse atributo. Para isso, podemos usar o GSP. Deixe-me te mostrar como. Mas antes, vou fazer essa linha de cordas em linha reta. Não é reto. Então, aqui, eu vou empatar a partir do Xxs eu vou pegar zero quadrático 0,19 950 E a partir dos YxS eu vou passar 250, e vou configurar esse arquivo Depois de definir este arquivo, aqui você pode ver que agora ele faz nossa linha reta. Agora, para substituir o valor do atributo, aqui vamos aplicar o GSAP Então, dentro dessa função, vou digitar GSAP dot to method Então, primeiro, precisamos direcionar o elemento em qual elemento eu quero aplicar a animação, que é SVG, e aí vou direcionar essa tag de caminho Então, vou vincular o caminho, então, a partir da tag SVG, quero segmentar a tag Pat Depois disso, eu uso o coma. Então, dentro da lista aqui, vou usar um recurso da animação GSP, que é atributo, er, AT R. Ao usá-lo, podemos substituir qualquer valor de atributo E dentro da lista e se eu mostrar meu arquivo de estimativa de índice, quero alterar o valor do atributo Então, aqui para passar D. Então, dois pontos aqui, eu quero substituir por essa variável de caminho Quero substituir esse atributo, o atributo antigo, essa variável de caminho. Então, digite o caminho aqui. Mas é a propriedade predefinida da animação GSP. Com ele, podemos alterar qualquer valor de atributo. Primeiro, direcionamos o caminho SVG usando seu nome de tag, depois direcionamos o atributo D e substituímos o valor do atributo por esse PAT E, como você sabe, de acordo com a posição do cursor, ele substituirá o valor YX, o valor da quadriidade Depois disso, vou dizer duração. E eu vou definir a duração de 0,3 segundo. Então, antes de definir esse arquivo, precisamos substituir esse valor do caminho pelo valor do atributo. Eu copio este e aqui, vou substituir esse valor por esse novo valor. Além disso, precisamos mudar a posição, então eu quero fazer isso a partir dos Xs que eu quero atribuir 950 E então eu vou configurar esse arquivo. Esse arquivo, se eu for pular para o meu navegador, acordo com o cursor, posição xs, ele encurta a linha Agora é assim que parece. Como você pode ver, ele já começou a seguir o cursor e a contornar a linha Agora, precisamos fazer a mesma coisa para X xs. Agora funciona apenas para a direção YXS. E agora eu também quero a sequência dos XXs. Para isso, vamos voltar ao editor de código. E aqui, vou substituir esse valor. Vou usar o cifrão e o fígado é digitar ts dot XXs Agora, depois de configurar esse arquivo, se eu voltar ao meu navegador novamente, agora você pode ver, agora ele segue o cazar do Xs e do YXS Alterou o valor da quantidade zer Xs e YxS de acordo com a posição do cursor Então é assim que parecia. Estamos quase terminando. Só precisamos aplicar algum efeito de atenuação para obter o resultado, para obter o resultado perfeito Então, aqui, vou abrir uma nova guia e pesquisar o SAP, com facilidade. Se eu abrir este documento, agora você pode ver aqui que ele fornece alguns efeitos de atenuação Você pode experimentar um por um, tudo isso. É assim que os efeitos de atenuação funcionam. Vou usar essa potência de três, de saída de três. Então, vou copiar essa propriedade e o valor. E então eu vou entrar no editor de código. E aqui, eu vou digitar, vou colar esse código. Saída Es de três pontos. E eu vou configurar esse arquivo. Basicamente, ele fornecerá um efeito de animação suave Então, eu configuro esse arquivo se eu voltar ao meu navegador e recarregar esta página Agora você pode notar que nossa animação funciona sem problemas. Agora precisamos resolver um problema. Se eu mover meu cursor para fora dessa caixa, agora você pode notar que essa string não está volta à posição original novamente. Está nadando do jeito que está, acordo com o último valor do cursor. Então, precisamos resolver esse problema. Então, para isso, precisamos aplicar outro evento de mouse. Então, vamos voltar ao editor de código e, aqui, vou digitar string mas vou aplicar um ouvinte par novamente, Adicionar ouvinte par Então, dentro do ss redondo, desta vez vou usar o evento de saída do mouse. Alguns digitam sair do mouse, sair do mouse, então eu vou chamá-la de função. Função. Então, dentro do Carlss, vou aplicar o G SAP, e precisamos usar dois métodos. Então, primeiro, dentro do caliss, precisamos colocar o PAT Vou copiar o mesmo seletor SVG e PAT. Depois disso, dentro da classe novamente, precisamos alterar o valor do atributo Precisamos alterar o valor do atributo dessa tag de caminho. Para isso, novamente, vou usar nossa propriedade ATTR. Então, dentro do CLSSh, vou dizer D e eu vou dizer que desta vez vou configurá-lo com Eu copio o nome da variável e vou colá-lo aqui. E como você pode ver, em nosso caminho final, desenhamos uma linha reta com o cabelo . Nada mais. Depois disso, vou passar uma vírgula. Além disso, vou adicionar pouca duração, duração, e vou dizer duração, 1,5 segundo. Você pode ajustar sua duração de acordo com seus recortes e eu vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode notar que ele está seguindo meu cursor. Essa corda segue meu cursor e dobra a corda de acordo com a posição do cursor. Mas quando eu lidero esta área, agora você pode ver que ela está de volta à sua própria posição. Mas o problema ainda é que não é como uma corda de violão. Para isso, para obter esse efeito aqui para obter esse efeito, precisamos voltar às funções is desta seção, vou usar o efeito elástico, esse efeito, esse efeito de string E eu vou perseguir o valor. Para o primeiro valor, vou usar um e para o segundo valor, aqui vou usar 0,2 e vou copiar a seção inteira. Es. Em seguida, vou entrar no pequeno código do estúdio aqui após a vírgula, na próxima linha, vou colar o Vd Elástico para fora. Depois de configurar esse arquivo, se eu voltar ao meu navegador e reescrevê-lo, agora você pode ver que sempre que eu movo meu cursor para fora dessa área, essa linha funciona como um efeito de corda de violão Você pode notar isso. Funciona perfeitamente. Sempre que eu movo meu mouse nesta área, como você pode ver, ele segue o mouse. Mas sempre que eu movo meu mouse para fora dessa área, ele volta à sua posição original e dá pouco efeito de ressalto E agora, finalmente, vou mudar a fundo da cor de fundo desse elemento. Então, aqui, vou entrar no arquivo CSS do stylo e, novamente, vou usar 111 E eu vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador, agora ele está perfeito. Ele começa a funcionar quando eu movo o alcance do mouse dessa área SVG, e realmente é quando eu movo o mouse para fora dela Então é assim que podemos criar esse belo efeito usando SVG e GSAP Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 14. Crie uma animação personalizada do cursor: Olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial. Mas hoje, neste tutorial, vamos ao ParomEpject. Vamos criar uma animação de cursor personalizada usando o GSA Então, deixe-me mostrar a demonstração do que vamos construir neste tutorial Como você pode ver na tela, aqui e eu criamos uma página da web E se eu mover meu cursor nesta página da web, agora você pode ver esse pequeno círculo seguindo meu cursor Onde quer que eu mova meu cursor nesta página, ele segue meu cursor. Mas também quero te mostrar outra coisa. Se eu dobrar meu cursor, caso contrário mover meu cursor nesta imagem, agora você pode ver que aumentou o tamanho do cursor, o tamanho personalizado do cursor Além disso, mostra algum texto, como m. Mas se eu remover meu curvo desse elemento, novamente, ele se torna pequeno e removo o texto desse cursor, o cursor personalizado. É isso que vamos construir neste projeto com a ajuda da animação GSP Então, vamos começar a prática e entrar no editor de código do Visual Studio. Finalmente, como você pode ver, estamos no meu editor de código do Visual Studio e eu já crio o arquivo Sass de pontos no estilo EstalPage com pontos de índice e o arquivo JS de pontos de script. E como você pode ver, eu já criei um link para o arquivo Style na minha página de estimativa. Além disso, vinculo o arquivo Script DJs a esta página de estimativa. Para criar esse tipo de animação de cursor personalizada, devemos ter conhecimento sobre o Java Script Dom. Dom significa modelo de objeto de documento. Espero que você já esteja familiarizado com isso. E se você não tem nenhum conhecimento sobre dom, não se preocupe. Vamos aprender isso quando o aplicarmos. Agora, vamos entrar no arquivo CSS para iniciar o clichê CSS Então, aqui, eu vou digitar. Primeiro, vou definir o início do seletor universal, depois, dentro da Classe, vou definir a margem de margem zero Além disso, vou definir o preenchimento. Zero. Em seguida, vou atribuir o tamanho da caixa, o tamanho da caixa e vou usar o valor da caixa de borda Se você quiser fornecer qualquer família de fontes, você pode, por enquanto, vou usar a família de fontes aerial Essa. Depois disso, precisamos definir alta negação ao nosso corpo e ao HTML. Digite HTL, corpo da vírgula. Disse a altura da panturrilha, vou atribuir altura E então eu vou atribuir com 100%. Vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao arquivo ATL de pontos de índice Agora, dentro da tag body, eu quero criar um cursor personalizado, mas antes, vou criar um div principal SoltVHTag Portanto, esse é o nosso principal elemento div. Dentro desse elemento div principal, eu quero criar um cursor dip Soltv tem Este é o nosso carro a D. Depois disso, se eu abrir esse arquivo no meu navegador, deixe-me mostrar para você e se eu reservar esta página, é assim que ela fica. Não mostra nada. Então eu quero atribuir uma cor de fundo. Cor de fundo desse elemento DV principal. Alguém que use seu nome de ID para selecioná-lo, algum tipo, tem principal. Então, no interior, o Calibra diz que, a princípio, eu quero atribuir altura de 100%, e Wi também 100 a ultrapassar Então eu quero atribuir a cor do diagrama. Cor de fundo, quero que cores escuras legais usem o hastag one, one, one, e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregá-lo, agora, é assim que ele se parecia Eu uso essa cor de proteção, agora precisamos definir o cursor. Precisamos estilizar a seção do cursor, esse cursor. Para isso, vou selecionar o cursor, HTagKursor e, dentro do Cariss, vou atribuir a vou Altura, 20 pixels. Então eu vou ver W 20 pixels. E eu vou atribuir a cor de fundo. Cor de fundo, vou usar a cor branca. Branco. Vou configurar esse arquivo. Se eu definir esse arquivo e voltar ao meu navegador e relacionar esta página, é assim que nossos carros se parecem com uma pequena caixa quadrada. Parece uma pequena caixa quadrada. Agora precisamos e agora precisamos converter essa caixa quadrada em um círculo. Para isso, vou usar o raio da borda. Deixe-me te mostrar como. Então, digite o raio da borda e eu vou atribuir 50% Ele vai converter essa caixa quadrada em um círculo. Após a etapa deste arquivo, se eu voltar ao meu navegador e retornar meu navegador, é assim que ele fica. Então, depois de criar o CursR, agora precisamos ir para o arquivo JavaScript. Em terceiro lugar, vou selecionar o arquivo skit Js. Em primeiro lugar, precisamos segmentar o carro R usando seu nome de identificação. Para isso, vamos usar métodos Dom, modelo de objeto de documento. Então, vou digitar o Qui do documento, seletor Quiri Então, dentro da barra redonda diz que, dentro do curso Duval, vou selecionar esse elemento, o elemento principal usando seu nome de ID Então, digitar tem tag e eu vou armazená-la em uma variável. Então, aqui, vou digitar where, e o nome da nossa variável é main. Homem igual a esse elemento. Em seguida, vou duplicar essa linha e, desta vez, vou selecionar o cursor da mesma maneira Então, vou usar seu nome de ID novamente, cursor, copio o nome do ID e vou substituir main por cursor. Além disso, vou mudar o cursor do nome da variável. E eu vou satisfazer. Então, aqui temos como alvo o principal elemento profundo. Também temos como alvo o elemento Dev do cursor. Agora, quero adicionar um ouvinte uniforme ao nosso principal elemento profundo Para isso, vou digitar main dot, Aden listener, Advin listener e quero usar o evento de movimentação do mouse Sempre que eu movo meu mouse, ele segue o cursor do mouse Quero que o cursor DVelement siga o cursor do mouse. Então, dentro do curso Doble, vou usar o movimento do mouse Esse é o nome do nosso evento. Movimento do mouse. Depois disso, precisamos definir uma função para chamá-la de função. Então, dentro das rodadas, dentro da resina Cal, aqui, eu quero imprimir a posição do cursor, caso contrário, os dados do cursor Então, dentro do Cal res, por enquanto, eu quero imprimir, pontos do console, log de pontos do console. Dentro do resus redondo dentro dos códigos duplos, vou digitar event event performed Ele vai imprimir esta mensagem. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar, ligar o console e carregar este navegador. Agora você pode ver que sempre que eu movo meu cursor nesta área, ele imprime o evento realizado em nosso console Então, sempre que eu mover meu mouse, ele vai imprimir, ele vai acionar essa função. Agora vamos ver quais funções estão escritas. Vamos voltar ao código do estúdio novamente aqui, vou passar um nome de variável. Aqui você pode usar qualquer nome de variável. Por enquanto, vou marcar encontros. Se eu imprimir esse valor na minha função, deixe-me mostrar algum tipo, log de pontos do console. Dentro das bolsas redondas eu vou digitar. Vou passar as datas dos nomes. Agora, vamos ver o que ela retornará, quando, mas antes comentar esta linha, eu não preciso disso agora. Agora, vamos ver o que ele retornará quando meus carros estiverem nele. Portanto, defina esse arquivo se eu voltar ao meu navegador e abrir meu console. Agora, se eu recarregar meu navegador e mover meus carros nesta área da minha janela, aqui você pode ver que ele fornece XSS e YXS de nossos carros E isso é o que precisamos para seguir o cursor. Para isso, basta usar XXs e YxS. Vamos ao editor de código novamente. Basicamente, essa variável retorna um objeto e, a partir desse objeto, podemos extrair valores diferentes, como xxS YxS, tela xxs, tela YxS etc De acordo com os eventos, eventos como chute, chute duplo, ele retornará valores diferentes. Agora vamos voltar ao bloco ou arquivo CSS aqui, vou definir a posição desse cursor e vou usar a posição fixa. Aqui eu uso posição fixa, não absoluta. Agora, vamos voltar ao navegador. Se você abrir qualquer evento do mouse, como esse evento do mouse, e rolá-lo um pouco, aqui você pode encontrar o valor e o valor Y, e precisamos que esse valor seja avaliado. Vamos voltar ao código do visa studio e entrar no arquivo script dot js E se você quiser imprimir o valor X e valor Y em seu navegador, caso contrário, se você quiser extrair o valor, como se eu quiser extrair o valor X, então se eu definir este arquivo e voltar ao navegador e recarregar este navegador e se eu inspecionar esta seção, console, agora você pode ver se eu me concentro neste elemento, caso contrário, neste DV principal elemento, agora você pode vê-lo fornecer o valor Xcess Se eu movê-lo para o lado direito, agora você pode ver o valor mais alto, e se eu movê-lo para o lado esquerdo, você pode ver o valor mais baixo. Da mesma forma, você pode acessar o valor Y xs para extrair altura por largura, usamos Xs. Vamos até a bandeja e agora aqui podemos usar o GSAP. Para isso, precisamos usar o GSF CIN. Então, vamos ao navegador e procuramos por SAF CEN. Do SAP CIrin aqui, eu quero extrair esse link Cdian Precisamos do link do CDin, então eu copio esse link sírio, copio o link do CDin e vou colá-lo antes deste squib.s5 e vou Depois disso, depois disso, precisamos voltar ao JSFi secreto Agora, dentro desse evento, podemos aplicar a animação GSP E aqui eu vou usar KSA, ponto, vou usar dois métodos, dois porque eu quero mover o elemento de sua posição inicial É por isso que usamos dois métodos. Depois, dentro dos vestidos redondos. Agora, primeiro dentro do contrabaixo, precisamos direcionar o elemento Podemos direcionar o elemento usando seu nome de ID, mas eu já tenho como alvo o elemento e armazenamos esse elemento nessa média variável. Desculpe, cursor. Então, precisamos direcionar os elementos do cursor, então vou digitar cursor aqui. Além disso, você pode direcionar o elemento usando o cursor Dime. Caso contrário, nome da tag. Porque eu já o miro usando o Dom e o salvo em uma variável. É por isso que aqui eu passo diretamente a variável. Depois do coma dentro da sala de aula. Agora, deixando o elemento carsor usando GSAP, podemos definir a posição X xs do elemento carsor Deixe-me mostrar como, para alguns tipos X do Xxs, eu vou definir datas X. Então, para os YxS, vou definir datas Y. Vou definir esta Agora, depois de definir esse arquivo, vamos ver se ele funcionará no knock. Acho que vai funcionar. Vamos entrar no navegador e recarregá-lo. Vou carregar esse navegador. Então, se eu usar o cursor Wopi dentro desse elemento Min Div, caso contrário, Min Como você pode ver, está começando, siga o cursor. Além disso, ele fornece pouca transição por padrão. Tem uma aparência muito boa. Como você pode ver quando eu movo meu cursor, acordo com a posição do cursor e a posição YX, o círculo segue o cursor e quando eu paro meu cursor , o cursor para de acordo com a posição do cursor Agora vamos ao código do z studio A. Agora, aqui você pode aplicar duração efeito de atenuação, atraso, o que você imaginar Aqui você pode usar o efeito de flexibilização de ressalto, efeito atenuação de costas e muitos Mas, por enquanto, não vou usar nenhum efeito de atenuação. Então, essa é a primeira parte deste tutorial. Neste tutorial, aprendemos como criar a animação personalizada do cursor. Não é muito difícil, mas na próxima parte deste tutorial, vou levá-la para o próximo nível. Então, obrigado por assistir este vídeo. Fique ligado na próxima parte 15. Crie uma animação personalizada do cursor no Buld, parte 2: Olá. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a este projeto, e esta é a segunda parte deste tutorial. Na parte anterior deste projeto, aprendemos como podemos seguir nosso cursor usando a animação GSP E agora vou levar esse projeto um passo adiante. Agora, vamos fazer com o código do estúdio do usuário. Então, como você pode ver, estamos no código do meu estúdio Visa e vou mover esse cursor para fora da área principal do Div Sim, podemos mover esse cursor para fora da área principal do Div e ainda funcionará E aqui, dentro do elemento Div principal, vou pegar outro elemento DV e atribuir uma imagem de ID Imagem de hashtag. Agora vamos estilizar esse elemento D, imagem. Vou copiar seu nome de ID e voltar ao arquivo CSS de estilo. E aqui vou selecionar o elemento usando seu nome de ID. Então, primeiro dentro das cores, vou atribuir altura, altura e vou usar a unidade VW 30 VW Então eu vou atribuir maconha, e aqui eu quero passar 70 VW Além disso, vou atribuir uma cor de fundo, cor de fundo, e quero atribuir. E aqui vou atribuir a cor de fundo vermelha. E eu quero substituir este E antes de abrir esta página no meu navegador, agora precisamos corrigir alguma coisa. Aqui você pode notar que não fechamos essa tag car, então vou mover essa tag de fechamento acima da tag Dip principal e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver que ficou assim. Agora, depois disso, precisamos alinhar esse elemento no meio desta página Para isso, vamos usar o flix. Esse é o método flix. Deixe-me te mostrar como. Dentro do elemento dip principal, vou usar o display Flix e vou digitar o centro de conteúdo Justify Alinhe o item, no centro. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador novamente e recarregá-lo, aqui você pode ver que ele reproduz esse elemento de imagem no meio desta página horizontal e verticalmente E agora precisamos de uma imagem. Eu já abro um site chamado unplas.com. A partir daqui, vou selecionar essa imagem. Você pode selecionar qualquer imagem, depende de você. Então, vou clicar nessa imagem. Eu gosto dessa imagem para este projeto, então vou copiar o endereço da imagem, copiar o endereço da imagem. E então vamos voltar ao com um código de estúdio. E aqui, vou definir a imagem de fundo, a imagem de fundo e vou passar a URL. Vou configurar esse arquivo. A configuração deste arquivo leva de volta ao navegador. E aqui, vou recarregar meu navegador. Aqui, também precisamos definir a posição do plano de fundo e o tamanho para isso. Vou digitar a posição de fundo, que é o centro. E o tamanho do plano de fundo, o tamanho do fundo é Cobur. Se eu definir esse arquivo e voltar ao meu navegador novamente e recarregar esta página, agora você poderá ver a imagem completa E agora eu quero selecionar esse elemento div de imagem em nossa página JavaScript. Então, vamos voltar para a página JavaScript e aqui precisamos criar um seletor para o elemento DV da imagem Eu dupliquei essa linha e, aqui, vou substituir Karza E então eu vou usar essa imagem de identificação. E vou substituir o cursor pela imagem. E eu vou definir essa multa. E agora eu quero aplicar add even listener a esse elemento, esse elemento de imagem Então, aqui, vou digitar image dot add even listener. Então, dentro da barra redonda diz, primeiro, precisamos selecionar o evento do mouse Aqui eu vou usar o evento Enter do mouse, eu estou digitando, mouse Enter. Basicamente, vale a pena abrir meu mouse, caso contrário, insira esse mouse por esse motivo neste desenvolvimento. E então, um tracoma, precisamos chamar uma função Então, dentro do clivrss, quero aumentar o tamanho do desenvolvimento de nossos carros Então, o que isso significa? Sempre que eu arrasto meu cursor, caso contrário, insiro meu cursor nessa região da imagem, quero aumentar o tamanho desse cursor personalizado, esse círculo Para isso, e aqui vou aplicar o GSA, e vou usar o GSApt dois MthDGSA dois. Então, dentro das rodadas, primeiro vou vender o cursor. Depois do coma dentro dos cálices, quero escalar nosso Então, aqui, eu vou usar a propriedade de escala. Escala e eu vou definir valor de escala dois, e vou definir esse arquivo. Então, depois de definir o arquivo, vamos voltar ao navegador e recarregá-lo Então, onde quer que eu coloque meu cursor nesta resina de imagem, como você pode ver, aumente o tamanho personalizado do cursor Mas se eu remover meu cursor dessa área, ele não vai diminuí-la. Além disso, precisamos resolver esse problema. Agora, vamos voltar ao editor de código. Por enquanto, vou aumentar o tamanho da escala. Vou fazer com que sejam quatro. Além disso, precisamos lidar com se removermos nosso cursor dessa área, a área da imagem. Para isso, vou duplicar essa linha e, desta vez, vou usar outro evento, que é o mouse leave E desta vez eu quero reduzir o tamanho da escala, quero torná-la uma, e vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e reescrever meu navegador, agora você pode ver que sempre que eu movo o mouse nesta área da imagem, ele aumenta o tamanho do cursor, esse cursor personalizado Mas se eu removê-lo dessa área da imagem, ele será reduzido. Mas você pode notar que temos um problema. Se eu parar de mover meu cursor dentro dessa área da imagem, agora você pode ver Steal diminuir o tamanho do cursor. Eu não quero isso. Precisamos lidar com esse problema. 16. Crie o buld de uma animação personalizada, parte 3: Então, vamos falar com o codificador do estúdio novamente. Para resolver o problema, aqui podemos usar a sobreposição Mas antes que precisemos entender por que esse problema ocorre, deixe-me mostrar o porquê. Então, vamos para o navegador e você pode ver que quando eu movo meus carros nessa área, ele fica grande quando eu paro de mover meu cursor, ele fica pequeno. Porque desta vez eu passo o mouse, meus carros estão acima dos carros ou do elemento circular, não acima do elemento da imagem É por isso que ele perde o evento do mouse e fica pequeno novamente. É por isso que ele diminui toda vez que paramos de mover o cursor Mas o que? Se eu mover meus carros fora desse pequeno círculo, agora você pode ver novamente que ele se tornou grande. Mas sempre que eu paro, novamente, fica mais porque agora nossos carros estão pairando sobre esses carros na área do círculo, não na área da imagem Para resolver o problema, precisamos usar uma sobreposição. Deixe-me te mostrar como. Aqui você pode notar que após parar o cursor, ele executa o evento de saída do mouse. Agora, a questão é por que é executado o evento Run Mouse Leave? Porque agora eu passo meu cursor sobre esse círculo, esse pequeno círculo , não a imagem É por isso que é chamado de evento de saída do mouse e reutilização do tamanho desse cursor Mas se eu remover meu cursor desse pequeno círculo, novamente, ele se torna grande. Mas depois de parar meu cursor, novamente, ele fica pequeno, pois dessa vez ele chamou o evento de saída do mouse. Para resolver o problema aqui, precisamos aplicar uma sobreposição Deixe-me te mostrar como. Basicamente, o problema é que esse elemento de imersão de Karza se interpôs entre o elemento da imagem e criou o Então, para resolver o problema, primeiro dentro desse elemento profundo da imagem, vou usar uma tag de imagem, IMG E como fonte, vou fornecer o mesmo caminho de arquivo, esse URL. Então eu copio esse URL deste lugar, caso contrário, recorto esse URL deste lugar e vou colocá-lo aqui. Com isso, também, precisamos remover essas propriedades dessa posição. Eu não preciso dele naquele lugar e aqui, precisamos criar um novo seletor Primeiro, vou selecionar o elemento de imagem e, dentro desse elemento de imagem, quero direcionar a tag de imagem, IMG Então, dentro dos versos de Cari aqui, vou definir a altura nuida Eu vou usar 100%. Além disso, vou usar com 100%. Agora, Harry não usa nenhuma imagem de fundo para esse elemento DV de imagem, mas em nosso HTML, usamos a tag de imagem Agora, aqui, dentro dessa tag de imagem, eu quero criar uma sobreposição Quero atribuir uma sobreposição de ID. Então eu vou configurar esse arquivo. Depois disso, você também precisa ajustar essa imagem, então vou usar outra propriedade ajuste, cobre alimentado por objetos. Vou configurar esse arquivo e voltar para o meu navegador. Agora, se eu recarregar meu navegador, fica assim. Opa, a imagem está quebrada. Porque aqui, como fonte, precisamos passar a URL absoluta. Então, vou remover esse comando de URL e, em seguida, definir esse arquivo. Agora vamos para o navegador E e recarregue-o. Agora está tudo bem. Você acha que isso resolveu o problema? Não. Ainda assim, isso não resolve o problema porque precisamos estilizar o elemento de sobreposição Então, aqui, vou selecionar a sobreposição, seu nome de ID e vou direcionar a sobreposição Então, por dentro, o encaracolado diz: vou usar a cor do fundo, a cor do fundo Vou usar a cor vermelha. E então aqui, eu vou atribuir altura, altura e largura, altura. Para altura, vou usar 100%, 100% da área da imagem. Então eu vou trabalhar conosco também 100%. Vou submeter esse arquivo. Agora eu configuro esse arquivo. Se eu deletar meu navegador, é assim que porque criamos essa sobreposição antes da imagem, não acima da Mas precisamos desse elemento de sobreposição em posição absoluta. Mas antes disso, precisamos fornecer em nosso elemento de imagem a posição relativa relativa e nossa posição de sobreposição Absoluta Eu vou definir essa multa. Agora, depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora fica assim Mas o que? Se eu reduzir a opacidade Se eu reduzir a opacidade desse elemento, o elemento de sobreposição Então, aqui, vou definir o plano de fundo com uma cor transparente. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, agora, se eu voltar para o meu navegador, aqui você pode ver agora que não consegue ver o elemento de sobreposição, mas se eu colocar o cursor sobre isso, o elemento imagem, dessa vez temos outro problema O problema é que nosso elemento cursor vai atrás do elemento div da imagem Precisamos aumentar o valor do índice Z desse elemento cursor. Novamente, voltando ao código do Visa Studio, vou aumentar o valor do índice Z do índice Z do cursor Z. Eu vou fazer com que seja o índice Z um. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e depois meu navegador e a quem quer que sejam meus cartões nesse elemento, aqui você pode ver o resultado Mas ainda assim ele retorna o problema porque eu entendo o problema. Vamos voltar ao bacalhau. Porque precisamos resolver esse problema, o problema do índice Z, se eu fizer nove e mover o elemento de sobreposição acima do elemento Karza Então, aqui, vou usar o valor do índice Z na minha sobreposição. Portanto, use o índice ZD dez. Então, aqui eu basicamente movo o elemento de sobreposição acima do elemento cursor e , em seguida, defino esse arquivo e volto para o navegador Agora recarregue meu navegador. Se eu abrir meu carro neste elemento, agora você não consegue ver o problema. Agora é uma palavra muito boa. Agora você pode ver que isso não reduz o tamanho da caixa. Resolvemos o problema com sucesso. Agora, se você quiser adicionar texto a esse elemento, esses carros são elementos, sim, você pode. Você pode colocar qualquer coisa. Você pode colocar texto, imagem ou qualquer outro objeto. Para isso, você pode usar o método Dom. Deixe-me te mostrar como. Novamente, vamos voltar ao código do stud e entrar no script Js five Sempre que eu insiro meu cursor, eu quero adicionar um texto neste elemento do cursor. Aqui, quero alterar o cursor interno do Mytype no HTML interno e vou configurá-lo no curso duplo, mais alguns Veja mais. E quando eu removo meu cursor da área da imagem, nesse caso, eu não quero dizer nada, espaço vazio. Eu quero subtrair esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora você pode ver quando eu movo meu cursor nesta área da imagem, você pode ver mais o texto, mas precisamos colocar o texto dentro do elemento profundo de Karza Para isso, vamos entrar no arquivo CSS de estilo. Aqui, estou no meu arquivo CSS de pontos de estilo e precisamos estilizar a seção do cursor. Agora, dentro do seletor de cursor, primeiro, vou definir o tamanho da fonte Vou definir o tamanho da fonte e vou torná-la de cinco pixels. E então precisamos alinhar essa fonte dentro desse pequeno círculo, esse círculo Para isso, vou usar display flex. E alinhe o alinhamento do item, centro do item. Além disso, precisamos centralizar o conteúdo. Vou amarrar o centro de conteúdo do Justify. Além disso, vou usar texto para alinhar texto, alinhar, centralizar Depois de configurar este arquivo, se eu voltar ao meu navegador, deixe-me mostrar e ler minha página e meus cartões estão neste elemento, agora você pode ver o texto perfeitamente. Está perfeitamente alinhado com o elemento do carro. Então é isso que estamos tentando construir neste projeto. Neste cursor personalizado, você pode colocar qualquer coisa aqui. Como você pode ver, se eu colocar o cursor sobre esse elemento, ele aumenta o tamanho, e se eu remover o cursor desse elemento, ele diminui o tamanho e também desaparece o texto Então, construímos nosso projeto com sucesso. Obrigado por assistir a este vídeo, fique ligado em nosso próximo projeto 17. Crie designs de linha do tempo animada, parte 1: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação DSP. Hoje, neste tutorial, vamos criar um lindo projeto. Vamos criar um projeto de cronograma de animação horizontal Como você pode ver no meu navegador, temos uma linha horizontal. E aqui você pode ver, criamos uma linha do tempo usando essas caixas Agora, quero animar essa caixa ao recarregar meu navegador. Então você pode notar que quando eu recarrego meu navegador, primeiro, você pode ver que ele se moveu na linha horizontal, depois, um por um, ele vai animar nossas caixas Caixas com efeito de arcos, efeito de rotação, efeito de escala Esse efeito e, finalmente, movemos essa caixa na direção oposta. Então, como podemos criar esse efeito de animação? Como você sabe, para criar esse efeito de animação, vamos usar a linha do tempo do GSP Além disso, vamos usar as propriedades SAP zing. Então, sem perder seu tempo, vamos começar a prática e ver como podemos criar essa bela animação Então, como você pode ver, somos os visores Stu Ceditor. E se você perceber que pode ver em nossa tag corporal, temos uma tag profunda principal. E dentro dessa tag Deep principal, como criamos várias caixas. Aqui, criamos um total de seis caixas, e cada caixa vem com um ID diferente. Com isso, aqui atribuímos uma caixa de nome de classe a cada elemento DP. E para definir a posição da caixa, também atribuímos a outras classes a parte superior da caixa para a posição superior e para a parte inferior da caixa para a posição inferior. Usamos essa classe para posicionar nosso elemento acima da linha horizontal. Além disso, temos outro nome de classe bogs bottom. E esses vidros são usados para colocar caixas abaixo da linha horizontal. Agora, vamos entrar no arquivo CSS. Se eu mostrar o arquivo CSS, primeiro atribuímos largura e altura fixas à nossa tag profunda principal e também definimos uma cor de fundo. Então, aqui criamos uma linha horizontal usando o seletor Posido após posito Primeiro, criamos um conteúdo combinado, depois o posicionamos como absoluto porque, em nosso elemento principal, os Heros usam a posição relativa É por isso que aqui usamos a posição absoluta. Então eu uso altura fixa e depois Com altura, seis pixels a Com 1920 pixels. Depois de criar a linha horizontal, aqui eu crio as caixas, essas caixas. Em seguida, eu crio esses círculos. Aqui, criamos dois círculos diferentes para as classes top e box bottom. Para criar os círculos, use também o posidoseletor superior Como você pode ver, esse círculo e o surgiram feitos com seletores de positoglass Por fim, uma a uma, eu posiciono esta caixa de acordo com a linha horizontal. Neste tutorial, não vou explicar como posso criar essa estrutura de TMS Não se preocupe, fornecerei o código-fonte dessa estrutura. Agora, vamos entrar no arquivo Js, arquivo JS apt. Mas antes, se eu mostrar meu arquivo TML de pontos de índice, aqui você pode ver que eu já vinculei à biblioteca SP usando CDN Anexe também o arquivo JS app dot a este documento. Então, vamos para o arquivo dot js do aplicativo. Então, primeiro, vou integrar a linha do tempo. Então, vou criar um custo variável e o nome da nossa variável é TL. Uma estrela TL para uma linha do tempo igual à função GSApgsAptLine. Então Semgron dois nesta linha. Depois de criar a linha do tempo, uma por uma, quero implementar todo o elemento Em primeiro lugar, quero implementar o elemento principal. Então, vou selecionar o nome da classe. E depois, de volta ao aplicativo, s cinco. Em primeiro lugar, vou usar a função Form. Tal dot A partir de então, dentro da redonda, primeiro, vou selecionar o elemento principal usando seu nome de classe dot Ming e quero mover esse elemento na direção XX. Dentro da cárie, heterótipo X, cólon, dentro dos códigos duplos Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador, você poderá ver o resultado Como você pode ver, movemos esse elemento principal do lado esquerdo para o direito. Acho que essa animação é muito rápida. Vamos usar um pouco de duração. Então, aqui, vou usar a propriedade de duração. Duração, e aqui vou usar a força total novamente, duração. Eu acho que isso é suficiente. Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador, você poderá ver o efeito Como você pode ver, toda a seção se move para o lado direito em 4 segundos. Mas se eu recarregar este navegador novamente, como você pode ver, a cor de fundo do corpo ainda é branca Agora, precisamos combinar a cor de fundo desse corpo com essa cor. Para isso, vou entrar no arquivo CSS de estilo. E aqui, vou usar a mesma cor de fundo na minha etiqueta corporal. Então, primeiro, vou selecionar a tag body. Body is at the cool is, eu vou usar essa propriedade de fundo e vou configurar esse arquivo Agora, se eu voltar ao meu navegador e recarregá-lo, agora a cor de fundo do nosso corpo e a cor de fundo do elemento principal são semelhantes para tornar essa animação mais atraente, vamos torná-la 100% -100%, não pixel Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador, você poderá ver a animação, como ela é repetida Isso é apenas uma animação da seção principal. Mas, como eu disse em nossos tutoriais anteriores, usar o servidor ativo não é a melhor opção para animação CSS porque toda vez que eu salvo meu arquivo, ele recarrega Então, vou pausar essa gravação por 2 segundos. E desta vez, abro este documento do meu diretório, não do servidor ativo. Então, a princípio, em nossa linha do tempo, movemos esse elemento principal da direção de -100% de excesso Aqui usamos a linha do tempo porque, uma por uma, quero me separar da minha animação Em seguida, vou selecionar nosso elemento da caixa um, este. Então, copio o nome do ID e volto para o arquivo dot js do aplicativo. E aqui eu vou empatar. Basicamente, vou duplicar esta seção e substituir o ponto Min pela nossa primeira caixa usando seu nome de ID, hasta box one Além disso, quero mover esse elemento da dedução XX, e aqui quero dizer duração de apenas 1 segundo E eu modifico com esse arquivo. Agora, vamos voltar ao navegador. Se eu recarregar esse navegador, primeiro ele executará a animação principal, depois executará a segunda animação Mas o problema é executar a animação para o primeiro elemento, esses círculos vão atrás da linha horizontal. Então, para resolver o problema, vamos voltar ao arquivo CSS de pontos de estilo. 18. Crie designs de linha do tempo animada, parte 2: Então, esse é o nosso arquivo CSS de estilo. Essa é a linha horizontal. Então, primeiro, em nossa linha horizontal, vou definir o índice z, o índice Z e vou definir o índice Z um. Em seguida, vou definir o índice Z em nossa caixa. Então, vou digitar o índice Z, e aqui vou passar 999 E eu vou configurar esse arquivo. Aqui eu uso o big value porque toda vez que preciso minhas caixas acima da linha horizontal. É por isso que aqui eu digo linha horizontal zero índice um e caixa zero índice 999 Se eu definir esse arquivo e voltar ao meu navegador e recarregar este navegador, desta vez você poderá ver até a animação principal Ele moveu a caixa. E como você percebe, desta vez nosso círculo está acima da linha horizontal. Com isso, quero tornar essa animação de caixa mais atraente. Então, aqui vou dizer que é opacidade. Então, vamos voltar ao arquivo Adder Jas, e desta vez vou usar outra propriedade chamada opacidade, OPA CITY, opacidade , zero Então, quando a caixa começa a se mover na direção de xx , definimos o zero oposto. Se eu voltar ao navegador e carregar meu navegador, agora você poderá ver a reviravolta na animação principal Se você observar com cuidado, funcionou corretamente, mas se eu aumentar a duração, reservo três segundos para a animação da caixa e, novamente, volto ao navegador e recarrego o navegador Primeiro, ele executa a animação média, agora você pode notar a opacidade Aqui você pode observar a opacidade desse elemento, como ele mudou E agora eu quero levar essa animação para o próximo nível. Para isso, precisamos usar algum efeito de atenuação. Então, vamos entrar na documentação deste site e pesquisar por easing, EASI Z. Você pode pesquisá-lo nesta seção de verso lateral do filtro O teste fornece vários exemplos de animação de atenuação, como Power one, power two, power three, power four, back, bounds, elastr, etc Cada opção é diferente uma da outra. Suponha que se eu selecionar a potência dois, é assim que nossa animação será executada. Se eu usar back, é assim que nossa animação será executada. Essa é a captura dessa animação. Da mesma forma, se você quiser usar o efeito Illustr, é assim que o efeito illustr funciona Suponha que eu queira usar esse efeito, Illustry. Então, eu quero copiar essa propriedade e valor e depois voltar para o código do estúdio. E aqui, pressionei a duração, 2,2 0,5 segundos. Então eu vou usar vírgula. Em seguida, vou usar essa propriedade e valorizar Illustry E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregá-lo, animação principal na plataforma superior Você pode ver o efeito Illustr para o primeiro elemento. Por enquanto, eu gostaria de interromper a animação profunda principal porque toda vez que ela executa a animação , leva mais tempo. Então, primeiro, vou comentar esta seção. Não se preocupe Vou descomentar esta seção mais tarde. Em seguida, vou configurar esse arquivo e recarregar meu navegador. Agora você pode observar apenas essa animação. E se você quiser alterar o efeito, suponha que você queira usar B. Nesse caso, só aqui, você precisa digitar is back. Até o arquivo satis, se eu recarregar meu navegador, você poderá ver o efeito de retorno Agora, da mesma forma, quero trazer esse elemento da direção oposta. Eu quero trazer esse elemento do lado direito. Desta vez, quero trazer nosso último elemento do lado direito. Então, vou duplicar esta seção e, desta vez, vou selecionar a caixa número C porque essa é a última caixa Colocamos essa caixa usando seu nome de ID e, em seguida, vou mudar a posição Xs 100% em relação aos Xs Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador Como você percebe, a primeira caixa vem desse lugar e a segunda caixa vem dessa direção. Coloque a animação fazendo a mesma coisa, mas só para mudar a direção. Em seguida, vou usar bouncyft para esse elemento, 2012. Se eu selecionar essa opção, você pode ver como essa animação funciona. Então, vamos voltar ao código do Visor Studio. Entre a caixa um e a caixa seis, quero colocar a animação da caixa dois. Eu quero torná-lo serial, então duplique esta seção e selecione a caixa dois, e vou alterar o valor e de volta para vinculado E também precisamos mudar a posição, é para YxS menos a posição YXS E eu vou configurar esse arquivo. Depois de definir esse arquivo, vamos anotar o navegador. Depois de redirecionar o navegador, executar a animação da primeira caixa, ele executará a animação da segunda Opa, acho que cometi algum erro porque precisamos trazer essa caixa de baixo, não de cima Então, vamos acessar o código do reser studio remover o -100% e definir esse arquivo Depois de configurar esse arquivo, novamente, vou recarregar meu navegador Depois de executar a primeira animação, você pode observar a segunda animação, como ela funciona e fornece um efeito de arcos Em seguida, ele executa a terceira animação. Então eu vou animar a terceira caixa. Então, vamos ao código visual st, e eu vou duplicar esta seção E desta vez vou selecionar a caixa número três e vou mudar a direção -100% Com isso, agora com limites, quero algum efeito rotativo Então, vou usar uma propriedade chamada rotacionar. Gire dois pontos e eu quero girá-lo em 360 graus, um E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, primeiro ele executará nosso primeiro elemento depois executará o segundo elemento E se você notar, como você pode ver, ele curva o elemento. Também gira o elemento. Em seguida, vou mirar na quarta caixa. Então, novamente, estou de volta ao código do estúdio do usuário e à duplicação número três Primeiro, vou mudar a direção 100% porque quero movê-la de baixo para baixo. Então eu vou usar o mesmo efeito de ressalto. Mas desta vez eu não vou usar o efeito de rotação. Desta vez, vou usar a roda de escala. Escala, dois pontos, e eu quero fazer a escala 0-1. Então aqui eu passo zero. Mas antes de configurar esse arquivo, precisamos alterar o ID, caixa número quatro. E eu vou configurar esse arquivo. Agora, vamos recarregar o navegador. Depois de recarregar o navegador, se você notar a quarta caixa, poderá entender a animação Com efeito de ressalto, ele escala o elemento. E agora eu quero animar o quinto elemento. Para isso, desta vez vou usar outro efeito. Desta vez, vou usar o efeito lento. Então, vamos voltar ao com um código de estúdio. E primeiro, vou duplicar esta seção. Em seguida, vou alterar o ID, caixa quatro para cinco e alterar o salto para lento Primeiro, vou mudar a direção -100% e vou remover a escala um Desta vez, não vou aplicar o efeito de escala. E eu vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador e recarregá-lo Depois de recarregar o navegador, como você pode ver, uma por uma, ele executará todas as animações saltitante, animação rotativa, animação em escala, animação de efeito lento E retroceda a animação na direção oposta. E agora vou ativar minha animação D principal. Então, vamos voltar ao código do estúdio de vídeo, descobrir esta seção e configurar esse arquivo Agora, vamos voltar ao navegador e recarregar meu navegador. Agora você pode ver, primeiro, ver uma linha horizontal vindo dessa direção, depois, uma por uma, ela executa toda a animação. Então, finalmente, criamos essa animação de efeito de linha do tempo usando o GSAP Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 19. Crie animações de texto impressionantes com o GSAP parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto de animação GSP relacionado Hoje, neste tutorial, vamos aprender esse lindo projeto. Então, como você pode ver Weber, eu recarrego meu navegador, você pode notar a animação Então é isso que vamos construir neste projeto. , para este projeto, devemos ter No entanto, para este projeto, devemos ter pouco conhecimento sobre JavaScript. Então, sem perder seu tempo, vamos começar pela prática. Precisamos selecionar todos os caracteres um por um, dessa palavra. Em seguida, precisamos animá-lo separadamente, mas vamos fazer isso usando a animação SAP Vamos usar strager. Além disso, vamos colocar cada caractere dessa palavra em um Span de forma dinâmica Então, vamos começar a prática e ver como podemos criar esse projeto de animação. Finalmente, estamos no meu coditor do Visual Studio e, como você pode ver no meu diretório de trabalho atual, já criamos três arquivos, o arquivo indice dot tv, o arquivo scrip dot js e o arquivo CSS do styler E como você pode ver no ponto de índice ETvlfle, já vinculamos ao arquivo CSS Stylo Além disso, vinculamos ao arquivo script dot js. Que já usamos a tinta Cdian ou a animação GPS. E em nosso arquivo CSS de estilo, já digitamos o tablet iniciado para o CSS Ele definiu a margem zero, o preenchimento zero, o tamanho da caixa, a borda e também fornecemos altura e largura para a etiqueta de estimativa e a etiqueta corporal Depois disso, vou abrir esta página. Vou abrir esse arquivo no meu navegador. E eu vou abri-lo sem usar o servidor Live. Então, como você pode ver no meu navegador, nossa página está completamente vazia. Então, primeiro, vou digitar o texto usando o título de uma tag. Deixe-me te mostrar como. Então, aqui, eu vou digitar H um. Então, dentro da tag H one, vou passar Hello World. Eu vou configurar este. Depois de passar uma tag para o título, precisamos estilizar a página da web. Vamos entrar no estilo ou no arquivo CSS. Em primeiro lugar, vou selecionar a tag do corpo. Corpo da etiqueta. Então, dentro da tag corporal, dentro dos cursos, vou fornecer a cor de fundo. Cor de fundo, e eu quero uma cor um pouco mais escura. Vou usar o Hastag 111. Em seguida, vou usar esse flix porque precisamos mover esse título para uma tag no meio desta página vertical e horizontalmente Vou usar esse tipo de display flex de propriedade. E alinhe o item, alinhe os itens ao centro. Depois disso, justifique o conteúdo, também centralize. Então eu vou configurar esse arquivo. Ao configurar este arquivo, retornará ao navegador. Agora, se eu recarregar meu navegador, como você pode ver, ficará assim Nosso texto está pouco visível. Então, precisamos mudar a cor do texto. Vou mudá-lo para a cor branca. Então, aqui, eu vou digitar. Primeiro, vou selecionar a tag H one, H one. Depois disso, dentro da cor diz, eu vou atribuir a cor. Cor e nossa cor é branca. Cor branca. Em seguida, vou aplicar o tamanho da fonte. Tamanho da fonte. E para este exemplo, vou usar o tamanho de fonte 150 fix el e vou definir esse arquivo novamente. Agora vamos voltar ao navegador novamente. Se eu recarregar meu navegador , ficará assim. Agora, vamos entrar no arquivo JavaScript e selecionar esse elemento. Eu quero dizer o elemento H um. Para isso, precisamos usar o método Dom. Então, aqui, vou entrar no arquivo de script DJs e digitar o seletor de consulta de pontos do documento Seletor de consultas. Depois disso, dentro dos endereços redondos, dentro do campo duplo, vou usar o nome da tag, que é H one. Então, a partir deste documento, eu quero extrair o conteúdo do texto. Eu quero dizer, eu quero extrair este texto, olá mundo. E como você pode ver, aqui eu uso a palavra olá juntos. Eu não forneço nenhum espaço entre eles. Então, por exemplo, você pode digitar qualquer coisa, virá o que quiser digitar. Então, nesse lugar, eu quero extrair o conteúdo do texto, o conteúdo do texto. Em seguida, vou armazená-lo em uma variável. Para isso, vou declarar uma variável lá e nossa variável é g one, onde H um é igual ao seletor de consulta de pontos do documento dot Tex Content, e vou definir esse arquivo Agora, se eu tentar imprimir isso no meu console, deixe-me mostrar algum tipo de registro de pontos do console. Registro de pontos do console dentro do endereço redondo, quero imprimir a variável H one Então eu vou configurar o arquivo. Depois de configurar o arquivo, se eu acessar meu navegador, deixe-me mostrar e recarregar esta página Então, se eu te mostrar meu console, agora você pode ver no meu console que ele imprime a palavra olá. Então, seleciono com sucesso o sabor e o guardo em uma variável. Agora, precisamos dividir esse texto. Precisamos dividir o texto por caracteres. Para isso, precisamos usar um método chamado texto dividido. Então, vamos entrar no código do estúdio novamente. E aqui, vou vincular o primeiro comentário desta linha, caso contrário, você pode remover essa linha. Não precisamos dessa linha. Em seguida, vou marcar isso e nossa variável miss and split text Velocidade de texto. Divida o texto igual à velocidade de um ponto. Em seguida, entre aspas duplas , quero dividir o teste por caracteres. Nem o espaço, nem nenhum outro personagem. Eu quero dividir o texto por todos os caracteres. Então, vou usar uma citação vazia, essa. Então, se eu definir esse arquivo e tentar fixar essa variável no meu console, deixe-me mostrar algumas para digitar, Console, log de pontos. Dentro da Bress redonda, passarei o texto de velocidade variável Então eu vou configurar esse arquivo. Depois de configurar este arquivo, se eu recarregar meu navegador e ligar, inspecionar e mostrar meu console novamente, agora você pode ver aqui Basicamente, divida a palavra por seus caracteres. Aqui você pode ver todo o personagem de forma diferente. Além disso, você pode ver seu número de índice, zero H na posição zero, temos H em uma posição de índice, temos E. É assim que dividimos todos os caracteres. 20. Crie animações de texto impressionantes com o GSAP parte 2: E agora precisamos executar um loop especial. Precisamos executar um loop especial para esse texto dividido. Vamos correr para cada loop. Então, deixe-me mostrar como podemos usar para cada loop. Precisamos executar isso para cada loop na variável, texto dividido. Vou digitar, dividir, enviar mensagens de texto, tatuar para cada um. Então, dentro do recesso redondo, vou passar a função Função, e por enquanto, vou passar uma função vazia, depois dentro das maldições. Mas antes, vou declarar uma variável vazia vazia. Deixe-me mostrar aí, desordem, barulho CLUTER igual a um Vd vazio, completamente vazio Eu vou te dizer mais tarde por que eu defino essa variável. Não se preocupe com isso. Agora, vamos falar sobre cada loop. Ele vai rodar quantos valores eu tenho nessa variável? De acordo com o número do valor na variável de pretexto, ela executará o loop Suponha que, como você pode ver , nesta palavra, olá mundo, temos que dizer dez caracteres, então ele executará esse loop para contar dez vezes. Então, se tivermos que dizer cinco palavras, ele executará o loop por cinco vezes. Então, para cada elemento, ele executará esse loop. É por isso que é chamado para cada loop. Suponha que se eu digitar console dot log, console dot log, dot, log dentro da roundra se eu passar hello e, em seguida, defina esse arquivo e volte para o navegador Se eu recarregar meu navegador depois recarregar meu navegador, se eu abrir meu console, agora você pode ver que ele retornará em hello no meu Aqui você pode ver, temos que dizer olá no meu console, eu imprimi TNT porque temos que falar um caractere TN em nossa palavra Então, vamos ao editor de código, mas não quero imprimir hello. Aqui eu quero juntar novamente o texto dividido. E agora eu quero armazenar cada caractere dessa variável de texto nessa variável, essa confusão vazia de variáveis Então, vou digitar desordem, igual à desordem, além disso, aqui você pode usar o método de string padrão Então, vou digitar Batis e depois dentro dos backticks. Mas antes, vamos tentar entender o que eu quero fazer. Por enquanto, não vou digitar cravos, e aqui vou digitar qualquer caractere, qualquer palavra Suponha que olá. Eu vou colocar esse lado. Basicamente, ele armazenará dez vezes hello nessa variável platter Aqui vou imprimir o registro de pontos do console. console tem pontos dentro dos vestidos redondos. Vou passar pela bagunça variada E eu vou configurar esse arquivo. Depois de configurar esse solo, acesse meu navegador novamente e leia meu navegador, agora você pode ver no meu console que ele imprime hello time. Toda vez, ele adicionará a palavra olá na variável de desordem, uma por uma Da mesma forma, quero armazenar todos os caracteres dessa variável de velocidade de texto. Basicamente, quero imprimir essa mesma palavra, olá palavra. Para isso, precisamos usar dactis. Deixe-me te mostrar como. Então, aqui, eu vou digitar. Vou usar o atalho, latter, plus equal, plus equal, increate toda vez que ele for incrementado com um valor. Então, dentro do espaço duplo dentro do Bates, dentro do Batixs, eu quero armazenar a mesma Mas antes, precisamos definir uma variável em nossa função. Aqui eu vou definir M. Esse valor M armazenou o caractere atual. Então, Hearty, tablet, método de cordas, cifrão e classe Então, dentro das Calses, vou passar o nome da variável M e vou salvá-la novamente. Depois de configurar este arquivo, se eu recarregar meu navegador e mostrar meu console, agora você poderá ver novamente na versão impressa Hello World Agora você pode ter uma pergunta, por que eu faço a mesma coisa? Estou cheio? Não, eu não sou. Por que escrevi a mesma palavra “ olá” usando muita coca? Porque agora temos controle sobre cada caractere usando JavaScript. Agora podemos colocar cada caractere em uma tag span. Deixe-me mostrar o que vamos fazer. Então, como você pode ver, se eu quiser animar todos os personagens um após o outro, caso contrário, precisamos colocar todos os caracteres em uma tag de extensão para selecioná-la de forma diferente. Mas o que? Se tivermos várias palavras , como olá, são dez caracteres no total. Para isso, você precisa iterá-lo e separar os caracteres das palavras E agora vou colocar toda a palavra na tag Span usando a ajuda de Dom. Então, aqui, vou digitar span tag. Deixe-me mostrar como span, Dan, a tag de fechamento, span, e eu vou definir esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e depois excluir meu navegador, e se eu mostrar meu console, agora você pode ver que ele coloca todos os caracteres na tag span e também pode ver a seção de elementos. Deixe-me te mostrar. Não, isso não vai aparecer agora porque não aplicamos esse resultado em nosso elemento. Deixe-me te mostrar. Precisamos aplicá-lo primeiro em nosso elemento. Então, vamos voltar ao coordenador e, em seguida, vou alterar a estimativa interna. Então digite H com um ponto HTML interno, igual a, e aqui, vou colocar esse ruído variável E então eu vou configurar esse arquivo. Basicamente, fazemos tudo isso para colocar cada personagem em uma tag de span, nada mais. Mas antes de configurar esse arquivo, vamos detalhar isso. Não vou usar uma linha , então vou duplicar essa linha Caso contrário, sim, vou duplicar essa linha. Primeiro, vou mudar o nome da variável. Aqui, eu apenas seleciono o elemento. Não vou extrair o texto e não vou salvá-lo DAT nessa variável E nossa próxima variável é H um texto. H one pega Eguir dois e Hemo tipo H de conteúdo de texto de um ponto Essa. Então, basicamente, primeiro selecionamos esse elemento e depois extraímos texto desse elemento. Depois disso, precisamos cuspir essa palavra. Por cada personagem. Desta vez, vou substituir o texto H one pelo H one e vou configurar esse arquivo. Agora eu quero definir esse arquivo, vamos voltar ao navegador. Como você pode ver, estamos no meu navegador e vou recarregá-lo Depois de recarregar meu navegador, se eu mostrar meu console, caso contrário, seção de elementos, agora você pode ver na minha tag body, temos H uma tag Então, se eu abrir essa tag H one, agora você pode vê-la colocada. Aqui, ele colocou a tag Spen para cada personagem H E L O WORLND , então agora temos o controle sobre cada elemento por causa da tag span Agora podemos controlar cada personagem. É por isso que precisamos colocar todo o caractere dentro da tag span. Essa é a senha deste tutorial. Na próxima palavra deste tutorial, aplicaremos a animação iGSP de cada personagem Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo capítulo 21. Crie animações de texto impressionantes com o GSAP parte 3: Olá, pessoal, é bom ver vocês de volta. Essa é a segunda parte desse projeto. Nessa seção, aprenderemos como podemos animá-lo usando o GSA Vamos ver o código do vis Studio. Estamos no editor de código do meu visor Studio. No começo, vou pular para o script dot has file. Agora, a princípio, com a tag Span, quero atribuir um nome de classe a essa tag span. Para isso, primeiro, vou digitar dentro da classe de tag Span. Classe igual a dentro do código duplo. Dentro do código duplo, vou usar o método tentado de string, cifrão e surge Então, em nossa função, eu quero acessar o índice. Primeiro, ele retornará o elemento, quero dizer, o personagem, um por um. Depois, com o personagem, também retornará seu número de índice. Vou digitar index IND. Aqui eu vou passar o índice, a variável IND IND. Vou configurar esse arquivo. Agora, depois de definir este arquivo, se eu redirecionar meu navegador, deixe-me mostrar alguns para redirecionar meu navegador e mostrar minha inspeção meu navegador e mostrar minha Console, caso contrário, etiqueta corporal. Agora você pode ver dentro da minha tag span, temos uma classe. Essa é a classe número zero porque nosso índice começa com zero e temos um total de dez tags de extensão diferentes. Para todas as tags de extensão diferentes, ele atribuiu um número de classe diferente. Ele atribuiu um nome de classe diferente. Não vou usar aulas neste projeto, mas vou apenas apresentá-lo. Como podemos atribuir uma classe para uma tag de extensão diferente? Agora, vamos voltar ao código do estúdio. Depois disso, primeiro vou remover essa linha, não preciso dessa linha, depois vou executar a animação do GSAP Então digite G, GsApt dot from. Vou usar o método from. De e dentro dos vestidos redondos, a princípio, vou escolher a etiqueta H one. Então, vou passar por dentro dos códigos duplos H um. Depois do espaço, quero direcionar a tag span, que está dentro da tag H one, então digite span. E depois da vírgula, dentro dos aliases, devo digitar a partir dos YxS que quero mover 100 pixels Então, ele executará a animação do YXS de cem pixels até ou está no lugar Então, se eu definir esse arquivo e voltar ao meu navegador, se eu recarregá-lo, ele não executará a animação Deixe-me te mostrar. Então, se eu voltar ao meu navegador e recarregar esta página, como você pode ver, não executamos a animação porque agora vou esclarecer uma confusão Como você pode ver, este Pentágono que é criado por JavaScript em nossa página de tempo. É um elemento embutido. Não é o elemento permanente. Portanto, precisamos torná-lo um bloco embutido. Precisamos fazer isso em um bloco de linha em nosso arquivo CSS. Então, esse elemento de extensão dentro de uma tag H, precisamos torná-lo um bloco embutido Então, dentro do arquivo CSS infantil, aqui, eu vou selecionar H uma tag H um. Acima disso, até atingir o H, também precisamos direcionar essa tag de extensão, span. Então, dentro da Classe vou usar a propriedade chamada display Exibir e aqui vou digitar bloco embutido. Vou configurar esse arquivo. Agora, depois de fazer com que seja um bloco embutido, vou configurar esse arquivo e voltar ao navegador Se eu for meu navegador, agora você pode vê-lo rodando a animação. Agora, adicione outras propriedades a essa animação. Para isso, aqui, vou adicionar um pouco de opacidade. Opacidade, opacidade e vou atribuir opacidade a partir Começará do zero e depois voltará para o de opacidade. Depois disso, também vou adicionar a duração. Duração por duração, vou adicionar 1 segundo. Além disso, vou adicionar lay e quero um atraso de 0,5 segundo para cada animação. Então eu quero executá-los, toda a animação dos personagens, uma após a outra. Então, para isso, usamos o valor escalonado. Nós já preenchemos lá com escalonamento, essa propriedade. Escalone, e eu vou atribuir o escalonamento de 0,150 a 0,15 segundo Basicamente, ele executará todo o elemento span, um após o outro. Então, depois de definir esse arquivo, depois de definir esse arquivo, se eu voltar ao meu navegador e ler meu navegador, agora você pode ver que ele executará um belo efeito de animação. Ele executará toda a animação do personagem uma após a outra. Deixe-me te mostrar. Então, depois de relacionar meu navegador, agora você pode vê-lo rodando essa animação. Isso exige animação, o belo produz efeitos animados. Agora, vamos deixar essa animação mais legal. Para isso, vou ter essa área de transbordamento. Deixe-me te mostrar como. Então, se eu voltar ao meu arquivo CSS stylo e atribuir uma cor de fundo a essa tag H one , cor de fundo vermelha, vou definir esse arquivo Depois de definir esse arquivo, se eu voltar ao meu navegador e ao meu navegador, é assim que ele se parece, mas quero me esconder quando envio mensagens de texto fora dessa área. Para isso, aqui, vou usar uma propriedade chamada overflow Transbordamento oculto. Além disso, não precisamos mais dessa cor do diagrama. Por exemplo, depois de configurar esse arquivo, se eu souber que sempre que eu recarrego esta página, ela não mostrará os caracteres fora da área vermelha. Deixe-me te mostrar. Recarregue esta página, você pode ver o resultado. Você pode ver os personagens fora da área vermelha. Agora, se eu ocultar essa área vermelha, deixe-me mostrar que, se eu ocultar essa cor de fundo e depois voltar ao navegador e recarregar o navegador, é assim que nossa animação de texto se parece Então, é isso para esta parte deste tutorial, e na próxima parte deste tutorial, vamos tornar essa animação mais bonita e mais complicada. Para isso, precisamos fazer alguns cálculos complicados em JavaScript. Então, obrigado por assistir a este vídeo Stdune para nossa próxima parte deste tutorial 22. Animação de texto para rolagem Parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação GAP relacionada ao projeto. Hoje, vamos realizar uma animação de texto rolante usando o GSAP Então, como você pode ver, esse é o texto. Quando eu rolo minha página para baixo, como você pode ver, ela inicia a animação. Mas quando eu rolo para cima nesta página, como você pode ver, a animação começa na direção oposta. Então é isso que vamos criar neste tutorial. Vamos mudar de direção na qual rolamos nossa página. Se nos movermos para baixo , ela executará essa animação nessa direção, e se nos movermos para cima , ela mudará a E também, você pode notar que mudou a direção da seta. Então, sem perder tempo, vamos começar a prática e ver como podemos criar essa linda animação de texto rolante Então, como você pode ver, estamos no meu editor de código do Studio de usuário, e este é meu diretório de trabalho atual. E, como você pode ver, já criamos o arquivo de estimativa de pontos de índice, o arquivo estilo dotsssfle e o arquivo js de pontos de tela E eu já abro esse documento ESTiml no meu navegador. Em seguida, página Timel. E também, você pode notar, eu já anexei o Cdanlink da animação do SAP Em seguida, anexe também com o arquivo screen dot js. Agora, primeiro, dentro da minha etiqueta corporal, aqui vou criar um total de três elementos profundos. Então, t deep tem uma etiqueta e seu DNA está na primeira página. E da mesma forma, vou criar dois outros elementos profundos. Eu escrevo esta linha, e esta é a página número dois, e esta é a página número três. Então, todos eles são enviados com D por página. Depois de criar as três páginas, vou entrar no estilo ou no arquivo CSS. Nessa seção. Como você pode ver aqui, eu já forneço preenchimento de margens e também estilizo a mesa e nosso tanque corporal Basicamente, é o modelo padrão do CSS. Agora, primeiro, vou selecionar a página um. Depois do coma, vou cortar sua etiqueta, página dois. Então eu tenho a etiqueta, página três. Então, primeiro dentro do librass, vou atribuir altura, altura, 100 H. E depois vou atribuir largura, largura cem por pessoa Então, depois de configurar esse arquivo, se eu voltar ao meu navegador, aqui você pode ver a barra de rolagem. Eu não forneço nenhuma cor de fundo para esta página, e se você quiser atribuir cor de fundo diferente para esta página, sim, você pode, mas eu não vou fazer isso. Depois disso, agora vamos entrar no arquivo tmL de pontos de índice. Em seguida, dentro da página para seção neste elemento Dev. Aqui vou pegar outro elemento Dev. Primeiro, vou digitar Dev has tag, e seu nome é move porque essa é a área móvel Aqui vamos mover todo o texto. Com ciclomotor, aqui vou criar outro Delement DV e seu nome de classe é Então, dentro desse elemento Dv, aqui, eu vou pegar um H one tag H one Então, dentro desse elemento H one tag, vou digitar, olá, bem-vindo ao GR. Bem-vindo ao GSR. Então eu vou configurar esse arquivo. Depois de definido, esse arquivo retorna ao gauser. Então, como você pode ver, se eu rolar um pouco para baixo, aqui você pode ver o texto. Olá, bem-vindo ao GSA. Além disso, precisamos adicionar um erosim nessa posição. Depois do texto, nessa posição, depois do texto. Para isso, eu já baixei um ícone. Ponto de seta VG. Se eu abrir essa imagem, aqui você pode ver o resultado. Esta é a imagem que vamos usar para a seta. Você pode encontrar esse tipo de imagem de seta facilmente em sites. Você só precisa procurar a seta para a direita, caso contrário, a seta para a esquerda. Em seguida, vou usar essa imagem VG nessa posição após a tag H one Então, digite a tag da imagem. Vou usar a tag de imagem IMG image. E como fonte, vou passar o SVG com pontos de seta. Então eu vou configurar esse arquivo novamente. Depois de definir esse arquivo, vamos voltar ao navegador. Se eu recarregar meu navegador, é assim que ele fica. Agora precisamos alinhar essa seta após o texto. Mas primeiro, precisamos reduzir o tamanho da flecha. Então, vamos voltar ao código do estúdio e entrar no arquivo CSS stylo Então, primeiro, vou estilizar o elemento move div. Para isso, vou selecionar o movimento da hashtag. Mova-se para dentro do Caliss, vou usar a propriedade de cor de fundo, cor Bground, e vou atribuir a cor de fundo amarela Agora vou configurar esse arquivo, mas antes de configurá-lo, acho que cometi alguns erros, não é movimento, é ED de ciclomotor Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, volto ao meu navegador e agora fica assim. Depois de adicionar a cor de fundo amarela à área de humor. Agora precisamos colocar essa seta voltada para cima, esse texto. Mas antes, precisamos reduzir o tamanho dessa flecha. Para esse cabelo, precisamos selecionar a etiqueta da imagem. Selecionamos essa tag de imagem que está dentro dessa classe MR. Então copie o nome da classe e, em seguida, selecionarei a MRF MR. Quero selecionar a imagem IMG Então, dentro das cláusulas, eu quero atribuir a altura Vou atribuir altura, altura e vou passar o valor 70 pixels e vou definir esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e reescrevê-lo, agora está bom. Parece bom. Agora, depois de reduzir o tamanho dessa seta, quero selecionar a tag H one que está dentro da classe MR. Então, para digitar o ponto Mark H one. Em seguida, dentro do calibre diz que, a princípio, eu quero selecionar a propriedade do tamanho do telefone Em seguida, use o tamanho da fonte de 70 pixels, 70 pixels. Desculpe, Pixel. Então, eu vou classificar esse elemento, esse elemento de marca Então, aqui, vou digitar uma marca de ponto. Então, no interior, o Calibre diz: Eu vou usar a propriedade Aqui eu vou usar a exibição da propriedade, exibição do flick. E então eu vou usar outra propriedade Aline Align items center, e vou definir esse arquivo Se eu definir esse arquivo e voltar ao meu navegador, você poderá ver o resultado. Agora, alinhamos com sucesso essa erosina ao lado deste texto Em seguida, vou atribuir uma pequena lacuna entre esses dois itens, texto e a erosina Para isso, vou usar a propriedade gap, gap, Gap, equal two, e quero atribuir dois VW few food weed gap Em seguida, também vou atribuir um pequeno preenchimento. Preenchimento para preenchimento de cima para baixo, vou usar zero e para a direita e esquerda, vou usar 1,5 VW, vou definir esses cinco Se eu voltar ao meu navegador, é assim que fica. E se você quiser aumentar o preenchimento, sim, você pode, depende de você E agora vou duplicar essa seção de marcas várias vezes. Deixe-me te mostrar. Então, aqui, dentro desse arquivo de estimativa de pontos de índice, vou selecionar esse elemento de marca, esse, esse elemento. Então eu vou duplicar essa linha várias vezes. Aqui, vou duplicar essa linha no total cinco vezes e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, ficou assim Agora, precisamos alinhar as tomadas ao lado dela. Para isso, novamente, precisamos usar a propriedade flex display flex em nosso elemento mood div Então, em nosso elemento modi, o elemento div pai, vou usar essa propriedade, display E eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece, mas há outro problema. Precisamos resolver esse problema. Precisamos reduzir o texto. Também precisamos esconder a área de transbordamento. Para isso, voltando ao meu código vis studio e em nossa seção de marcas, vou usar outra propriedade chamada flex shrink flex shrink e vou Então eu vou configurar esse arquivo. Se eu definir esse arquivo e voltar ao meu navegador, é assim que ele ficará. Agora precisamos levantar a barra de rolagem horizontal. Para isso, precisamos usar a propriedade oculta overflow. Em nosso elemento M div, vou digitar overflow heated E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, ficou assim. Agora está perfeito. Então essa é a primeira parte deste tutorial. Então, aqui, nós apenas alinhamos o texto e criamos a estrutura. Na próxima parte deste tutorial, iniciaremos o JavaScript. Então, obrigado por assistir a este vídeo, Staytune para nosso próximo tutorial 23. Animação de texto para rolagem Parte 2: É bom ver vocês de volta, pessoal. Este é o segundo vídeo relacionado a este projeto. E neste vídeo, vamos iniciar o JavaScript. Então, vamos entrar no editor de código do Rsa Studio. Então, aqui, vou pular para o arquivo TAS do script dot. Agora, dentro do Javascript, precisamos extrair um valor. Precisamos extrair o valor, que nos dirá que rolamos a página para baixo. Caso contrário, role a página para cima. Quero extrair a dicção de rolagem da página da web. Quero dizer que, sempre que rolo meu navegador para baixo , quero extrair o valor da rolagem Da mesma forma, quando eu rolo minha página para cima, também quero extrair o valor Para isso, vamos usar o evento. Vamos usar o evento nesta janela. Esta janela de dote completa. Aqui dentro do arquivo script dot js, vamos usar o método window dot add even listener, Window dot, Ad evenlistener Vamos usar um Evet e aqui vamos usar o inferno Hullvet Dentro do curso Duval, vou digitar WHE. Depois disso, depois de usar esse evento, precisamos retornar uma função. Função. Dentro da roupa, vou digitar B ETS. Então, dentro dos libres, aqui, vou digitar console dot log Dentro da pulseira redonda, quero imprimir a válvula Wheel Basicamente, quero imprimir o valor Gets DTS. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e abrir meu console, deixe-me mostrar, como você pode ver sempre que eu rolo minha página para baixo, isso aciona o evento de roda. Da mesma forma, sempre que eu rolo para cima nesta página, ela também retorna um valor toda vez que retorna um valor desta página, precisamos extrair o valor em excesso de Y dessa rolagem Para isso, precisamos pegar esse valor, Delta Y. Você pode notar que sempre que eu rolo minha página para baixo, como você pode ver, ela passa um valor positivo de 100 sempre que eu rolo para cima nesta página, ela passa e sempre que eu estrago esta página, ela passa um valor negativo de 100 Precisamos pegar esse. Se for um valor negativo anterior , precisamos executar essa animação na direção oposta. E se for passar um valor positivo, precisamos executar essa animação na mesma direção e nessa direção. Então, usando o valor Delta Y, vamos definir a condição. Mas primeiro, vamos extrair o valor do Delta Y. Aqui dentro do arquivo Javast, aqui eu quero X Delta Y, DL Tay, Delta Y, este Agora vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador novamente, você poderá observar apenas o valor Delta. Se eu rolar minha página para baixo, aqui você pode ver o valor Delta 100. Se eu rolar para cima nesta página, você também pode ver o valor Delta, mas desta vez você pode ver o valor negativo porque nós estragamos esta página. Agora, de acordo com isso, vamos definir uma condição de IP. Vamos voltar ao editor de código, e aqui vou comentar essa linha e definir uma condição de IP. Se Delta I datar ponto, Delta Y, Delta Y, maior que zero. Se o valor do Delta Y for maior que zero, quero ver o positivo e, em seguida, dentro da condição IP. Desta vez, quero imprimir, consolar, pontilhar, registrar dentro das rodadas. Dentro do curso duplo, eu digito rolagem normal, rolagem Em seguida, está dentro da bobina Amt, log de pontos do console. Dentro do arredondador, dentro do curso duplo, rolagem AmurVerse Rolagem. Vou configurar esse arquivo. Aqui em cima, defina este arquivo, se eu voltar ao meu navegador novamente e desta vez se eu rolar minha página para baixo, como você pode ver, ela imprime a rolagem normal Se eu rolar para cima nesta página, desta vez ela imprime a rolagem reversa Então, definimos nossa condição com sucesso. Agora, dentro dessa condição, vamos usar o GSAP Vamos voltar ao codificador novamente e vou comentar as duas linhas. Eu não preciso disso. Nós apenas o digitamos para fins de teste, nada mais. Agora, dentro da condição positiva, vou usar o GSAP Vou usar o método GAP dot two porque vamos mover o elemento da posição inicial para outra posição. Então, digite G SAP GSAP dot neste método de dois pontos e, dentro das resinas redondas, primeiro quero selecionar o elemento em qual elemento eu quero , eu quero animá-lo Então, eu quero selecionar esse elemento Murky. Vou copiar o nome dessa classe e vou digitar dot Murky Depois disso, dentro do Kalis após o coma, aqui vamos usar a propriedade transform, transform e, em condições positivas, quero mover esse elemento nessa direção Para isso, vou usar o valor translate X. Então, vamos ao código do estúdio, e desta vez, vou digitar, transformar, traduzir, traduzir X. No interior dos vestidos redondos, vou mudar a direção Vou mudar o tipo de fono em -200%. Vou configurar esse arquivo. Vamos configurar o arquivo e voltar para o meu navegador e ver se ele funciona corretamente ou não. Como você pode ver, estamos no meu navegador e sempre que tento rolar minha página para baixo, como você pode ver, ela move o elemento. Vamos recarregar esta página e fazer isso de novo. Depois, role minha página para baixo, como você pode ver, ela executa a animação. Mas aqui passamos o valor negativo, então é a animação na direção oposta Primeiro, vou fornecer uma pequena duração. Devemos fornecer um pouco de duração para entender a animação. Então, primeiro vou remover o vdu negativo. Eu quero movê-lo 200% na direção X. Depois disso, quero definir a duração, duração, duração, vou fornecer quatro segundos de duração. Depois disso, forneça a duração. Além disso, vou usar o valor de repetição repetida repetição e quero definir o valor de repetição menos um Vou configurar esse arquivo. Depois de configurar esse arquivo, vamos voltar ao navegador. Se eu rolar na minha página, agora você pode entender a animação e eu repito a animação várias vezes. Agora, vamos mover o elemento da pessoa -200. Eu quero mudar a posição de origem deste texto. -200% e eu vou configurar esse arquivo novamente e vamos voltar ao navegador Desta vez, sempre que eu rolo minha página para baixo, ela executa a animação na direção oposta e fica muito bonita. Quando eu rolo minha página para cima, ela não está funcionando porque não configuramos a animação para ela. Agora, a partir dessa animação, precisamos remover o efeito de atenuação Por padrão, ele define o efeito de atenuação, então, aqui, vou digitar propriedade Es EA AE, E e dentro do código duplo, vou usar Nan Value. Não quero fornecer nenhum efeito de atenuação. E eu vou configurar esse arquivo e voltar para o meu navegador. Desta vez, se eu rolar minha página para baixo, você pode notar que agora você pode notar que nossa animação não para. Não há efeito de desaceleração porque removemos o efeito de atenuação. Agora, vamos lidar com a outra condição. Aqui, vou copiar o mesmo código e testar sua condição Agora, se eu rolar para trás, desta vez, quero mover isso na direção X. Mas aqui, vou passar um valor positivo de 0% e vou definir esse arquivo. Agora, definir 0% na direção excessiva, significa correr na direção significa correr oposta e definir esse arquivo se eu voltar ao meu navegador, e desta vez se eu rolar para baixo no meu navegador, caso contrário, rolar para cima no meu navegador, como você pode ver, ele executa a animação na direção oposta. Se rolarmos para cima e rolarmos para baixo na página, desta vez isso mudará a direção dessa animação porque depende do valor positivo e negativo. De acordo com o valor positivo e negativo, dissemos a condição. Agora, precisamos mudar a direção da seta. Para isso, vamos voltar ao código do estúdio do usuário novamente. Apenas tente entender, primeiro começamos o texto a partir de -200% na direção do excesso É para rolagem normal e, se revertermos a rolagem , ela voltará para 0% Agora, precisamos mirar nessa flecha, nessa seta de imagem. Então, para isso, dentro da condição Delta Y, a primeira condição aqui depois do GSAP novamente, vou usar o método GSAPGSAP dois, dois, e depois dentro das gramíneas redondas, dentro do curso duplo, primeiro selecionamos a primeiro E eu quero selecionar essa imagem que está dentro dessa marcação. Então, aqui, vou digitar a marcação de pontos. Eu copio essa marca seletora e vou prová-la aqui. Depois disso, vou fornecer espaço e vou digitar a imagem ING. Depois do coma dentro das panturrilhas, dentro das crias aqui, aqui vou mudar a direção dessa Eu vou girar 180 graus. Vou usar o valor de rotação ROTA TA, girar. 18, eu quero definir esta parte. Em seguida, copiarei o mesmo seletor para outra condição, parte s. Aqui estou. Desta vez, quero girá-lo em zero grau Novamente, isso mudará a direção. Então, para acessar este arquivo, volto ao meu navegador, como você pode ver, estamos no meu navegador. Se eu rolar minha página para baixo, você pode ver, você pode notar que ela mudará a direção dessa seta. Deixe-me te mostrar. Depois de rolar a página para baixo , como você pode ver, ela mudará a direção dessa seta e moverá a animação. Então, se eu rolar para cima nesta página, novamente, ela mudará a direção da seta e moverá essa animação nessa direção. Isso é o que podemos criar usando o GSAP. Agora, vamos voltar ao código do vis studio A. Então, espero que agora esteja claro para você, como podemos lidar com a animação de texto rolante com o GSA Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 24. Crie a barra de navegação da landing page: Então, bem-vindo a outro projeto Real State GSP Animation. E hoje, vamos criar essa landing page. Depois disso, vou animar os componentes um por um Vamos criar essa página de destino do zero e, em seguida, adicionarei a animação do SAP. Particularmente neste projeto, aprenderemos como podemos usar a linha do tempo com o scroll Tigger A linha do tempo e o gatilho de rolagem são coisas separadas. A linha do tempo nos ajuda a executar a animação de forma síncrona. Já aprendemos sobre isso em nosso projeto anterior e trigger de rolagem nos ajuda a executar nossa animação com base na rolagem Neste projeto, vamos mesclar as duas coisas. Isso vai te ajudar muito no futuro e, em seus próximos projetos, você pode aplicá-lo Neste StudiL, não vou criar nenhum site real, mas vou criar essa landing page do zero. Não se preocupe Eu garanto que você vai gostar desse processo. Vamos entrar no editor de código do estúdio de resultados. Estou no editor de código do meu estúdio de recursos e, como você pode ver, eu já crio o Blettemplate, índice DML e já vinculo ao arquivo CSS de Este é o nosso arquivo CSS de estilo, e aqui eu já digitei o CSS padrão Aqui dissemos Margem zero, preenchimento, tamanho da caixa zero, tamanho da caixa água e uso da área da família de fontes Além disso, dizemos altura e largura 100% do nosso corpo e estimamos a etiqueta. Então, se eu voltar ao meu arquivo de estimativa de índice, e aqui você pode ver que já usamos o link CEN dessa animação do SAP, e também criamos o arquivo script dot js Então, primeiro, em nossa tag body, vou criar uma seção, uma seção para navegação. Em primeiro lugar, vou criar a barra de navegação desta página da web. Basicamente, neste tutorial, vamos nos concentrar somente nessa barra de navegação. Vou criar esse projeto parte por parte. Então, vamos entrar em um código de estúdio. Então, primeiro, aqui, vou pegar uma seção, um elemento da seção D. Seção. Em seguida, vou atribuir uma classe de classe e o nome da nossa classe é seção um. E nessa seção, eu quero criar uma barra NAP. Eu quero criar uma barra de navegação, então vou usar a tag NAT, NAV, NAD Então, dentro dessa tag NAT, primeiro, precisamos criar aqui, precisamos criar esse texto do logotipo, Wizard, Wizard Z, Summer para digitar Vou pegar H uma tag H one, depois dentro da tag H one, aqui vou digitar W I, ZAR D, wizardt Z. Então eu vou subtrair esse Depois de configurar esse arquivo, vou abri-lo no meu navegador. Então, como você pode ver, é assim que parece. Agora, vamos voltar ao editor de código novamente e agora vou criar outro componente. Quero dizer outro elemento do Nb, como sobre nós, serviços, caso de uso, preços e blog Para isso, vou criar outro elemento profundo, Dev e dentro desse elemento Dev. Mas antes eu vou atribuir uma classe a esse elemento profundo, vou digitar class, e isso é parte da classe. Dois. Você pode usar qualquer nome. Por enquanto, vou digitar a parte dois e, dentro desse elemento de, vou pegar H um. Aqui, vou pegar a tag H four, título a tag, e vou digitar sobre nós. Depois disso, vou duplicar essa linha e depois vou digitar Vou digitar serviços. Então eu vou duplicar essa linha novamente. Desta vez, vou marcar casos de uso, casos de uso. Então eu vou duplicar essa linha novamente. Desta vez, vou digitar preços. Aplicativo que vou digitar log. Então eu dublo essa linha e escrevo log. Em seguida, precisamos criar um botão. Então eu configuro esse arquivo se eu voltar para o meu navegador e ela para criar uma área de botão, esse botão, solicite DCP Então, dentro desta página de estimativa, vou pegar um botão PU DTN com etiqueta de manteiga, digitar um código de solicitação e definir esse arquivo Agora, vamos entrar na pilha de CSS e começar a estilizar. Primeiro, vou estilizar essa área de seção, então vou selecionar a seção TIN do elemento ACC Então, primeiro dentro do Cls, vou atribuir altura, altura, vou atribuir 100% Então eu vou atribuir com também 100%. Depois disso, vou atribuir uma cor de fundo por enquanto, algum tipo de cor de fundo. Você pode usar qualquer cor. Vou usar essa cor de disco. E também vou dizer que é posição relativa para esta seção, posição, posição relativa. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e entrar nesta página, fica assim. Eu apenas uso essa cor de fundo para mostrar que usamos 100% dessa área. E agora precisamos estilizar esse elemento Nab. Então, vamos voltar ao código do estúdio de resultados e vou selecionar a tag Nab no Nab Então, primeiro, dentro do Clirass, vou usar essa propriedade, display e vou usar slicks play flakes e alinhar o item, alinhar o centro das mensagens instantâneas alinhar o centro das mensagens instantâneas Em seguida, justifique o conteúdo, justifique o conteúdo, o espaço entre os espaços Isso fornecerá espaço entre os elementos. Deixe-me mostrar depois de configurar este arquivo, se eu voltar ao meu navegador, é assim que ele se parece. Ele fornece espaço entre o logotipo e os elementos nebber Depois disso, precisamos colocar todas as tomadas lado a lado. Para isso, novamente, precisamos usar a mesma propriedade do elemento Naba de duas horas Vamos voltar ao código do estúdio. Desta vez, vou estilizar essa classe, esse elemento profundo, parte dois, parte dois. Eu copio o nome da classe. Depois disso, vou selecionar esse no meu arquivo de estilo. E dentro do recesso de cores, quase vou usar as mesmas propriedades, exibir o centro dos itens flx Lin e justificar conter espaço entre eles, e vou colocá-lo Abre este arquivo e faço meu navegador, é assim que ele se parece Depois disso, também precisamos fornecer uma lacuna entre esses textos, esses itens numéricos. Aqui, vou usar a propriedade gap e atribuir a lacuna de 60 pixels, 60 pixels. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. E também precisamos adicionar um pequeno ao redor da seção Nabb. Então, aqui, vou digitar dentro do preenchimento Nab. Vou usar a propriedade de preenchimento. De cima para baixo, vou usar 60, 60 pixels. E para a esquerda e para a direita, vou usar 80 pixels. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Depois disso, vou aumentar o tamanho da fonte desse logotipo de texto. Para isso, precisamos selecionar a tag H one que está dentro da tag Nap, algum tipo NV Nav Dentro do napteg, quero selecionar a etiqueta H one e, em seguida, dentro das Vou usar tamanho da fonte tamanho da fonte. Tamanho da fonte tipo Herm 50 pixels. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele se parecia. E então eu vou estilizar esses itens Nuber. Além disso, vou aumentar o tamanho da fonte deles. Então, vamos voltar ao codeor novamente e, desta vez, vou selecionar Nav NAV Nav Depois de selecionar o NAB, quero selecionar H quatro, título quatro, tags H quatro O interior dos versos do Cli porque colocamos todos os itens Nb dentro da tag Então, depois da tag H four, primeiro, vou definir o tamanho da fonte, o tamanho da fonte, tamanho do telefone, vou atribuir o tamanho da fonte 30. Eu acho que este é perfeito, e também vou atribuir fonte a ele, espessura da fonte, e quero atribuir fonte a ele 500. Vou configurar esse arquivo. Após a etapa deste arquivo, se eu voltar ao meu navegador, é assim que ele se parece. Parece bom. Depois disso, vou estilizar esse botão. Então, vamos direcionar esse botão. Então, vamos voltar para os usuários e ver seu código. E desta vez vou mirar no NAF e, dentro do Nav, vou mirar no botão da etiqueta do botão VU T O N dentro das cores. Primeiro, vou atribuir um pequeno preenchimento a Então, digite o preenchimento de cima para baixo, vou atribuir um preenchimento de 18 pixels e, da esquerda e da direita, vou atribuir um preenchimento de 30 pixels Depois disso, vou definir o tamanho da fonte tamanho da fonte e vou atribuir o tamanho da fonte de 22 pixels. Então eu vou usar o raio da borda. Raio de borda, e vou atribuir raio de borda de dez pixels Em seguida, vou atribuir a espessura da fonte, espessura da fonte e vou atribuir a fonte a quase 600 fontes um pouco mais ousadas E também para atribuir borda. Eu quero dois pixels, borda sólida, sólida e, e nossa cor de borda é do tipo 000, Hastag 000 E também não quero nenhuma cor de fundo nesse botão, então vou digitar a cor do plano de fundo. Eu quero torná-lo transparente. Vou configurar esse arquivo. Depois de configurar esse arquivo e voltar ao meu navegador, é assim que ele se parece. Parece bom. Depois disso, se eu voltar ao design da minha landing pass, aqui temos um ícone de estrela, no lado esquerdo do texto, o texto do logotipo Portanto, precisamos encontrar o mesmo tipo de elemento estelar. Então, aqui vou abrir um novo TAF e vou pesquisar o ícone do Remix Ícone de remix. Em seguida, você precisa clicar neste link e, a partir desta seção, primeiro, você precisa clicar neste link do Github para acessar esta biblioteca Então, vou copiar o link do CDN. Esse é o link da CDN Então, vou copiar o link CDN dessa biblioteca CSS, dessa biblioteca de ícones e voltar ao meu ponto de índice HML five E aqui, vou usá-lo acima do arquivo CSS de pontos de estilo. Vou colar esse vazamento. Vou configurar esse arquivo. Depois de configurar esse arquivo, vamos voltar ao navegador. Nesta seção, vou pesquisar o ícone de estrela, algum tipo STAR, star. Depois de pesquisar por estrela, se eu rolar um pouco para baixo , como você pode ver, ele fornece alguns ícones de estrelas, e eu preciso que este brilhe com essa opção Vou clicar neste e, a partir daqui, vou copiar o código ML. Além disso, você pode usar SVG, PNG, e eu vou usar, mas vou usar essa classe já predefinida de código ESTiml Vamos voltar ao código do estúdio e vou colocá-lo dentro do H 110 antes que o assistente configure. Vou configurar esse arquivo. Depois de configurar esse arquivo, volto ao meu navegador, e é assim que ele se parece. Se eu comparar com o design original, deixe-me mostrar como você pode ver, aqui precisamos girar um pouco a estrela Vamos voltar ao código e tentar girar essa estrela. Em primeiro lugar, precisamos selecionar essa estrela que está dentro da tag Nap e também dentro da H one tad Aqui estou digitado, Nav, H one. Depois disso, quero colocar a estrela que está dentro da etiqueta I. Então, dentro das Coleras, primeira propriedade, vou usar a rotação Gire e eu quero girá-lo até 45 graus DEG. Em seguida, vou aumentar o tamanho da fonte dessa estrela. Vou digitar a fonte, sim, é uma fonte, então podemos aumentar o tamanho da fonte, 55 pixels, definir este arquivo e voltar ao meu navegador. Depois de entrar nesta página, como você pode ver, não é girar essa estrela porque é um texto É um texto embutido. Então, precisamos fazer com que esse elemento seja um bloco embutido. Então, aqui vou digitar display Inline dog. Se eu fizer isso no blog Inline e depois esse arquivo novamente e volto para o meu navegador, como você pode ver, desta vez ele girou essa estrela Elmate e ficou muito bem Agora, parece muito semelhante a essa barra de navegação do ritmo de aterrissagem. Isso é tudo para este tutorial. No próximo tutorial, criaremos a próxima seção. Depois de criar essas seções, vamos animar essas coisas uma por uma Então, obrigado por assistir a este vídeo. Fique ligado na nossa próxima parte. 25. Crie a seção de cabeçalho: Olá, pessoal. É bom ver você de volta. Essa é outra parte desse projeto. Hoje, neste projeto, vamos criar essa parte, a segunda parte dessa seção de cabeçalho. Aqui vamos criar essa parte. Vamos entrar no editor de código do Visa Studio. Estamos no meu editor de código Visa Studio. Primeiro, vou fechar a tag Nap e depois vou pular para o estilo CSS five Em seguida, vou remover a cor de fundo desta seção. Então, vou recomendar essa linha e definir esse arquivo novamente. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu mostrar a página, é assim que ela se parecia. Depois de remover o fundo, ele fica branco. Portanto, para a seção de cabeçalho, precisamos criar uma tag profunda. Então, vamos voltar ao código do Visual Studio. Depois da tag Nap, vou criar uma div em qual classe está no centro, Soong digite dot CN TR E então, dentro do elemento div central, eu quero criar um total de dois elementos D, parte um e centralizar a parte dois, algum tipo, centralizada Primeira parte. Então eu duplico essa linha, e a próxima é o centro, parte dois Então, dentro da primeira parte central, vou colocar uma etiqueta de cabeçalho. Por que precisamos colocar uma etiqueta de cabeçalho? Porque se eu te mostrar o design, precisamos colocar essa tag de cabeçalho. Este título um. Navegando pelo cenário digital para o sucesso. Precisamos digitar o mesmo texto. Então, aqui está de volta ao código, e eu vou usar H uma tag, e dentro dessa tag H um, vou amarrar a navegação no cenário digital Sucesso, e eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece. Em seguida, precisamos criar esse parágrafo e o botão. Para isso, vamos voltar ao código. Mas antes de criá-lo, quero criar esta seção. Quero projetar a parte central um e a parte central dois. Vamos voltar ao arquivo CSS do céu e aqui, primeiro quero direcionar o elemento centralizado, Sum t dot center Então, dentro da classe, primeiro, vou usar a cor de fundo para identificar a área central. Cor de fundo, e eu quero atribuir a cor vermelha, VERMELHA. Depois de atribuir a cor de fundo, quero atribuir altura, altura e quero atribuir altura de 80%. Então eu quero atribuir trigo úmido, e aqui no S&W 100% Depois disso, vou configurar esse arquivo e voltar para o meu navegador, é assim que ele se parece. Em seguida, precisamos dividir a área sentativa em duas partes. Precisamos criar a parte quatro, esse texto e esses gráficos. Para isso, vamos para o navegador, e eu vou usar a propriedade de exibição flix Tela flexível. Então, nessa seção, desta vez, eu quero atingir a parte central um, esse elemento profundo. Então, vou digitar a parte um do centro do ponto dentro das cálices Vou atribuir altura e peso a esta seção. Então eu vou atribuir altura 100% e vou atribuir com 40%. Além disso, vou atribuir uma cor de fundo para identificar as áreas na cor de fundo do tipo. Você pode usar qualquer cor, eu vou usar essa cor Bisk e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele fica. Essa área é para texto e essa área é para o gráfico. Em seguida, quero adicionar um pouco de preenchimento em nosso contêiner, o elemento div central principal Para isso, aqui, vou adicionar um pouco de preenchimento de todas as direções, algum tipo, preenchimento e pixel Vou configurar esse arquivo. Se eu voltar para o meu navegador, é assim que ele se parece. Da mesma forma, precisamos atribuir a área para a parte central dois. Vamos voltar ao código do estúdio e eu vou duplicar esta seção e, desta vez, vou focar na segunda parte central, e aqui vou atribuir com 60% Vou adicionar uma cor de fundo. E você pode adicionar qualquer cor de fundo para a demonstração, então eu vou adicionar uma cor de fundo rosa, caso contrário, essa, seja o que for. Depois de definir esse arquivo, ficou assim. Agora vou remover toda a cor do fundo porque parece muito irritante Então, vou comentar as duas linhas. Eu só uso a cor de fundo para mostrar a área. Eu não preciso disso agora, então vou comentar toda a cor do fundo. Também a cor de fundo central. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele fica. Então, se eu olhar meu design, esse design, como você pode ver, após o título de um texto, temos um parágrafo e o botão. Você precisa criar o parágrafo e o botão. Então, para criar o parágrafo aqui, aqui vou pegar uma tag P para o parágrafo depois da tag H one, e vou usar um total de 30 palavras, algumas digitando em 30. Eu vou dizer isso bem. Além disso, precisamos criar o botão, então vou digitar a tag do botão, o elemento do botão, e aqui você pode ver neste botão que ele digita o livro para consultores Vou usar esse texto, o mesmo texto, livro do tipo Hem para consultores E eu vou configurar esse arquivo. Então, depois de criar o botão, leva ao navegador. Agora, é assim que parece. Agora precisamos estilizar esta seção. Então, dentro desse arquivo CSS mosaico, agora vou direcionar Agora, primeiro, quero direcionar o título de uma tag, H uma tag, que está dentro da parte central. Então, eu vou copiar esse seletor e depois colar aqui, e depois disso, eu quero colocar H uma tag Então, dentro do Caliss, vou atribuir o tamanho da fonte. Tamanho da fonte, quero atribuir um tamanho de fonte de 90 pixels. Então eu quero atribuir Font, wait, font, wait, 400. Eu quero usar uma fonte pequena e fina. Então, depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele se parecia. Então, precisamos estilizar esse parágrafo. Para isso, vou selecionar a tag P. Então, depois disso, vou selecionar. Em vez de usar H um, vou usar P. Desta vez, vou usar o tamanho da fonte 20 pixels e não quero usar fonte até oito, então eu removo essa linha. Além disso, quero atribuir um pouco de nós a este parágrafo, e vou usar 80% de maconha. Então eu quero adicionar um pouco de margem da parte superior e também da Então eu vou usar margem, parte superior, 30 pixels e margem inferior, 40, caso contrário, 30 pixels. Então, vou usar 40 pixels por enquanto, e vou definir esse arquivo. Se eu definir esse arquivo e voltar ao meu navegador, é assim que fica. Eu apenas tento combinar o layout com o design original. Então, depois disso, precisamos criar esse botão, livro para consultores Agora precisamos estilizar esse botão, e é assim que nosso botão se parece. Precisamos usar o raio da borda um pouco molhado. Além disso, precisamos usar a cor de fundo preta. Vamos voltar ao código do estúdio e, desta vez, vou focar no botão. Então, a partir da primeira parte central, quero direcionar o botão, MAS LIGADO. E dentro da cor versus, primeiro, eu vou usar a cor de fundo, cor de fundo, eu quero usar preto. Em seguida, precisamos usar branco fulvo, cor da fonte oposta, cor somype, cor do tipo Sou e a cor da fonte Então precisamos usar o raio da borda. Raio da borda, eu quero atribuir dez pixels. E então precisamos fornecer um pouco de acolchoamento, eu acho. Preenchendo de cima para baixo, quero atribuir dois pixels Eu acho que é o suficiente. E da esquerda e da direita, quero atribuir 40 pixels. Além disso, precisamos usar a fonte até oito. Eu quero um tipo de fonte um pouco mais ousado, fonte, peso, 600. Vou usar o valor 600 e depois vou remover a borda. Eu quero remover a borda, vamos ver. Sim, não há fronteira, então vou remover a borda. O tipo dela, fronteira, nenhum. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele ficou. Precisamos atribuir o tamanho da fonte. Esqueci de atribuir o tamanho da fonte, então vamos voltar ao coitor e aqui vou digitar o tamanho da fonte e vou usar 25 pixels Depois de atribuir o tamanho da fonte, se eu definir esse arquivo, se eu voltar ao meu navegador, é assim que fica. Agora é bem parecido com esse design. Agora, depois disso, na seção central da segunda parte, precisamos adicionar esse gráfico. Vou usar o mesmo gráfico, mas não neste vídeo. Porque eu não quero criar esse vídeo para a lei. Na próxima parte deste vídeo, adicionarei esse drapi até breve 26. Organize o logotipo e o gráfico: É bom ver vocês. Este é o terceiro tutorial relacionado ao nosso projeto e, neste tutorial, criaremos a segunda seção nessa posição. Aqui vamos colocar o gráfico e também vamos adicionar logotipos da empresa nessa posição. Deixe-me te mostrar. Este é nosso design original e, a partir desse design , vamos cortar essa imagem, esse gráfico e colocar o mesmo gráfico nessa posição. Além disso, um por um, vou colocar todos os logotipos no meu design. Vamos ver o código do Visual Studio. Como você pode ver no meu código do Visual Studio, temos uma pasta chamada image ING. Eu já recortei as imagens que precisamos para criar a página de destino, como esses gráficos e os outros logotipos. Um por um, recortei todo o logotipo desta landing page. Agora, em nossa seção central da segunda parte, vamos colocar esse gráfico. Aqui vou pegar a imagem dag IMG e, como fonte, vou passar o caminho do arquivo, que está na minha pasta de imagens, Img image, e vou usar essa imagem, Anunciar anúncio ponto JPG e vou definir Depois de definir este arquivo, se eu voltar ao meu navegador, deixe-me mostrar para você. Agora você pode ver, e se eu recarregar meu navegador, é assim que ele se parece Agora, vamos voltar ao arquivo CSS Style Dot. arquivo CSS Style Do, precisamos descobrir a seção central da segunda parte , esta. E depois disso, vou direcionar a imagem. Então, digite o centro de pontos para dois, e eu vou direcionar a imagem IMG da tag de imagem dentro da classe, vou atribuir altura, altura e vou usar 100% da altura do contêiner principal, 100% Eu vou satisfazer. Depois de me certificar de que volto ao meu navegador, deixe-me mostrar e recarregar minha página Agora você pode ver o resultado. É assim que parece. Agora precisamos mover esse gráfico para a posição correta. Para isso, deixe-me mostrar aqui no meu contêiner pai, vou usar posição da propriedade posição, e no meu continente pai, vou usar relativa, e no meu continente filho, vou usar posição absoluta. Então, do lado direito, da direita, vou atribuir valor zero. Então, por favor, defina este arquivo se eu voltar ao meu navegador e recarregar minha página, agora você pode ver que isso resolve o E se você adicionar um pouco de acolchoamento do lado iluminado e do lado direito em nosso contêiner central, deixe-me mostrar Então, em nosso contêiner central aqui, vou usar preenchimento. De cima para baixo, vou usar 80 e da esquerda e direita, vou usar 100 pixels. E de cima para baixo, talvez 70 pixels sejam bons para isso. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora ele está com uma aparência muito boa Agora vamos inserir as imagens. Vamos para o código do estúdio de resultados e vamos pular o arquivo de estimativa de classificação do índice. Dentro desta primeira seção, quero criar outra seção e vou chamá-la de logotipos de pontos Aqui vou colocar todas as imagens uma após a outra. Como você pode ver no meu diretório de trabalho atual, eu já extraio as imagens e as chamo de Logotipo dois, logotipo três, logotipo quatro, lo cinco, logotipo seis. Então, um após o outro, vou inserir todos os logotipos usando a tag de imagem, IMG e, como fonte, vou digitar a pasta IMG, depois vou direcionar o logotipo duplicar essa seção Isso é para o logotipo dois. Em seguida, eu o duplico novamente. Isso é para o Logotipo três e este é para o Logotipo quatro, e este é para o Logotipo cinco e o último é para o Logotipo seis. Vou configurar esse arquivo. Depois de configurar este arquivo, se eu recarregar meu navegador, deixe-me mostrar, aqui você pode ver todos os logotipos um após o outro Agora, em seguida, precisamos selecionar o continuador principal. Deixe-me mostrar que precisamos selecionar esse logotipo principal usando o nome da classe Em nossa seção de estilo, aqui, vou selecionar dot lose. Depois disso, o recesso de cores, vou usar essa propriedade Display, e aqui vou usar o display flex. Em seguida, vou usar o centro de itens do Align Align. Em seguida, justifique o conteúdo, justifique o espaço de conteúdo entre este Além disso, vou adicionar um pouco de preenchimento a esses logotipos. Preenchimento por preenchimento, de cima para baixo, vou usar 30 pixels e para a esquerda e para a direita, vou usar 120 Acho que é bom para isso, e vou vender esses cinco. Além disso, você precisa atribuir uma pequena altura a esses logotipos de pontos de tipo de imagem. Dentro do logotipo, quero criar a tag de imagem de todas as imagens, ING. Em seguida, dentro do Calibra diz, eu vou atribuir altura, altura, vou atribuir 60 pixels de altura, 60 pixels, e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador e depois carregar meu navegador, é assim que ele fica. Então, para criar a primeira seção, precisamos pular para a seção número dois, a seção de serviços. Aqui eu vou realizar nossas animações principais, mas não vou fazer isso neste tutorial Vamos começar a partir do próximo tutorial, então até breve. 27. Comece a criar a seção de serviço: Olá, pessoal. É bom ver você de volta. Essa é outra parte deste tutorial e, nessa seção, vamos criar essa seção de serviços. Em nosso tutorial anterior, criamos a seção de logotipo. Agora vamos criar essa seção de serviços. Na primeira parte deste tutorial, vamos criar essa estrutura e, em seguida, um por um, vamos estilizar os limites Então, vamos começar. Então, estou de volta ao código do estúdio. E aqui, vou declarar outra seção, alguma seção de tipos, e aqui, vou atribuir uma classe, e nossa classe a ela é a seção dois da classe Depois disso, nesta seção, vou pegar outro DevElement e vou digitar Dev e vou atribuir uma classe a esses serviços de classe de elementos profundos Então, dentro desse elemento, primeiro, vou pegar uma tag H três, H três, e aqui vou digitar serviços. Em seguida, vou pegar um parágrafo, a tag P, aqui estou digitando load e vou pegar a palavra. Isso é. Eu vou configurar este. Agora, precisamos fazer com que a seção de serviços seja exatamente assim. Para isso, vamos voltar ao arquivo CSS. Primeiro, vou digitar um único comentário. Deixe-me mostrar a seção dois do Shernotype. Depois disso, vou selecionar a seção dois, digitar seção de pontos, seção dois. Em seguida, vou selecionar o tipo de serviço dot services. Então, na aula, primeira probabilidade, eu vou aplicar, vou aplicar uma cor de fundo. Então, digitou a cor, quero atribuir a cor vermelha para entender nossa área Em seguida, vou definir um pouco de preenchimento. Digite preenchendo ela em preenchimento. De cima para baixo, vou usar 40 pixels e da esquerda e direita, vou usar 120 pixels. E eu vou configurar esse arquivo. Depois disso, vamos voltar ao navegador. É assim que parece, mas se sobrepõe à nossa área de logotipo Precisamos resolver esse problema. Vamos voltar ao código do estúdio novamente. Para resolver o problema primeiro, vou colocar uma margem no topo, uma margem no topo. Vou atribuir 120 pixels. Agora, vamos voltar ao código e ver como ele se encaixa perfeitamente. Sim, está perfeitamente posicionado. Agora, vamos voltar ao código, e aqui vou usar o dtapty Mostre e eu vou fazer com que seja de linho. Alinhe e alinhe os itens ao centro. Mas justifique o conteúdo. Desta vez, vou usar o Flakt flakes start e vou configurar esse arquivo Agora, depois de compactar esse arquivo, se eu voltar ao meu navegador, como você pode ver, coloque-o lado a lado. Em seguida, vou adicionar uma lacuna entre eles. Para isso, vou digitar Gap gap, quero quase 20 MixelGap Eu acho que é bom para isso. E eu vou configurar esse arquivo e voltar para o meu navegador. Agora está bom. Depois disso, precisamos criar nosso design dessa forma. Vamos voltar ao código. E desta vez, vou ter como alvo o elemento H três, algum tipo de serviço de pontos, e dentro desse serviço, quero direcionar o elemento H três. Então, dentro do Crass, primeiro, vou definir a cor do fundo, a cor fundo, a cor e quero usar exatamente a mesma cor, esse código de cores Para isso, aqui, vou digitar Hastag e quero esse código de cores. Vou configurar esse arquivo. Por enquanto, não quero essa cor de fundo vermelha porque já definimos nossa área. Depois disso, vou definir a espessura da fonte, a espessura da fonte e quero atribuir 500. Em seguida, vou definir o preenchimento. Comparando de cima para baixo, vou usar oito pixels e da esquerda e da direita, e para a esquerda e para a direita, vou usar 1010 Além disso, vou adicionar um raio de borda. Raio da borda, eu quero raio da borda por pixel. Depois disso, vou aplicar o tamanho da fonte. Tamanho da fonte, quero uma fonte um pouco maior. Vou usar 60 pixels. Vou configurar esse arquivo. Depois de colocar esse arquivo de volta no meu navegador, é assim que nosso elemento ficará. Em seguida, precisamos direcionar o parágrafo. Vamos voltar ao código e começar a estilizar a seção do parágrafo Aqui, escrevo para serviços aos quais quero direcionar o parágrafo Então, primeiro, vou definir com, com. Aqui vou atribuir 40% de largura. Acho que 40% é bom para isso. 40% da resolução da nossa tela. Em seguida, tamanho da fonte, tamanho da fonte, quero atribuir o tamanho da fonte de 18 pixels. Depois disso, vou definir o peso da fonte. Fonte, espere, 500, acho que 500 é o suficiente para atrapalhar esse arquivo, e é assim que nossa seção se parece. Se eu comparar com a nossa imagem, ela é bem parecida. Não precisamos exatamente disso. Nós apenas tentamos entender o conceito. Então, depois de criar essa seção de serviços, agora vamos pular para esses quatro elementos Vamos criar essa estrutura desses quatro elementos. Então, um por um, vamos estilizar esses elementos. Para isso, precisamos voltar ao EstimLPage. Vamos voltar ao ponto de índice StimlPage após essa seção profunda, aqui vou pegar outros elementos profundos Quero digitar Dev dot container. Recipiente de pontos profundos, e dentro desse elemento profundo, vou pegar um total de quatro elementos profundos. Então, o elemento Ty Dept, ELE, eu uso a forma abreviada M e digitaria r e duplicaria esta seção várias Basicamente, aqui eu uso quatro elementos profundos e vou definir isso. Depois de definir esse arquivo, vamos voltar para a seção de estilo. Então, vou estilizar o recipiente, ponto apertado, recipiente. No interior da primeira propriedade cis, vou usar a altura Vou atribuir altura, 90% dela, 90%. Em seguida, vou atribuir peso a esse contêiner com, vou atribuir cem por cento. Depois disso, vou adicionar um pouco de preenchimento. Preenchendo de cima para baixo, vou usar 40 pixels Da esquerda para a direita, vou usar 120 pixels. Depois disso, vou usar essa propriedade. Exiba, eu quero flexibilizá-lo e, em seguida, justificar o conteúdo, justificar o conteúdo Quero espaço entre o espaço e o envoltório flexível. Flakes, Rap Eu vou usar a propriedade do rap, o valor do Rap. Em seguida, vou direcionar o elemento. Algum tipo de elemento pontilhado. Ao copiar seu elemento de nome de classe, selecione AM e Hem. Esse elemento e dentro da primeira propriedade da classe, vou usar altura, altura, vou atribuir altura de 350 pixels. Então eu vou definir, nós, aqui eu vou definir com quase 14%, 49% e também vou atribuir uma borda Borda, vamos ver, como você pode ver, eles usam bordas grossas. Vou usar as mesmas vistas de borda. Três pixels, borda sólida, e nossa cor de borda é preta. Depois disso, depois disso, vou dizer raio da borda, raio da borda, 50 pixels Acho que 50 pixels são suficientes para isso. Em seguida, cor de fundo, cor fundo e quero que a cor de fundo vermelha entenda a área e também vou usar a sombra da caixa. Sombra de caixa. Zero pixel, 15 pixels, zero pixel egging. E para a cor da sombra, eu quero usar a cor preta. E eu vou satisfazer o After Satisfy, se eu usar meu navegador, é assim que parece. É bem parecido, mas precisamos fazer algumas pequenas alterações. Além disso, vou usar outra propriedade aqui chamada flex shrink, flex shrink e vou Nós o usamos para evitar que o item flexível encolha e garantir que ele mantenha o tamanho pretendido mantenha Até o recipiente fica tão pequeno, caso contrário, o recipiente encolhe Para configurar esse arquivo, vamos voltar ao navegador, é assim que ele se parecia. Se eu comparar com esta imagem, você pode ver o resultado. É muito parecido com isso. Se eu remover as cores, remover as cores de fundo, deixe-me mostrar para você. Se eu comentar essa linha e definir esse arquivo, agora ele terá exatamente a mesma aparência. Não precisamos torná-lo preciso. Precisamos apenas entender o conceito. Isso é tudo para este tutorial. Na próxima parte deste tutorial, vamos colocar os elementos dentro desses elementos p. Obrigado por assistir a este vídeo, Stune, para nossa próxima parte. 28. Estilizando o bloco de serviços: Olá, pessoal. É bom ver você de volta. Neste tutorial, vamos preencher as caixas em branco com esse conteúdo. Precisamos preencher cada bolha com serviços diferentes. Além disso, você pode notar que o segundo elemento de mergulho e a cor de fundo do terceiro elemento são pretos. E para imagem, usamos nosso gráfico de anúncio antigo porque eu não tenho exatamente as mesmas imagens desse tipo. Não se preocupe. Vou substituí-lo mais tarde, após concluir o tutorial D. Mas, por enquanto, eu gostaria de usar a imagem do anúncio. Agora, vamos voltar ao código e ver como podemos sentir esses alienígenas. Então, estou no editor de código do meu estúdio novamente. E como você pode ver, por enquanto, nossas caixas estão vazias. Agora vou adicionar uma nova classe ao nosso elemento profundo. Para o nosso primeiro elemento, vou adicionar fundo branco, fundo branco grande. Além disso, vou adicionar a mesma classe ao nosso último elemento, fundo branco de fundo. Para o segundo e terceiro elemento, quero atribuir uma nova classe de fundo preto. Porque se eu mostrar meus elementos, deixe-me mostrar aqui que você pode notar que nosso segundo elemento profundo e nosso terceiro elemento profundo são preenchidos com essa cor de fundo. É por isso que eu uso essas classes. Agora, vamos voltar ao código novamente. Agora, dentro do nosso primeiro elemento aqui, vou definir outro elemento div, e vou dizer bloco de classes um Então, dentro desse documento um, primeiro, eu vou pegar um H dez, H dois, dentro desse elemento H to, eu vou digitar. Primeiro, vou digitar otimização de mecanismos de pesquisa. Depois disso, vou pegar um elemento H quatro, de quatro anos. E aqui vou digitar learn node. Com isso, precisamos adicionar um ícone. Deixe-me te mostrar. Vou acessar o site do ícone do Remix A partir daqui, vou usar esse ícone. Eu seleciono esse ícone e copio o código e, de volta a ele, está um editor de código de estúdio. Aqui eu vou jogar o ícone. Vou configurar esse arquivo. Além disso, se eu te mostrar, tínhamos uma imagem. Agora, precisamos criar outro bloco para a imagem. Então, aqui, vou definir outro bloco. Deixe-me te mostrar. E o nome da nossa classe de bloco é bloco de pontos dois. E dentro dela, vou colocar uma imagem IMG, tag de imagem Como eu disse, vou usar exatamente a mesma imagem. Deixe-me te mostrar. Vou usar exatamente a mesma imagem de anúncio de imagem. Então eu copio o caminho da imagem e vou colocá-lo aqui. Vou configurar esse arquivo. E eu vou configurar esse arquivo, se eu te mostrar meu navegador, agora, fica assim. Então, precisamos entrar nesse arquivo de estilo e começar a estilizar os elementos profundos Então, vamos voltar ao editor de código. E vou entrar na pilha de estilos ou CSS. No início, para todos os elementos, vou adicionar um pouco de preenchimento, pouco de preenchimento, 60 pixels, estanho, vou torná-lo linho Exibir linho. Depois disso, depois disso, vou selecionar o bloco um. Então, eu quero mirar no Tittem de dentro do M, eu quero atingir o bloco um Bloco um. Então, dentro do carro LavSSF, vou definir a altura. Altura, vou atribuir altura de 100%. Então eu vou atribuir maconha, com Hem atribuindo 50% de maconha. Depois disso, vou atribuir a propriedade de exibição. Display, vou fazer com que ele sinalize e alinhe o centro de Align IN Justifique o conteúdo, justifique o conteúdo, mas desta vez não vou usar o centro, vou usar o espaço entre o espaço e a direção flexível, a direção flexível Desta vez, vou usar Colm. Depois disso, vou começar a estilizar o bloco dois, então digite o elemento ponto Eu quero atingir o bloco dois. Então, dentro das calices, a primeira propriedade que vou usar altura, altura, vou atribuir altura, 100% de largura, vou atribuir com 50% Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, é assim que ele está agora. Em seguida, precisamos definir o tamanho da imagem, como altura, largura, ajuste do objeto, etc Para isso, volto ao meu editor de código de usuário e, aqui, vou selecionar a imagem que está dentro do bloco dois, algum tipo ponto N ponto bloco dois, e dentro do Bloco dois, vou direcionar a tag de imagem dentro do cadiss e, dentro do CaiaSF, vou definir a altura vou definir a Digite altura, vou usar 100% e remover ervas daninhas também 100%. O que não é obrigatório, mas você pode fornecê-lo. Em seguida, object fet, object , feed, vou usar contain. E vou definir a pilha depois de configurar esse arquivo Se eu voltar ao meu navegador, é assim que está agora Agora, depois disso, precisamos estilizar a borda para o título para o elemento e o título para o elemento. Também o ícone. Para isso, voltemos ao código. E aqui, vou direcionar He para o elemento. Eu amarro ponto, elemento, ponto dentro do fundo do documento um e quero direcionar H para marcar. Então, na propriedade LissF, vou usar o tamanho da fonte Vou definir o tamanho da fonte. Aqui vou fazer com que seja de 45 pixels, 45 pixels para a fonte, depois vou definir a espessura da fonte FontUTFont, vou defini-la como 500 Acho que 500 é bom para isso. Depois disso, vou definir a família de fontes, vou usar a família SansaiFont, Sansai e depois vou dizer e usar exatamente a mesma cor de fundo que usei anteriormente, e vou adicionar um pouco de preenchimento preenchimento de toda a dicção, vou adicionar um preenchimento de cinco pixels Além disso, vou usar o raio da borda, raio da borda, vou usar o raio borda de dez pixels de todos Agora, se eu definir esse arquivo e voltar ao meu navegador, é assim que nosso gosto se parece. Se eu comparar com a imagem original, é algo parecido, então funcionou bem. Agora precisamos estilizar a etiqueta do título quatro e o logotipo. Para isso, vamos voltar ao código e precisamos selecionar o H para a tag. Eu seleciono o H para tag. Primeiro, eu miro o elemento, depois insiro o elemento, tenho como alvo o bloco um, depois miro o elemento H quatro, faço flocos de exibição, alinho o centro de conteúdo e defino o tamanho da fonte 20, fonte 0,700 e forneço um pequeno espaço entre o ícone e o texto, 20 pixels, e vou definir esse Vou definir esse arquivo se eu voltar ao meu navegador, é assim que parecia. Em seguida, precisamos estilizar o ícone. Para isso, precisamos direcionar a tag. Aqui, vou segmentar o ícone e aplicar essas propriedades. Depois de direcionar o ícone dentro do bloco um, eu aplico preenchimento nele Depois mudo a cor do fundo, deixo preto e mudo a cor. Eu o faço branco. Eu deixo o texto com a cor branca e disse que o raio da borda é 50%. Isso fará com que o fundo do ícone pare, e eu vou definir isso corretamente. Depois de definir essa correção cinco de volta para o meu navegador, é exatamente assim que parecia. Em seguida, precisamos preencher todos os elementos com exatamente o mesmo conteúdo, alterar o texto nele. Para isso, vou entrar no arquivo de estimativa de pontos do Idee e copiar essa seção Copie o bloco um e o bloco dois também ao mesmo tempo, vou copiar a seção e, dentro do segundo elemento, vou colar o código. Só precisamos alterar o texto H dois nele. Em vez de alterar a otimização da pesquisa, aqui, vou digitar um anúncio pago por clique Então, novamente, vou copiar ambas as seções. Deixe-me mostrar e colocá-lo dentro do terceiro bloco. Novamente, eu também vou fazer a mesma coisa exatamente no quarto bloco para o terceiro bloco, vou mudar o H para o conteúdo do elemento. Aqui vou substituí-lo por marketing de mídia social e vou substituir o último por e-mail marketing. Vou remover esse e vou substituí-lo por e-mail marketing, e vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é exatamente essa a aparência. Agora, vamos trabalhar no segundo e terceiro bloco porque precisamos criar exatamente o mesmo efeito. Precisamos preenchê-lo com esse plano de fundo. Para isso, vou usar a classe. Vou usar exatamente a mesma classe que Bigi. Você copia o nome da classe, Black BGi e volta para o arquivo CSS Stylot Primeiro, vou mudar a cor de fundo desse elemento. Eu o deixo preto, então você deseja alterar a cor de fundo desse texto, porque se não mudarmos a cor de fundo do texto , ele não corresponderá ao resultado exato Aqui eu vou mudar a cor de fundo do elemento H dois. Vou torná-lo branco e vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele ficou. Agora também precisamos trabalhar em nosso logotipo e aprender o texto do nó. Precisamos torná-lo visível. Para isso, primeiro, vou mudar a cor de fundo do elemento H quatro. Vou torná-lo visível para que eu o torne branco. Em seguida, mudo a cor de fundo desse ícone e a cor do texto. Eu disse cor de fundo, branco e cor do texto preto. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é exatamente o que parecia. Mas aqui eu fiz um elástico porque acho que, por engano, aplico a cor branca do texto, todos esses elementos. Precisamos resolver o problema. Precisamos resolver esse problema, então estou de volta ao editor de código. Sim, eu entendo o erro. Então, aqui precisamos selecionar apenas o fundo preto. Vou substituir o elemate um fundo preto e vou salvar esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver o resultado. Agora está perfeito, exatamente o que estou procurando. Essa é outra parte deste tutorial. Na próxima parte deste tutorial, começaremos a aplicar a animação GSP Vamos começar o JavaScript. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 29. Aplique a animação GSAP à seção 1: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Nosso projeto. E neste tutorial, vamos iniciar o JavaScript. Basicamente, vou aplicar a animação GSP em nossa primeira página Quero dizer nossa primeira seção em nosso logotipo, em nosso Nebb, em nossa seção de conteúdo, depois seção de imagem, botão e logotipos Vamos aplicar animação nela. Para isso, vou abrir meu editor de código do Visual Studio e, como você pode ver, lado a lado, abro meu arquivo HTML ind dot e a tela dot js five Se eu rolar até o k, como você pode notar, já inserimos a tinta CDN da animação GSP Agora, com isso, vou importar outro link CDN. Vou importar o link CDN para o Scroll trigger. Aqui, aqui eu abro CDN Js e, a partir daqui, vou copiar esse gatilho de rolagem do scrittag gatilho de rolagem significa obter Js porque vamos aplicar o gatilho de rolagem em nossas animações. É por isso que o usamos. Agora, vamos voltar ao editor de código e vou pressioná-lo para importar a animação do SAP. Lembre-se de que você precisa seguir essa ordem. Primeiro, você precisa inserir a animação GSP, depois importar a biblioteca compatível de animação GSP, como o trigger de rolagem, e, por fim, importar a sua própria com o arquivo JS Agora, vamos voltar ao topo da seção superior. Agora, primeiro eu quero animar o logotipo, os itens numéricos e o botão NBR Para isso, precisamos selecioná-lo. Mas antes de selecioná-lo, vou criar uma linha do tempo. Vou definir uma variável onde e o nome da nossa variável é TL. TL significa linha do tempo. Linha do tempo igual a aqui, vou criar uma linha do tempo GSP, linha do tempo de b pontos. Método de cronograma Sp dot. Em seguida, linha do tempo, toque em um ponto do método e depois dentro da redonda dentro dos códigos duplos Primeiro, vou selecionar o elemento Quais elementos eu quero animar. Primeiro, quero animar nossa tag H one. Como você pode ver, a tag H one está dentro da tag Nab. Vou digitar nab nosso TegNameNav Nab the space. Eu quero mirar dentro do NAB, eu quero atingir H um elemento, H um Então, depois de uma vírgula, eu quero direcionar os itens NAB, então vou direcionar o elemento H quatro que está dentro Vou digitar o espaço nervoso H quatro. Aroma, então vou direcionar o botão de solicitação. Para isso, novamente, vou digitar o botão de espaço nervoso. Mas intacto Depois da vírgula aqui, vou usar carnívula Agora, primeiro, quero mover o principal do yXsy, vou pegar Y, dois pontos e do YX, colocá-lo em -30 pixels, depois quero fornecer Depois, vou fornecer a duração da duração e vou dizer duração, 0,7 segundo. Depois da vírgula, vou definir a opacidade, a opacidade, opacidade e vou definir a opacidade Vírgula, então vou fornecer um pouco de atraso. Também forneça um pouco de atraso, algum tipo atraso, atraso, e eu vou definir o atraso de 0,5 segundo. Agora defina esse arquivo, vamos voltar ao navegador. Agora, depois de definir este arquivo, se eu derotar meu navegador, você pode observar a animação em até 0,5 segundo, ele executa a animação e leva total de 0,7 segundo para concluir a Primeiro, da opacidade zero, ela volta para a opacidade única significa totalmente visível e vem de menos cirtipixel do topo Como você pode ver, temos vários elementos. Se aplicarmos a propriedade de escalonamento nela, podemos criar uma pequena diferença entre todos os gelo. Deixe-me te mostrar. Aqui, por vírgula, vou aplicar o escalonamento. Stagger, 0,15 segundo. Se eu salvá-lo novamente e voltar para o navegador e recarregar esta página, aqui você pode notar o efeito, o efeito de escalonamento Veio um após o outro. Em seguida, vou animar o texto, o texto grande. Eu quero animá-lo a partir do site esquerdo. Eu quero movê-lo do site de locação. Para isso, vamos voltar ao código. Primeiro, precisamos direcionar o texto grande. Como você pode ver, esse texto está dentro desse elemento profundo, parte central um. Aqui, vou copiar o nome da classe desse elemento profundo e vou direcioná-lo para algum tipo de ponto da linha do tempo TL do método de dentro dos versos redondos, dentro das rodadas, dentro dos códigos duplos. Primeiro, vou direcionar esse elemento profundo usando o nome Então, dentro desse elemento profundo, quero direcionar o primeiro título de uma tag. Eu digito H one, cabeçalho um. E depois da vírgula, em vez dos carros, a primeira propriedade, vou usar Xs X xs, eu quero movê-lo de -200 pixels. Depois da vírgula, vou dizer duração. Acho que vou fornecer duração, duração. Aqui, vou passar a duração de 0,5 segundo. Além disso, vou dizer a opacidade da opacidade. Eu vou fazer com que seja zero. Eu quero configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar esta página, agora você pode notar que ele veio do lado esquerdo após concluir a primeira animação Depois de concluir a animação Nb, ela acionará a animação de texto porque estamos na linha do tempo É por isso que aconteceu mais tarde. Agora vamos voltar ao código e vou aplicar o mesmo tipo de animação para o parágrafo. Eu dupliquei essa seção e, em vez de focar no H um, vou focar na tag do parágrafo P e vou movê-la dos Vamos experimentar com isso. Se eu movê-lo do YxS -200, não, vou configurá-lo como 100 e vou definir a duração de 0,4, e vou usar o mesmo valor oposto Depois de definir esse arquivo, volto ao meu navegador e recarregá-lo Agora vamos ver, depois de concluir a primeira animação de texto, ela vem de cima. Sim, está funcionando bem. Depois disso, depois disso, vou direcionar o livro para consultor. Para isso, vamos voltar ao código. Novamente, vou duplicar esta seção e vou focar na etiqueta do botão, que está dentro da primeira parte central Então, vou substituir T por esse botão por esse botão e vou mudar o Val. Primeiro, vou definir a opacidade como zero e vou definir a duração com a mesma duração Da opacidade zero, volta a um em 0,4 segundos Para confirmar se eu volto ao meu navegador e recarrego meu navegador, vamos ver, como você pode ver, ele desapareceu agora, mas até completar esta animação de parágrafo, ele executa a animação do botão Deixe-me te mostrar novamente. Então, como você notará, depois de completar a animação do parágrafo, instantaneamente, apareceu o botão. Agora, da mesma forma, precisamos animar essa imagem Então, vamos direcionar a imagem. Primeiro, vou duplicar esta seção e direcionar a imagem, como você pode ver, isso está no centro da segunda parte Vou digitar no centro da segunda parte da classe. Basicamente, eu tenho como alvo esse elemento dip e, a partir dele, quero direcionar a tag de imagem ING, image, e vou definir a opacidade zero e a duração Agora, caso contrário, vou fazer cinco. Agora, depois de configurar este arquivo, se eu voltar ao meu navegador e recarregar este, agora você pode perceber que ele chegou no final, mas eu não quero Chegou no final por causa dessa linha do tempo, mas eu não quero isso Eu quero executá-lo um pouco mais cedo. Por isso, se aplicarmos atraso a ele, se aplicarmos atraso na linha do tempo, isso travará o código Não podemos aplicar atrasos no cronograma. Para resolver o problema, em vez de usar o atraso, use um método. Depois de Carlress, vou fornecer uma vírgula. Então, dentro da rotação dentro do código, eu escrevo menos igual a, então vou especificar o segundo, 0,5 segundo Aqui eu especifico 0,5. Agora, o que isso significa? Normalmente, a animação na linha do tempo começa uma após a outra Usando esse método, podemos acionar essa animação específica mais cedo, antes da animação anterior na linha Em vez de 0,1, você pode usar 1 segundo e 2 segundos, o que quiser usar. Se eu definir esse arquivo e voltar ao meu navegador e reescrever minha página, agora você pode notar que ela começa mais cedo Esta imagem começa mais cedo em comparação com este botão. Agora, vou animar os logotipos. Para isso, novamente, volto ao código do Visa Studio e dupliquei essa seção . Desta vez, vou direcionar os registros Para segmentar os logotipos, vou usar o nome da classe dot logos e, a partir dos logotipos, vou segmentar todas as imagens, Img image Aqui, vou dizer opacidade, duração zero, 0,6 segundo e não quero executar essa animação antes de remover esta E a opacidade superior, aqui, eu vou dizer que é impressionante porque temos várias imagens nela Então você digita cambalear, cambalear, cambalear, e eu vou cambalear Em seguida, vou mover todo o logotipo dos YxS. Aqui eu vou definir o eixo. Do YxS, vou mover todo o elemento, 30 pixels. 30 semanas, só isso. Se eu definir esse arquivo e voltar ao meu navegador e recarregar minha página, agora você pode notar que primeiro ele executa a animação do vizinho, depois a animação de texto, depois a imagem e, depois disso, ele executa as animações baixas Veio do fundo, um após o outro. Se eu recarregá-lo novamente, você poderá notar, um após o outro, os logotipos vêm da parte inferior por causa desse gatilho Isso é tudo para este tutorial. Basicamente, neste tutorial, abordo apenas a animação da Seção 1. Quero dizer, animação da primeira página. Primeiro, abordamos a animação Nper, depois cobrimos a animação da posição central como centro um, Centro dois Depois disso, abordamos a animação dos logotipos. Na próxima parte deste tutorial, abordarei a animação da seção dois, como serviços, e isso levará algum tempo. Obrigado por assistir a este vídeo Style para nosso próximo tutorial. 30. Aplique o gatilho de rolagem aos serviços: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial para nossa animação SAP e, em nosso tutorial anterior, já implementamos a animação SAP em nossa primeira página. Se eu recarregar minha página, você poderá experimentar essa animação Agora, neste tutorial, vamos nos concentrar nesta segunda página, nesta seção de serviços. Além disso, vamos indexar o gatilho de rolagem nesta página. Então, sempre que eu rolar minha página, ela executará a animação. Então, vamos voltar ao código do estúdio. Então, como você pode ver, lado a lado, abro meu arquivo index dot timel e screen dot gs file No começo, vou interromper nossa animação de primeira página. Eu quero dizer essas animações. Para isso, vou definir uma função. Então, aqui, vou vincular a função, e o nome da nossa função é página um, página um. Então, dentro dos latões redondos e dentro do lirass dentro do liss, aqui vou colocar todo o código que criamos para a animação da Também a linha do tempo. Então eu vou copiar essa seção, a seção inteira, e o C vai cortar essa seção e eu vou colocá-la dentro dessa função. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora você pode notar que ele não executa a animação porque não chamamos nossa função Então, se eu chamar minha função, deixe-me mostrar, vou fechar essa função e vou chamar essa função. Para chamar essa função, basta digitar o nome da função, página um e semicon para finalizar essa linha Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar minha página, agora você pode vê-lo executar nossa função e executar as animações Agora vamos animar essa seção de serviços. Este texto e o parágrafo. Para isso, vamos ao código stu. Primeiro, precisamos focar nessa seção. Quero dizer que, dos serviços, precisamos direcionar a tag H. Para isso, vou digitar GSA, G, SAP dot from Então, dentro das rodadas, quero segmentar a seção de serviços, alguns tipos de serviços de pontos, espaço de serviços de pontos Dentro dos serviços, quero ter como alvo o elemento H três. Mas antes de trabalhar nesta seção, precisamos fazer algo em nosso arquivo CSS do estilizador, deixe-me mostrar a você Vou abrir meu arquivo CSS do estilizador e, a partir daqui, quero adicionar um estouro oculto em XXS Vou mirar no corpo da seção da carroceria dentro do recesso do carro, vou usar uma propriedade chamada overflow g. Vou ocultá-la e definir essa Depois de configurar esse arquivo, volto ao arquivo kryptogs Outra pergunta é por que eu uso o overflow X hidden? Porque se eu voltar ao meu navegador e Harry perceber a seção de texto vem da direção dos excessos Eu posso causar alguns problemas em nosso layout. Para evitar isso, usamos o overflow g escondido em nossa tag body Então, vamos voltar ao código novamente e vou mover esse elemento H do subtipo Y do eixo Y e do xs, vou movê-lo para baixo até 30 pixels Eu passo 30 vírgulas maiúsculas aqui e vou dizer opacidade, opacidade, zero Com zero opacidade, chega a um. Em seguida, vou definir a duração. Duração, vou usar 0,5 segundo e agora vou aplicar o gatilho de rolagem nele. Gatilho de rolagem. Como você sabe, já inserimos o link CDN do gatilho de rolagem em nossa página de estimativa Depois de inserir o arquivo sp dot Mings, importamos o link CDN Então, temos nosso próprio arquivo de script. Dentro desse gatilho de rolagem, primeiro , primeiro, vou acionar a seção de serviço. Esta seção, então digite trigger, trigger, e eu quero acionar esta seção. Depois do coma, precisamos definir esse scroller, algum tipo de scroller, scroller, e eu vou dizer scroller Sempre que rolamos nosso corpo, ele aciona o gatilho. Depois disso, vou definir os marcadores. Marcadores e eu vou torná-los verdadeiros. Depois disso, vou definir a posição inicial. Comece, comece do topo. No topo, quero selecionar 50%. Então, depois de configurar esse arquivo para definir esse arquivo, se eu voltar ao meu navegador e primeiro, vou parar essa animação. Então, vou comentar essa função, para que ela interrompa nossa animação da primeira página e, em seguida, volte ao navegador e refaça meu Mas antes de eu voltar ao meu navegador, aqui precisamos fornecer uma vírgula porque, caso contrário, ele colocará esse arquivo no topo , retornará ao meu navegador e recarregará minha página Aqui você pode observar a posição inicial do rolador e o rolador na posição E se eu abrir minha página, rolar minha página para baixo, agora você pode perceber que sempre que nosso elemento chegar à posição inicial de rolagem, ele acionará a animação. Sempre que ultrapassa o limite, como você pode ver, ele executa a animação Nosso gatilho de rolagem funciona muito bem. Agora, vamos voltar ao código. Agora vamos fazer a mesma coisa para o parágrafo, este parágrafo. Mas eu não vou copiar essa seção. Basicamente, vou criar uma linha do tempo e, dentro dessa linha do tempo, vou colocar esse gatilho de rolagem Deixe-me te mostrar como. Aqui, vou definir isso e nossa variável n é a linha do tempo dois, TL dois TL dois é igual à linha do tempo do GSA sap dot. Dentro dos vestidos redondos, dentro do Css. Primeiro, vou comentar esta seção, não preciso dela agora, aqui, vou criar esse gatilho de rolagem. Gatilho de rolagem de blocos. Então, dentro do Cress, aqui, vou acionar esta seção de serviços, esta seção, toda a seção serviços, esse elemento div Em seguida, vou definir o corpo do scroller. Depois disso, vou definir a posição inicial, começando pelos 50% superiores. Em seguida, vou definir a posição a partir do topo. Ou seja, de cima, vou mencionar a posição zero e também vou passar pelos marcadores Marcadores, marcadores, vou torná-los verdadeiros. Em seguida, vou definir uma sucata como CRUB. Scrap Eu vou definir dois, o Scrap two fornecerá efeito de suavidade de dois segundos entre essa posição de rolagem e a É por isso que eu uso essa opção. E ponto e vírgula dois nesta linha. Eu quero configurar esse arquivo. Agora, usando essa linha do tempo, vou rolar e acionar toda a seção Para isso, aqui, vou digitar Pal two, TL timeline two dot from method e , dentro do recesso redondo, vou iniciar a seção de serviços Desta vez, não vou selecionar os três elementos. Depois disso, dentro da lista vou definir a posição Então, a partir dos YXs, vou dizer 30. E eu vou definir a opacidade, opacidade zero. Vou definir a duração, duração, 0,5 segundo. Além disso, você pode evitá-lo, mas é bom hábito fornecer pouca duração. Eu coloquei esse arquivo se eu voltasse ao meu navegador e recarregasse esta página Agora, se eu rolar um pouco para baixo , não funciona porque cometi algum erro. Obviamente, cometi algum erro porque aqui precisamos acionar, não essa seção de serviços, precisamos acionar essa seção dois, essa. Aqui, vou direcionar a seção de pontos. Dois e eu vou configurar esse arquivo. Depois de configurar esse arquivo, dentro da seção dois, quero acionar os serviços. Depois de definir esse arquivo, se eu voltar ao meu navegador novamente e recarregar meu navegador, agora temos os marcadores Se eu rolar a página para baixo e sempre que esta seção atingir a posição inicial de rolagem, você poderá notar que ela executa a animação. E se eu rolar para baixo novamente, ele volta ao seu lugar original. Se eu rolar para baixo nesta página, agora você pode notar que o texto desapareceu novamente. Se eu remover a duração, deixe-me mostrar se eu recomendo esta linha, caso contrário, remova esta linha, eu não quero essa duração e defina esse arquivo, vamos voltar ao código novamente e recarregar esta página e fazer a mesma coisa Agora você pode ver instantaneamente que ela aparece. Agora você pode notar que ele é executado um pouco mais rápido do que o anterior, porque removemos a duração. Isso é tudo para este tutorial. Na próxima parte deste tutorial, trabalhando nessas caixas. Obrigado por assistir a este estádio em vídeo para nosso próximo tutorial. 31. Anime os elementos da caixa lado a lado: Olá, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado à animação GSP. E nessa seção, vamos trabalhar nessas caixas, nesses elementos. Em nosso tutorial de ph, aplicamos o trigger de rolagem em nosso texto de serviço. Então, sempre que rolamos minha página para baixo e em determinado ponto, ela executa a animação desse texto Agora vamos fazer a mesma coisa com nossas caixas. Primeiro, vou mover a primeira caixa do lado esquerdo e a segunda caixa do lado direito. E então eu vou fazer a mesma coisa para o terceiro e o quarto. Para animá-la com o gatilho de rolagem, vou atribuir novas classes a essa caixa para identificar a caixa Eu vou fazer isso deixar um, e isso é p dois, e este é um e este é escrever dois. Vamos voltar ao editor de código. Como você pode ver em nossa Seção dois, temos um continente profundo. Dentro deste continente profundo, temos um total de quatro elementos. Para o nosso primeiro elemento, vou atribuir a primeira volta ao nosso segundo elemento, vou atribuir um, escrever um. Então, para o nosso terceiro elemento, vou atribuir a segunda volta, laboratório dois, e para o nosso quarto elemento, vou atribuir a escrita dois. E eu vou definir esses cinco. Esse é o primeiro, esse é o único de nós. Essa é a segunda volta e essa é a segunda. Agora, vamos voltar ao arquivo JavaScript. Agora, dentro dessa linha do tempo, vou focar na primeira caixa Eu quero dizer a última. Vou digitar TL dois pontos a partir do método. Então, dentro dos vestidos redondos, dentro dos códigos duplos, vou mirar no elemento. Vou direcionar o elemento, este, digitar ponto N classe com classe, eu tenho outra classe, algum tipo ponto, levante um, um, fino apro coma, dentro do carlvss dentro da escultura aqui, eu quero mover este da direção XSS eu quero mover este Então, o tipo XX é do XSS, vou usar -300 pixels E eu vou dizer opacidade, opacidade , vou torná-lo zero, e vou definir esse arquivo Como você sabe, já configuramos o gatilho Crue em nossa linha do tempo, então não precisamos atribuir o gatilho Scrull várias Portanto, não preciso atribuir Scroll Tiger repetidamente. Então, depois de dois pontos repentinos, se eu definir esse arquivo, voltar ao meu navegador e recarregar minha página Agora, se eu rolar a página para baixo, agora você pode ver uma certa distância. Se eu rolar um pouco para baixo, você pode ver que o primeiro elemento veio do lado direito. Agora também vou fazer a mesma coisa o elemento profundo direito do lado oposto. Para isso, vamos voltar ao código, e eu vou selecionar este e duplicar este Depois disso, depois disso, vou selecionar o elemento div correto, às vezes pontuar à direita, Desta vez, vou mover esse elemento dos 300 pixels positivos. Veio do lado direito. Então, para configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora você pode ver que sempre que atingimos a certa distância, ele executa a animação Mas desta vez você pode notar que veio do lado direito, mas há um problema porque eu quero as duas animações juntas. Não quero demora entre eles. Por causa da linha do tempo, primeiro ele executa essa animação, depois executa essa animação lateral, mas eu os quero juntos. Basicamente, quero dizer que quero começar a animação ao mesmo tempo. Quero começar a animação ao mesmo tempo. Para resolver o problema, precisamos usá-lo. Deixe-me te mostrar como. Então Scalia diz, eu vou digitar, vou passar uma vírgula Então, dentro dos códigos duplos, eu vou passar uma etiqueta e você pode passar qualquer etiqueta. Você pode digitar qualquer coisa. Então, vou digitar a animação do Ning Anim. É o Ning One. Então eu vou fazer a mesma coisa para o elemento, o elemento caixa. Então, aqui, vou digitar a vírgula Ara, vou colar o código Agora você pode notar que as duas animações compartilham o mesmo rótulo. Isso significa que ele iniciará as duas animações ao mesmo tempo. Esse é o novo método. Basicamente, tento apresentar você e, se eu definir esse arquivo e executar o código no meu navegador, deixe-me mostrar se eu reescrevi meu navegador e depois reescrevi esse navegador, se eu rolei a página, agora você pode notar que as duas animações começam ao Então, ao mesmo tempo , veio da direção oposta. E precisamos fazer a mesma coisa os outros dois elementos. Então, vou duplicar essa seção, mas vou mudar o nome do rótulo Eu vou fazer esse anime Nim two, também esse em dois Agora, ambas as animações compartilhavam o mesmo rótulo, então elas serão executadas ao mesmo tempo. Além disso, precisamos alterar o nome do seletor. Desta vez, quero selecionar o laboratório dois e escrever e vou definir esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, agora você pode ver que sempre que eu alcanço a certa distância, ele executa a animação Mas a vantagem é que os dois elementos se movem juntos. Quero dizer que as duas animações são executadas ao mesmo tempo. Por causa dessa pista. Então, é isso para esta seção. E na próxima parte deste tutorial, eu vou animar a imagem dentro desta caixa e também vou animar o logotipo Então, sempre que eu passar meus carros sobre essa imagem, ela vai sacudir a imagem Além disso, sempre que eu passar o mouse sobre esse ícone, ele aumenta. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial.