Animação em Javascript: 9 projetos sem bibliotecas

1. Apresentação: Olá e bem-vindos a todos. Meu nome é Joan This Shortcard. Sou desenvolvedor web e instrutor on-line do Full Stack. Estou muito feliz que você se junte a mim nesta nova jornada pela pura animação em Javascript, onde a criatividade encontra o código e script simples dá vida às suas páginas da web Neste curso, estamos mergulhando em vários projetos práticos de animação usando nada além de JavaScript básico. Sem biblioteca, sem atalho, apenas puro poder de Javascript. Começaremos com efeitos visuais impressionantes, como animação de texto crescente e cabeçalhos animados coloridos. Em seguida, exploraremos experiências interativas, como rolagem paradoxal e animação em camadas de rolagem para tornar seu site verdadeiramente dinâmico Também criaremos elementos de interface de usuário divertidos e envolventes como olhos animados que seguem sua base de clipath do Kazar, transição e vários estilos de menu interativos, incluindo menus circulares, ação de alternância e o popular menu de alternância de nove pontos Mas isso não é tudo. Daremos vida à onda com animações ambientais como Blinking Star, night Mot Road Animation night Mot Road Animation até mesmo efeitos de texto ondulado Isso cativará seu visitante. Cada projeto é criado não apenas para aprimorar suas habilidades de animação na web, mas também para fortalecer sua compreensão básica do JavaScript, da manipulação de dom ao tratamento de eventos, da função de temporização à integração com CSS Ao final deste curso, você terá um poderoso portfólio de efeitos de animação em Java Script e uma base sólida para criar elementos web interativos e visualmente envolventes usando JavaScript. Você está pronto para transformar o código de estudo em uma animação viva. Vamos começar. 2. Animação de texto no Javascript com efeito brilhante, parte 1: Olá, pessoal, mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. Nesta lição em particular, vamos criar esse lindo efeito flutuante. Você pode ver quando passamos o mouse sobre esse texto, esses efeitos acontecem Como você pode notar, o texto brilha da esquerda para a direita. Além disso, você pode notar que todas as letras tinham cores diferentes. Quando eu o afasto, esse efeito de luz desaparece. Criaremos esse efeito usando DML, CSS e um pouco de JavaScript. Vamos começar a criar como podemos construir esse. Como você pode ver, lado a lado, abro meu código de estúdio Wizard aer e meu navegador usando extensão de servidor b e já crio um documento HTML chamado indexdt TM Com isso, eu já crio o arquivo CSS estilizado e vinculo esse arquivo a este documento Em seguida, também crio um arquivo Js de raiz de script. Por enquanto, nosso arquivo CSS e script de estilo e o arquivo Script DJs completamente vazios Primeiro, dentro da etiqueta corporal, vou pegar uma etiqueta H dois, H dois. Dentro dessa tag H two, Amuotype JavaScript, animação, essa, e então eu vou definir Depois de configurar esse arquivo, é assim que é obrigatório. Em seguida, vou atribuir uma classe à tag H two, para digitar class, e o nome da nossa classe é texto. E eu vou configurar esse arquivo. É esse arquivo, agora vamos pular para o estilo ou arquivo CSS. Primeiro, vou usar um seletor universal, estrela. Então, dentro do ali versus primeiro, vou definir margem, margem e preenchimento Margem, vou dizer margem zero para toda a direção. Então eu vou dizer acolchoamento. O preenchimento também é zero. Em seguida, vou definir o tamanho da caixa. Tamanho da caixa, vou torná-la caixa de borda. Em seguida, vou definir a família da fonte, a fonte, a família e vou usar a fonte aérea, área na qual vou definir esse arquivo Depois de definir esse arquivo, é assim que ele se parece. Em seguida, vou mirar na etiqueta corporal. Corpo, depois a propriedade calissF, vou usar display Esta peça, eu vou fazer com que ela se desfaça. Em seguida, justifique o centro de conteúdo. Também alinhe o centro do item. Na próxima propriedade, vou usar a altura mínima, altura mínima, e aqui vou definir a altura mínima, 100 v Vote height. Em seguida, vou definir a cor do plano de fundo. Cor de fundo, e aqui vou usar a cor de fundo, tem a tag 222, é uma cor cinza escuro Se eu definir esse arquivo, é assim que ele se parece. Em seguida, vou direcionar a tag H two, o cabeçalho para a tag, H dois dentro dos cálices. Primeiro, vou definir a posição da posição, vou torná-la relativa Em seguida, vou definir o tamanho da fonte, o tamanho da fonte e vou fazer com que seja de três valores M EM e, em seguida, vou transformar essas tomadas em maiúsculas para digitar texto, transformar maiúsculas digitar texto, transformar Depois disso, vou adicionar um pouco de espaçamento entre letras. Para isso, vou digitar o espaçamento posterior e vou usar o valor EM de 0,05 Em seguida, vou usar a propriedade cursor, cursor, e vou tornar o curs padrão. Depois disso, vou definir a fonte como oito. Vou digitar a fonte para oito e quero usar o mínimo de fondwd, então vou usar 500 e vou definir esse Depois de definir esse arquivo, ficou assim. Se eu aumentar um pouco o fundo, se eu fizer 700, vamos ver como ficou, acho que 700 é bom para ele Agora vamos para o arquivo JavaScript. Agora, o que fazer. Primeiro, precisamos separar todo o texto dessas palavras e colocá-lo em uma tag span. Cada caractere dessa palavra, precisamos colocá-lo em uma tag span. Então, mais tarde J, precisamos agir em uma tag span. E da mesma forma, precisamos agrupá-lo A em uma tag de extensão, depois a, depois C. É assim que vamos agrupar cada caractere desse texto em uma tag de extensão. Depois disso, vamos estilizar esse personagem, e vamos fazer isso usando JavaScript. Primeiro, vou selecionar o elemento H dois e vou armazená-lo em uma variável. Primeiro, vou definir uma variável AET Late e nossa variável n é texto Texto equivalente a aqui, vou usar um método dom chamado document Quis lector Ciector, então, dentro das rodadas está aqui, vou escolher o nome da classe Aqui, vou direcionar o nome da classe, nosso nome de classe é texto com pontos e semirredondo nesta linha Basicamente, aqui eu tenho como alvo essa tag H two, esse elemento H two usando seu nome de classe com a ajuda do Javascript Dom. Agora, precisamos embrulhar cada letra em uma etiqueta de extensão. Então, aqui, vou definir outra variável ALT e o nome da nossa variável é spans Extensões iguais ao texto, ensinadas em nosso texto, em nosso método de texto Agora, o que basicamente fazer em um texto? Basicamente, ele extrairá o texto dessa variável. Se eu imprimir essa variável no meu console, deixe-me mostrar algum tipo de log de pontos do console, log pontos do console dentro do Run Brass, vou passar os spans do nome da variável Depois de configurar esse arquivo, se eu te mostrar meu console no meu navegador, Ispatle Aqui você pode ver o texto, animação em JavaScript. Você extrai o texto usando o método de texto interno. Agora precisamos recuperar cada caractere, caso contrário, individualmente posteriormente, porque precisamos pegá-lo dentro de uma tag de extensão, e podemos fazer isso facilmente usando a função de velocidade Aqui eu digito dot split. Esse método. Então, dentro dos vestidos redondos e dentro da roupa redonda, quero dividir o texto por cada caractere É por isso que eu uso essa expressão regular. Basicamente, aqui passamos uma string vazia e é uma matriz escrita. Quem vai armazenar todos os personagens espiões nele. Se eu definir esse arquivo, como você pode ver, ele é escrito e está em matriz. Que armazenam cada personagem separadamente, animação em JavaScript. É uma técnica de expressão regular e, se eu passar um espaço , ela armazenará apenas dois itens de matriz, JavaScript e animação. Deixe-me te mostrar. A fornece espaço se eu definir esse arquivo, como você pode ver, desta vez ele é armazenado nesta matriz totalizando dois índices, JavaScript e animação. Vamos cuspir esse texto usando uma string vazia, não por espaço Então, configuramos esse arquivo, voltamos à posição anterior. Todos esses são elementos de matriz. Agora eu quero dar uma olhada nesse Ay. Para isso, você vai usar o método map. Depois da função de divisão, vou digitar o mapa de pontos Mthood aqui, precisamos passar o valor e o índice Para o valor como primeiro parâmetro, vou salvar a letra. Eu vou passar uma carta. Então eu vou passar, depois vou passar I I por índice. Basicamente, esse método examina a matriz e cria uma nova matriz. Lembre-se, aqui eu represento o número do índice. Se passarmos zero, então ele representará J. Se passarmos um, se passarmos um índice, ele representará A. Se passarmos dois, ele representará. É assim que funciona. Em seguida, dentro desse método de mapa, eu quero chamar uma função. Quero criar uma função, deixe-me mostrar aqui que vou usar a função de seta igual ao sinal de seta dentro do alias que diz: vou retornar. Retorne, e aqui vou usar o modelo literal. Aqui eu vou usar backticks. Dentro desses backticks, eu quero retornar uma tag span. Eu quero retornar uma tag span, span. Dentro da etiqueta de extensão, vou usar o cifrão e dentro dos escultores aqui, vou passar a letra, essas variáveis Essa variável. Eu copio a variável letra e vou colá-la aqui. Então, configuramos esse arquivo, como você pode ver, esse método de mapeamento percorre cada caractere e aqui colocamos cada caractere dentro dessa tag span. Aqui você pode ver que cada tag de span contém um caractere. E agora precisamos converter essa matriz em uma estimativa normal. Precisamos injetá-lo em nosso documento HTML. Para isso, vamos usar o método Join. Então, em todas as corridas aqui, vou usar a junção de pontos. Método de junção. Vou juntar todas as matrizes separadas vdus agora, se eu definir esse arquivo, você poderá ver o resultado diferente Agora você pode ver no meu console que é um único texto. Não é mais uma matriz. Basicamente, é uma string, e precisamos colocar essa string dentro do documento TML Basicamente, precisamos colocá-lo dentro da tag de cabeçalho. Para isso, como você pode ver, já direcionamos a tag de cabeçalho usando seu nome de classe e a armazenamos em uma variável chamada texto. Aqui vou digitar texto, texto com pontos, ponto interno, ML e igual a ela para fornecer o nome da variável chamada spans Agora, se eu definir esse arquivo e voltar para a seção de elementos, agora você pode ver dentro do elemento da tag HT, que temos várias tags de extensão para cada caractere. Então, aqui colocamos com sucesso cada caractere em uma tag span com a ajuda do JAScript Mas há um problema. Ele fornece vírgula entre todos os personagens. Precisamos resolver esse problema. Se eu te mostrar meu console, aqui você pode ver a vírgula Para isso, dentro da minha função de junção, vou juntá-la com um fluxo vazio e, em seguida, vou definir esse arquivo novamente. Depois de definir esse arquivo, como você pode ver, ele resolve o problema 3. Animação de texto no Javascript com efeito brilhante, parte 2: Agora vamos entrar novamente no arquivo CSS de estilo. Em seguida, vou selecionar essa caneta que está dentro da caneta H two, H two space pen. Então eu disse a propriedade ClivusSF , vou Colorido, e eu quero usar essa cor, Hastag 555, essa cor cinza claro, e vou configurar Depois de configurar esse arquivo, como você pode ver, ele mudou a cor. Ele mudou todas as cores dos personagens de uma só vez. Além disso, vou adicionar uma pequena transição, transição e caça em 0,25 segundos, essa quantidade de Então, abaixo dela, quando eu passo o mouse sobre isso, H dois, H dois, dois pontos, então eu quero carregar a extensão que abrange o calibre novamente, vou usar vou Pinte e eu vou usar essa Hashtag 00 FF two A, esse código de cores, essa cor verde clara Vou definir esse arquivo, configurar esse arquivo, se eu passar o mouse sobre ele, você pode ver o resultado, como é apenas a cor Então, para dar um efeito brilhante, vou usar sombra de texto Digite sombra de texto, esta. Aqui eu uso essa sombra suspensa e vou definir esse arquivo. Depois de configurar esse arquivo, nessa sombra projetada, se eu passar o mouse sobre esse link, você poderá ver esse lindo efeito de iluminação por causa dessa sombra Em seguida, adicionarei atraso de transição detalhado em nosso texto extenso. Para isso, precisamos entrar no arquivo Js com script e, aqui dentro da tag span, vou usar a tag style É um método de estilo embutido, igual às aspas duplas, vou usar a propriedade chamada transition Atraso na transição. Atraso na transição, então vou adicionar a cotação N de aspas duplas e dentro dela, aqui vou usar novamente aqui, novamente, vou usar o cifrão Então, dentro do CarlSSF eu vou passar o número do índice, que é I. Então eu vou multiplicar o número do índice 14 e vou definir esses cinco Depois de configurar esse arquivo, é assim que ele se parece. Opa, também é necessário definir a unidade. Aqui me passe o segundo MH. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu passar meus carros sobre esse texto, aqui você pode ver o belo efeito de transição por causa desse atraso na transição Para esse atraso de transição, aqui usamos o valor do índice. Com o índice, multiplicamos por 40. Toda vez que o primeiro índice for multiplicado por zero Em seguida, ele vai se multiplicar por um. Em seguida, ele vai se multiplicar Pois, ele vai se multiplicar por dois. F A, ele vai se multiplicar por três vezes 40. Então, ele retornará resultado diferente. Meu segundo resultado. Por causa desse atraso, ela criou essa bela transição. Você pode notar que nossas letras brilham uma após a outra. Em seguida, vamos mudar a cor de cada letra usando a propriedade de filtro CSS. Da mesma forma, dentro dos códigos duplos, adicionarei outra propriedade chamada filtro, filtro, dois pontos e usarei Huotd Value Hu para girar. Você gira. Dentro das rodadas, lá dentro eu vou usar o cifrão. Depois, dentro da civilha e depois dentro da caris, vou passar, indexar, multiplicar por 30, 30 graus Fora do tipo Cl versus Amil, una o EG. Depois de definir esse arquivo, se eu passar o cursor sobre esse elemento, você poderá ver um resultado diferente Você pode ver esse lindo texto colorido. Como você pode ver, cada personagem representa uma cor diferente. É feito com cores diferentes. É assim que podemos criar esse lindo efeito de animação de texto em faixa Java. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto Espero que você goste desse projeto. 4. Efeito paralaxe de sites - Parte 1: Hoje, vou criar esse lindo efeito de animação Paralex Como você pode ver, quando percorri minha página, ela moveu as montanhas e as folhas do mar Então, vamos ver como podemos criar esse lindo efeito de animação do Parlex com a ajuda de JavaScript, CSS e HTML Então, finalmente, estou no meu editor de código vis studio. Como você pode ver, eu já criei o arquivo TMLFle com pontos de índice, arquivo css com pontos de estilo e o script com o ponto JS five Além disso, você pode ver no meu diretório de trabalho atual que temos uma pasta chamada imagens dentro desta pasta, temos todas as imagens, como hell Image, Hill two, L four, Hill five, leaf e plant. Além disso, o coqueiro, esse. Essas são todas imagens PNG, e eu vou usar todas essas imagens para criar esse efeito paralítico Então, vamos para o ponto cinco do índice. Primeiro, dentro da etiqueta corporal, vou pegar outra etiqueta chamada headtag Então, dentro desse ataque na cabeça, primeiro, vou pegar um título para a tag H two, e aqui vou digitar Logo. Além disso, vou atribuir uma classe à tag H two, alguma classe de tipo, e também o nome da nossa classe é logotipo. Então, dentro desse ataque na cabeça, aqui, vou pegar uma etiqueta de soneca, etiqueta de navegação nervo e vou adicionar uma classe a essa etiqueta de soneca, classe, e vou digitar Então, dentro dessa etiqueta de soneca aqui, vou pegar a etiqueta âncora A. Em seguida, vou adicionar nosso primeiro elemento âncora, nosso elemento vizinho Então eu duplico esta seção e vou dar um nome a ela Além disso, vou duplicar esta seção e, desta vez, finalmente vou chamá-la de serviços, vou adicionar contato Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora temos o logotipo e a barra de navegação. Agora, vamos entrar no arquivo CSS e estilizar a seção do corpo. Estou no meu arquivo CSS. Primeiro, dentro do meu arquivo CSS de estilo, vou importar uma fonte. Vou importar a fonte do Google, que são pop-ins. Eu vou usar esse. Depois disso, aqui, vou selecionar o seletor universal, iniciar Então, dentro da aula aqui, vou adicionar um pouco de estadia Primeiro, vou adicionar margem. Margem, e eu vou definir a margem por padrão, vou definir a margem zero. Então eu vou usar o preenchimento. Preenchimento, por padrão, vou dizer preenchimento zero. Depois disso, vou usar o tamanho da caixa. Caixa. Dimensionamento, tamanho da caixa, caixa de borda Então eu vou usar a propriedade da família de fontes, família de fontes, e aqui, eu vou usar os PINs duplos Poppins P O, Poppins, este e apacoma aqui, e eu vou ultrapas San sim, este, e eu vou configurar este arquivo. Depois de definir este arquivo, se eu voltar ao meu navegador, agora você pode vê-lo remover a margem de preenchimento padrão, além de alterar a fonte, fonte padrão para fonte pop-ins Agora, vamos voltar ao código do estúdio Visual. Depois disso, dentro do arquivo CSS de estilo, vou selecionar a tag body, body. Então, dentro da primeira propriedade das calices , vou usar o plano de fundo Plano de fundo, e eu vou definir essa cor. HaTagff nove, se nove uma cor cinza claro. Então eu vou dizer altura mínima. Altura do homem, altura mínima, vou dizer que é 100 de altura da janela de visualização Em seguida, vou direcionar a tag de cabeçalho, essa, essa seção de cabeçalho. Então, copio o cabeçalho do nome da tag e aqui vou digitar o cabeçalho. Em seguida, dentro dos calibradores. E primeiro vou definir a posição da posição e quero torná-la absoluta. Depois disso, de cima, quero colocá-lo em zero e, da esquerda, também vou colocá-lo na posição zero. Em seguida, vou definir a largura. Eu vou definir com 100%. Vou usar 100% da largura desse tamanho de tela. Em seguida, vou definir o preenchimento. Preenchendo de cima para baixo, vou usar 30 pixels e para a esquerda e para a direita, vou usar 100 pixels Em seguida, vou usar essa propriedade, exibir flex e justificar o conteúdo, justificar o conteúdo Vou usar flex start, flex start e alinhar IAM, align, IAM center Também vou definir o índice Za e vou dizer índice Za 100, vou definir este. Aqui usamos o Flick Start porque eu quero o logotipo e a guerra de navegação no lado esquerdo da nossa tela É por isso que usamos flix Start para garantir que o cabeçalho fique visível, independentemente do elemento adicionado. Eu digo índice Z 100. Agora, depois de definir esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parece. Agora você pode notar que temos preenchimento na parte superior, 30 pixels e na parte inferior 30 pixels e, no final, aqui temos preenchimento de 100 pixels também da direita, cem Em seguida, vou estilizar esse logotipo, então vou segmentar esse logotipo. Agora vou focar no logotipo. Vou digitar o logotipo dot LOGO. Em seguida, dentro da classe Aqui, primeiro, vou definir o tamanho da fonte, o tamanho e vou chegar ao EM Depois disso, vou definir a cor. Pinte e aqui vou usar esse código de cores da variante vermelha, este, e vou configurar esse arquivo. Além disso, precisamos definir alguma margem à direita, algum tipo, margem direita, passagem de rebanho de 270 pixels porque eu preciso de um espaço entre o logotipo e os elementos da rede. Eu predefino esse arquivo Se eu voltar ao meu navegador, é assim que fica. Agora vamos direcionar o menu de navegação. Vamos voltar ao código e, primeiro, vou usar a navegação do nome da classe, então copio o nome da classe e volto ao arquivo stylo css Então digite, pontue, navegue e, dentro dessa navegação, eu quero direcionar todo o texto âncora dentro das calices Dentro das cores está a primeira propriedade em que vou usar decoração de texto, decoração texto, e vou fazer com que não seja nenhuma. Não quero nenhuma decoração de texto. Quero remover o sublinhado. Em seguida, precisamos definir a cor. Pinte aqui, vou usar exatamente a mesma cor, essa, que usamos para o logotipo, vermelho escuro. Em seguida, vou definir o preenchimento. Preenchimento de cima para baixo, vou usar preenchimento de seis pixels e da esquerda e direita, vou usar preenchimento de 15 pixels Depois disso, vou definir o raio da borda, o raio da borda Raio da borda, vou fazer 20 pixels. Além disso, vou adicionar uma pequena margem. Vou digitar margem. De cima para baixo, atribuirei Margem zero e, da esquerda e direita, atribuirei dez pixels a Marin Depois disso, vou adicionar uma pequena fonte a ela, a espessura da fonte, aqui vou atribuir uma fonte a ela 600. Eu quero uma fonte pequena em pedregulho e, finalmente, vou adicionar uma pequena transição a ela, transição, e aqui vou adicionar a duração da transição de 0,5 segundo Vou configurar esse arquivo. Depois de definir esse arquivo se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora eu quero adicionar Olá, quando eu passo meu cursor sobre a âncora que emite Quero alterar a cor da fonte e a cor do plano de fundo ao passar o mouse sobre ela Então, volte ao código e, desta vez, vou criar um seletor Huber usando o Ancat Então, dentro do clirass aqui, primeiro, vou mudar o plano de fundo, o plano de fundo Eu vou fazer o fundo dessa cor. E nossa fonte. Para a fonte, vou digitar a cor e vou torná-la branca. Eu vou satisfazer. Depois de verificar se eu voltar ao meu navegador e ao Huber meus carros estão nesses elementos negativos, você pode ver o resultado É assim que parece quando os carros I Hoberm estão nele. Dizia cor de fundo vermelha e cor da fonte branca. Agora vamos trabalhar nas imagens que usamos para criar o efeito de paralaxe Vamos entrar no código do estúdio. Como você pode ver no meu personagem de trabalho atual, temos as imagens do nome da pasta. Primeiro, vou pular para o arquivo de ponto de índice H. Em seguida, uma seção de cabeçalho, vou criar uma seção. Vou usar uma seção de tag de seção e, aqui, vou atribuir uma classe, e o nome da nossa classe é paralaxe Então, dentro desta tag de seção, primeiro, vou tirar uma foto. I G. E aqui, vou passar a fonte da imagem. Dentro dos códigos duplos, vou digitar o nome da pasta images e, a partir dessa pasta de imagens, primeiro, vou adicionar essa imagem, hill dot PNG. Em seguida, vou atribuir um ID de ID ao Hill e vou duplicar esta seção Uma por uma, adiciono todas as imagens da colina. E da mesma forma, adiciono três imagens de salto e planta. E eu vou configurar esse arquivo. Então, temos que somar oito imagens, cinco imagens de colinas, uma imagem de árvore, uma imagem de folha e a última é imagem de planta. Então, para configurar esse arquivo, se eu voltar ao meu navegador e você puder ver, esta é a nossa primeira imagem de colina. Esta é a nossa segunda imagem da colina, esta é a terceira, esta é a quarta, esta é a quinta, esta é a árvore. Esta é a folha, esta é a e esta é para as plantas. Precisamos juntar todas as imagens. Mas antes, também vou adicionar outra tag, que é H dois para o texto. Aqui vou digitar H two e dentro desse h2d vou digitar ParalyxParalyx Em seguida, vou atribuir ID a essa tag H two, ID, vou torná-la texto e vou definir esse arquivo. Agora, vamos pular para o bloco seu arquivo CSS e direcionar a paralaxe D. Aqui, vou direcionar o ponto D paralelo, paralexo e dentro dele, depois dentro das calibragens depois A primeira propriedade, vou usar a posição. Posição, vou torná-la relativa. Em seguida, vou usar a propriedade de exibição. Display, vou usar o Flix. Depois disso, vou justificar centro de conteúdo e alinhar os itens e alinhar os itens também Então eu vou atribuir altura, altura e aqui vou usar altura 100 VH. Depois de definir esse arquivo. Se eu voltar ao meu navegador, você pode vê-lo colocando todas as imagens próximas umas das outras. Agora vamos voltar ao código do estúdio. Em seguida, vou esconder a área de transbordamento. Estouro, está escondido. Depois disso, para dar a forma exata que queremos, precisamos selecionar as imagens que estão dentro da profundidade da paralaxe Aqui eu vou digitar dot parallax, imagem ING, então dentro do Carlss aqui, eu vou passar posição, posição, primeiro, vou Então eu vou adicionar o valor máximo, máximo, e vou passar de zero. Em seguida, vou usar o valor da cama. Como eu vou passar de zero. Depois disso, vou desafiar a umidade, e aqui vou colocar 100% de maconha Em seguida, vou definir o evento do ponteiro. Pointer events, aqui, vou usar Nun Valu. Nenhuma. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nossas imagens se parecem. Juntos, eles formam esse lindo fundo. Razão pela qual isso está acontecendo porque a imagem, toda a imagem, foi projetada apenas para essa finalidade. A resolução deles é a mesma. Essa é uma visualização dividida em várias imagens. Isso é tudo para este tutorial. Na próxima parte deste tutorial, concluiremos essa animação. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 5. Efeito paralaxe de sites, parte 2: Olá, é bom ver você de volta. Essa é a segunda parte deste tutorial. Como você pode ver na parte anterior, organizamos todas as imagens no lugar certo e criamos essa bela visão. Essa é uma visualização dividida em várias imagens. Agora, vamos trabalhar na tag H two. Vou entrar no editor de código do Visual Studio e, se eu mostrar meu arquivo estimado de índice, aqui você pode ver as duas tags, dois textos de ID. Vou usar o texto do nome de ID e vamos entrar nesse arquivo CSS de estilo. Aqui, primeiro, vou segmentar, vou segmentar o texto usando seu nome de ID. Então, dentro do ibas aqui primeiro, vou definir a posição, alguma posição de tipo, vou torná-la posição absoluta absoluta Depois disso, vou definir o tamanho da fonte, e aqui vou dizer o tamanho da fonte cinco EM. Em seguida, vou definir a cor, a cor do texto, cor e vou usar a cor branca, tem a tag if if A. Depois disso, vou usar uma pequena sombra de texto. Mas antes de usar essa sombra de texto, vamos voltar ao navegador. Suponha que esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece com o efeito Perlix Agora, vamos adicionar um pouco de sombra para dar um pouco de profundidade. Vamos voltar ao código do Studio e à sombra de texto do tipo Hem. Pegue a sombra, e eu vou usar essa sombra, e vou me contentar se eu voltar ao meu navegador, é assim que parecia Agora, ele fornece pouca morte neste texto. Agora, vamos adicionar a seção de conteúdo. Vamos entrar no código do Studio e entrar no arquivo de estimativa de pontos do índice. Depois desta seção, aqui, aqui, eu vou adicionar uma nova seção, Seção, depois dentro desta seção, mas antes eu vou adicionar uma classe, e eu vou chamá-la de conteúdo. Então, dentro desta tag de seção, primeiro, vou pegar uma tag H dois, H dois. Então, dentro dessa tag H two, tipo hemo, site de rolagem paralela Então eu vou pegar uma tag de parágrafo. Dentro dessa tag de parágrafo, vou pegar um texto fictício para rolar Eu preciso de conteúdo para rolar. Digite m Vou adicionar quase 750 palavras e vou definir esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador, e é assim que ele se parece. Agora, precisamos estilizar essa seção de conteúdo. Então, vamos adicionar alguns estudos. Vou entrar no coordenador do estúdio e vou usar open style ou CSS five. Vou começar a estilizar. Primeiro, vou ver a seção de conteúdo usando seu nome de classe dot content. Lá dentro da classe, primeiro, vou definir a posição e a posição, vou torná-las relativas. Depois disso, vou definir a cor de fundo, o plano de fundo e, para esse plano de fundo, vou usar exatamente a mesma cor vermelha, essa. Copie o código de cores e eu vou colocá-lo aqui. Depois disso, vou adicionar um pouco de preenchimento de todas as direções, preenchendo 100 pixels de todas as Depois de satisfazer se eu voltasse ao meu navegador, ficou assim. Acho que essa cor vermelha é muito vibrante, então vou tentar combinar com essa cor Vamos mudar o código de cores e desta vez vou usar essa cor. Algo corresponda a esse plano de fundo e volte ao meu navegador novamente. Agora, combina bastante com essa cor de fundo. E então precisamos mudar o texto. Precisamos organizar o texto. No início, vou segmentar essa tag de cabeçalho, então o Hemo digite dot content H two, header to tag Depois disso, dentro da coluna ResSF, vou definir o tamanho da fonte, o tamanho da fonte, vou usar três tamanhos de fonte EM Então eu vou definir a cor. Cor e cor do hemótipo branco. Hastag, se for. Então eu vou definir margem, margem na parte inferior. Na margem inferior, vou passar dez pixels. E vou ficar satisfeita Se eu voltar ao meu navegador, é assim que parece. Depois disso, precisamos estilizar essa seção de conteúdo. Para isso, novamente, vou entrar no arquivo CSS e, desta vez, vou segmentar o conteúdo de pontos do conteúdo e quero segmentar o parágrafo. Então, primeiro dentro das cores, vou definir o tamanho da fonte, o tamanho da fonte, vou usar o tamanho da fonte um EM depois disso, vou definir a cor do texto, cor, Hen para defini-la, branco, tem tag, tem tag, se for Finalmente, quero usar um telefone um pouco mais leve, então tenho três fontes, peso 300 Vou configurar esse arquivo. Depois de definir este, volto ao meu navegador. Agora é assim que parecia. Agora está melhor e temos conteúdo suficiente para rolar. Portanto, concluímos com sucesso nossa parte de estilização e agora precisamos trabalhar no efeito paralexo Para isso, precisamos entrar no arquivo JavaScript. Vamos entrar no arquivo JavaScript, script dot js. Em primeiro lugar, precisamos direcionar esses elementos. Eu quero dizer essas imagens, eu quero mover quando eu rolo para baixo na minha página. Para isso, vou declarar uma variável atraso e nosso primeiro nome de variável é texto, THT Primeiro, quero direcionar o texto usando o texto do nome de ID igual ao documento que obtém elemento por ID. Aqui vou passar o nome de identificação. Então, dentro dos vestidos redondos, vou passar o texto do nome de identificação e o semícone nesta linha Então, da mesma forma, vou mirar na Colina 4, na Colina 5 e na Colina 1. Além disso, vou mirar na folha. Vou copiar a folha do nome de ID e voltar para o arquivo JS do script. Vou duplicar essa linha e, desta vez, vou para a folha de destino e a armazeno nessa variável de folha e passo a folha do nome de ID Então eu vou mirar na Colina 1, Colina 4 e na Colina 5. Então, a partir daqui, vou mirar na Colina 1. Copie seu nome de ID e aquele para o arquivo Js do Scribb e eu dupliquei essa linha no total duas vezes Desta vez, vou mirar na Colina 1. Então eu vou mirar na Colina quatro, no inferno quatro, e também vou mudar o nome de identificação na Colina quatro e, finalmente, vou mirar na Colina cinco, H cinco. Não é a folha cinco, é uma colina cinco, então eu copio hell not leaf e substituo a folha por Hill. Portanto, direciono com sucesso os elementos que desejo mover ao rolar minha página para baixo, como este texto, a primeira colina e a quarta colina e a quinta colina, também a folha. Eu não quero selecionar esse coqueiro e isso e essas plantas. Não quero selecioná-los. Eu quero mover apenas a colina de fundo. Eu quero ver a primeira colina, a quarta colina e a quinta colina, também a folha e o texto. É por isso que eu seleciono todos eles e os armazeno em uma variável em diferentes variáveis. Esses são os elementos que eu quero animar. Agora vamos trabalhar no efeito. Então digite, Window, dot e até mesmo listener. Então, por dentro, o redondo diz, primeiro, eu quero rolar Se eu rolar, quero executar uma chamada para essa função. Aqui estou para usar a função de seta. Então, dentro do crass, basicamente significa que qualquer código que escrevemos dentro dessa chamada função, quando eu rolar, ele executará esse código Dentro dessa função, vou criar uma nova variável mais tarde e nossa variável está bem. Valor T igual ao henótipo e eu quero extrair o valor da rolagem Y, janela do tipo Su, e aqui precisamos extrair o valor da janela do tipo Scrolly, ponto, rolagem, Y e subterminar esta linha porque precisamos apenas da rolagem e subterminar esta linha Y xs, não da rolagem de Xs para executar o efeito de paralaxe Basicamente, vai exceder a distância vertical. Agora vamos trabalhar nos elementos que eu quero mudar. Agora, para obter o valor, primeiro eu quero mudar a posição do texto ao rolar minha página para baixo. Eu quero adicionar uma pequena margem. Eu quero adicionar uma margem no topo deste texto, para que ele se mova para baixo Para isso, vamos usar o método de estilo, deixe-me mostrar como. Então, digite o herói, primeiro, vou digitar o nome da variável. Que armazenou esse texto, W é texto, texto, ponto, estilo, ponto, eu quero adicionar o valor máximo da margem. Margem, no topo. Então, igual ao torque da margem, então eu vou atribuir um valor. Igual a aqui, eu vou passar. Basicamente, vou usar modelos literais. Vou usar carrapatos nas costas. Então, dentro dos ticks invertidos, vou usar o cifrão, depois dentro do Carlss, depois dentro do crass, primeiro, vou fornecer o valor, o valor que obtemos desse pergaminho, algum valor de tipo, e vou multiplicá-lo quero multiplicar por 2,5 Toda vez que eu rolar minha página para baixo, ela muda o valor e se multiplica por 2,5 pixels e, em seguida, fornece a unidade PX. É isso mesmo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e tentar rolar para baixo nesta página, aqui você pode ver o resultado. Sempre que eu rolo para baixo nesta página, como você pode ver, esse texto adiciona uma nova margem na parte superior. Da mesma forma, vamos mover outros elementos no lado esquerdo e no lado direito. Deixe-me te mostrar como. Vamos ao código do estúdio, e desta vez vou duplicar essa linha, e vou focar no estilo Folha, e desta vez, quero mover essa folha do topo Estilo tipo hemo, ponto, parte superior. Acima disso, aqui eu quero multiplicar -1,5 menos 115 pixels Aqui, eu quero fornecer um valor negativo. Então, quando eu rolar minha página para baixo, ela fornecerá o valor negativo, valor negativo dinâmico para essa propriedade superior. Da mesma forma, vou fazer essa linha e, desta vez, quero mover esse elemento da folha no lado do lábio, PT e aqui, vou passar o valor, vou passar o valor positivo. Vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador. Mas antes de adicionar algo legal, é necessário Caso contrário, ele pode gerar um erro. Então, de volta ao navegador, se eu rolar na minha página, aqui você pode ver, você pode notar a folha. Sempre que eu rolo minha página para baixo, ela fornece pouco efeito de afastamento. Como você pode notar, ele se afasta dessa costura porque aqui usamos menos o valor superior e o valor esquerdo positivo É por isso que ele se move para cima e para o lado esquerdo. Da mesma forma, precisamos lidar com a colina cinco, colina quatro e a colina um. Deixe-me te mostrar como. Vou duplicar essa linha e, desta vez, vou mirar na Colina 5 Eu quero mover esta colina de cinco elementos lado esquerdo e fornecer da mesma forma também. Vai se mover para a posição dos lábios. Então eu dupliquei essa linha, e desta vez vou mirar na Colina 4, e quero mover essa colina 4 na direção oposta Então, aqui eu vou usar negativo do, fim, a elevação negativa do, temos outro elemento que é a colina cinco e eu quero mover esse elemento para cima. É a colina de fundo. É por isso que eu quero movê-lo para o topo. Então, vou passar a propriedade superior, parte superior e aqui, vou alterar o valor. Vou usar apenas um pixel. Toda vez, de acordo com o valor dinâmico, ele se multiplica por um Opa, nossa colina de fundo não é a colina cinco, é a colina um, não cinco É o principal inferno terrestre. Então, depois de satisfazer, se eu voltar ao navegador novamente e rolar esta página, agora você pode notar esse lindo efeito de paralaxe Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 6. Olhos animados sigam o cursor do mouse: Olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação Javascript relacionada ao projeto. Hoje, neste projeto, vamos criar esses lindos olhos animados. Como você pode ver, quando eu Huber meus carros estão sobre esse elemento da carroceria, essa etiqueta de carroceria, segue os carros apontados Se eu mover os carros para cima, ele segue para cima se eu mover os carros em p, ele segue o lado da volta, também de baixo e também da direita Se eu colocar minha cor na face dessa Imoge, dá para ver que ela mudou a reação facial Também segue o cursor do mouse. Então, hoje, neste projeto, vamos criar esses lindos olhos animados, que seguirão o cursor do mouse. Então, vamos ver como podemos criá-lo. Vamos entrar no editor de código do Visor Studio. Como você pode ver, lado a lado, abro meu iter de código do Visual Studio e meu navegador usando a extensão lip server, e já crio um documento HTML chamado index dot TML Eu já vinculo esse documento HTML ao arquivo CSS, estilo dot CSS Primeiro, dentro da tag body, vou criar uma classe De Dev e o nome da nossa classe é phase. No começo, quero criar a fase. Então, dentro dessa tag profunda, vou criar outra classe D D. Nesta seção, vamos criar Is of our pace. Então, dentro desta seção, vamos criar dois Is DV Class I. Vou duplicar essa linha Então, fizemos com sucesso nossa parte estável. Primeiro, criamos uma tag para a fase. Então, dentro dessa tag anterior, criamos um bloco para Is e, em seguida, passamos para outra tag profunda para dois Is. Agora, vamos entrar na seção de estilo. No começo, vou pegar uma estrela seletora universal. Inicialmente, dentro do alorss, vou usar a propriedade de margem Margem zero. E então vou usar a propriedade de preenchimento, preenchimento zero e caixa de borda de tamanho de caixa Em seguida, vou marcar a etiqueta corporal , o corpo dentro do display flex da Caliss, o centro de conteúdo Justify Eu uso o flex container para alinhar o centro da face desta página Em seguida, vou usar a propriedade align item. Alinhe o centro de itens. Altura mínima, altura média. Cem VH. Quero usar toda a página da web. É por isso que eu uso 100 VH. E nossa última propriedade é o plano de fundo. Antecedentes. Para cor de fundo, vou usar RGV Value RGV para vermelho, vou usar oito E para verde, vou usar o valor 84. E para azul, vou usar 139. Se eu definir esse arquivo, você poderá ver a cor de fundo. Para este projeto, vou usar a cor de fundo azul escuro. E agora eu quero estilizar a parte do ritmo. Então, eu quero estilizar ponto, face dentro do recesso de Cali. Primeiro, vou usar a propriedade de posição, posição relativa, e nossa próxima propriedade é Largura, 300 pixels Também quero dizer altura, altura, 300 pixels também. Nossa próxima propriedade é o plano de fundo. Antecedentes. E mais uma vez, vou usar o valor RGV RGV para valor vermelho, vou usar 255 Para o valor verde, vou usar 198. E para o valor azul, vou usar 54. Se eu definir esse arquivo, você poderá ver a caixa quadrada na tela. E agora precisamos converter essa forma quadrada em uma forma redonda. Para isso, vou usar a propriedade border radius. Raio de borda de 50%. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou usar a propriedade de exibição. Tela flexível. Justifique o centro de conteúdo. Também vou usar o centro de propriedades do item Align. Ei, se você não está familiarizado com CSS Flexbox e ganância, você pode conferir meu curso de CSS responsivo Então, moldamos nosso rosto com sucesso. Agora precisamos colocar a boca nessa fase. Para isso, vou criar dois pontos Pasol, antes do seletor, antes Em seguida, insira a carissa como você já sabe. Primeiro, precisamos pegar uma propriedade em branco e o nome da nossa propriedade está contido Contido em branco, então nossa próxima propriedade é a posição. Posição absoluta. E então eu vou dizer altura e largura, largura, 150 pixels, altura, 70 pixels. E agora vou escolher a cor de fundo. Chocolate de fundo. Se eu definir esse arquivo, você pode ver uma retangular no meio dessa face E agora precisamos mover essa fase um pouco para baixo. Para isso, vou usar o valor máximo. 180 pixels superiores. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que nossa boca parece uma caixa quadrada e, para criar um formato de boca perfeito, precisamos usar a propriedade do raio da borda Em primeiro lugar, quero definir um raio de borda nesse canto. Para isso, vou usar o raio de elevação inferior da borda. Limite o raio de elevação da parte inferior, e eu vou usar 70 pixels Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, vou duplicar essa linha e substituir a esquerda por Se eu definir esse arquivo, aqui você pode vê-lo criar uma forma de sorriso, e agora eu quero mudar o movimento da boca quando abro o cursor sobre ele. Para isso, precisamos criar outro seletor. Deixe-me te mostrar. Ponto, rosto, cólon sobre, cólon antes. Dentro dos cálices, vou reutilizar esse valor e propriedade Vou copiar a propriedade e o valor. E cole aqui. Agora, um por um, vou substituir esses valores. Primeiro, vou alterar o valor máximo de 210 pixels. Se eu definir esse arquivo e Ober meus carros estiverem nele, você verá a diferença É mudar a posição da boca e, em seguida, vou mudar esse raio do bôer Raio zero do lábio inferior inferior. Além disso, o raio inferior direito da garrafa é zero. Se eu definir esse arquivo e colocar meu cursor nele, você pode ver a diferença, mas não há transição nessa transformação Para isso, precisamos usar a propriedade de transição. Então, aqui, vou digitar a transição. Transição de 0,5 segundo. Se eu definir esse arquivo e meus carros estiverem nele, você poderá ver o efeito de transição. Demora 0,5 segundos para concluir a transformação. Então, concluímos com sucesso nossa seção bucal. Vamos entrar na seção I. Como você pode ver, dentro do contêiner I, temos I. Então, vamos criar os Is desse ritmo. No início, vou estilizar a seção I como ponto Em seguida, dentro dos fígados está a posição relativa e quero posicioná-la no topo de -40 pixels Vou usar a propriedade display, display flex. Usando essa propriedade e valores, movemos com sucesso nossa seção I naquele local, não no meio dessa fase. E então precisamos criar o I. Vou selecionar a classe Is. Além disso, vou selecionar a classe I. Então, dentro do CalibraSso, a primeira propriedade é a posição. Posição relativa. E também vou dizer altura e largura para isso I Width, e ty pixel, heightetipixl Depois de largura e altura, vou dizer cor de fundo. Antecedentes. Por quê? Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, lado a lado, ele cria duas caixas quadradas com largura e altura típicas. E então eu vou usar essa propriedade de jogo, bloco de exibição. Em seguida, vou usar a propriedade border radius. Raio da borda, 50%. Se eu definir esse arquivo, você pode ver a diferença. Aqui você pode ver lado a lado, ele cria dois globos oculares, mas não há espaço entre dois globos oculares Então, para isso, vou usar a margem Bobbet Margin, zero e 15 pixels Se eu definir esse arquivo, você pode ver a diferença. No geral, esse valor de margem fornece 30 pixels de espaço entre esses dois olhos, e agora precisamos criar os globos oculares para esses olhos No começo, vou copiar essa linha. E eu vou colar aqui. Com I, vou usar antes do seletor, Cl e cólon Em seguida, insira o Cardiorss como você sabe, primeiro, precisamos criar um conteúdo em branco Contenha espaço em branco. Nossa próxima propriedade é a posição. Posição absoluta. Além disso, precisamos colocá-lo. Vou usar o melhor valor, os melhores 50%. Seja 25 pixels e, para nossos olhos, vou definir com 40 pixels Também tem altura de 40 pixels. Em seguida, vou usar a cor diground para nosso globo ocular, fundo e vou usar o valor RGV Argv, para verde, vou passar 42. Então, para o vermelho, vou passar de 42 mais uma vez. Também para azul, vou passar 42. Defina este arquivo, você pode ver o resultado. Como você pode ver, ele cria duas caixas quadradas cinza escuro, mas precisamos torná-las redondas. Então, vou usar o raio da borda O raio da borda 50%. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver nossos olhos olhando para baixo nesse ângulo, mas eu quero mudar o ângulo de visão dos olhos, algo nessa posição. Para isso, vou usar a propriedade transform, transform, translate -50% para XX também é -50% para Y xs. Se eu definir esse arquivo, você poderá ver o resultado. Agora é um loop nesse ângulo. Se eu mostrar minha cura nessa fase emocional, você pode ver a reação Mas as bolas de gelo não seguem a posição curva. Para isso, precisamos usar JavaScript. Então, concluímos com sucesso nossa parte de estilo. Na próxima parte deste vídeo, trabalharemos com JavaScript. Então, obrigado por assistir a este vídeo. Fique ligado na próxima parte. 7. Olhos animados siga o cursor do mouse adicionando javascript: Olá, pessoal, é bom ver vocês de volta. Esta é a segunda parte deste tutorial e, nessa seção, iniciaremos o JavaScript. Então, dentro da tag body, aqui, vou digitar a tag script. Roteiro. E dentro da tag de script aqui, primeiro, vou selecionar o corpo inteiro usando o seletor Qi Então, para digitar o seletor Qui de pontos do documento. Método selecionado. Então, dentro dos vestidos redondos, quero selecionar o corpo. Então, dentro do código único, eu sou do tipo BO BY body. E então eu quero organizar um evento. Então, para executar um evento, precisamos usar o método add event listener, algum tipo dot at event listener E dentro dos vestidos redondos, aqui, eu quero executar o mouse move Evet Dentro do código único, eu escrevo o movimento do mouse. Depois da vírgula, aqui, vou chamar uma função e o nome da nossa função é eyeball Em um globo ocular e semicone para a linha N. Agora, precisamos criar essa função eval. Mas a questão é: o que eu basicamente faço? Basicamente, aqui dissemos evento de movimentação do mouse em toda a página. Eu quero dizer o corpo. Quer dizer, sempre que eu mover meu Karsar dentro dessa etiqueta corporal, ele retornará a localização exata do CarSr, como xxS YxS, posição superior, posição correta, etc E toda vez que movermos o mouse dentro da etiqueta corporal, ele chamará essa função, essa função do globo ocular Agora precisamos criar a função. Aqui, vou declarar nome da função Ker usando a função Q, e o nome da nossa função é eyeball Como você pode ver, isso já me sugere porque eu chamo essa função, então digite I ball. Função e nosso nome de função é eyeball. Essa função vai lidar com a lógica do movimento I. Então, dentro dos portadores depois dentro dos carliras, vou declarar uma variável onde e nossa variável n é I EYE I igual a aqui, vou digitar o ponto do documento Então, dentro dos versos redondos, dentro do curso único, vou definir que esses dois tipos de Is Som são o nome da classe Vou segmentá-lo usando sua classe depois o tipo de música dot EYE e o semicroon two nesta linha Basicamente, ele selecionará os elementos que têm a classe I e, como você pode ver, temos dois elementos profundos com a classe I. Essa linha basicamente seleciona todos os elementos com a classe I e retorna em nós como uma matriz, armazenamos a matriz na variável I. Agora precisamos executar um loop. Precisamos executar um loop em cada um dos elementos I. Então, aqui, eu vou correr para cada loop. Eu ponho para cada um para cada um. Então, dentro da redonda novamente, vou chamar uma função Função e, dentro do recesso redondo que vou passar , aqui executamos um loop para cada um dos Em seguida, dentro dos cálices, precisamos calcular a posição central do elemento I. Em termos de XXs e YxS, XX significa horizontal e YX significa coordenadas verticais na tela Então, aqui, eu vou declarar uma variável. Primeiro, vou declarar um Tlate X. Isso é para Xxsvdu X, a posição I igual ao heterótipo dentro do motipo redondo I dot, e vou usar uma chamada de método get bounding client react e vou usar uma chamada de método get bounding client react. Digite get bounding client react. Então eu quero extrair o ponto de elevação iluminado com isso, eu quero concatenar com o interior dos versos redondos, eu pontuo a largura do cliente, divido por, e eu quero dividi-lo e eu quero dividi-lo Agora, o quotien é o que isso significa? Deixe-me explicar para você o que isso significa? O que eu basicamente faço aqui. Como eu disse, aqui, vamos calcular a posição central do elemento I. Primeiro, extraímos o X xs. Aqui declaramos uma variável chamada X e dentro do latão redondo, primeiro, aqui extraímos I dot, gate bounding client react Agora, a questão é: o que basicamente esse método de reação do cliente que delimita portas Ele fornece a posição e o tamanho do elemento, relacionados à janela de visualização Eu quero dizer a janela do navegador. É um objeto escrito como este, 100 na primeira posição 200 com 50, altura, 50, etc Aqui extraímos, basicamente aqui extraímos a borda final de um elemento I, essa borda. Em seguida, continuamos com a largura do cliente em 1 ponto dividida por dois. Agora, o que isso significa? A largura do cliente retorna a largura interna do elemento. Esse método retorna a largura interna desse elemento. Suponha que se o I tiver 50 pixels de largura , ele retornará ao cliente com 50. Então eu divido essa largura de 50 pixels por dois. Eu vou devolver 25. Quero dizer, isso lhe dará a posição central horizontal. Aumente a largura, forneça a posição central horizontal desse I, desse ponto Se você contatenar os dois valores, esquerda H e a metade da largura, ele retornará o centro horizontal da linha de Da mesma forma, precisamos extrair o centro vertical. Eu dupliquei esta seção desta vez, quero mudar a variável, vou torná-la Y. É para YxS para direção vertical E em vez de usar o valor do laboratório, vou usar o valor superior, o valor superior e agora temos o valor superior e a metade da largura e ele retornará o centro vertical do I. A conclusão principal é que X e Y juntos fornecem o cliente x e o cliente para I do elemento I. E essas duas coordenadas são usadas para calcular o ângulo do I até o mouse, que possamos girar o I na direção do tapete Então, agora temos a posição central disso I. Em seguida, precisamos calcular. Precisamos calcular o ângulo entre o mouse e o I. Para isso, precisamos usar o método matemático. Então, aqui, vou declarar uma variável LET tardia e nossa variável é radiana porque vamos extrair o valor radiante Radiano igual ao coração. Ei, vou usar um método chamado math dot, e amotipia em dois Em seguida, dentro do rounderse uma posição de pageY do motpevent. Evento, página Y, posição Y, menos YxS e Da mesma forma, precisamos extrair o X xs. Evento, ponto, página x, página x menos Xs Agora deixe-me explicar essa linha. O que basicamente fazemos aqui. Como eu disse, essa linha calcula o ângulo entre o centro do I e o ponteiro do mouse Agora a pergunta é: o que é matemática em dois? É uma função JavaScript inédita. É escrito o ângulo entre o Xs positivo e o ponto, como XY, e retorna o ângulo em valor radiante É útil encontrar a direção de um ponto a outro, manipulando todos os administradores corretamente. Nesse caso, estamos encontrando o ângulo do centro do I até o ponteiro do mouse Então esse é o ponteiro do mouse e esse é o centro do I. Então, precisamos extrair o ângulo, esse ângulo E aqui fizemos uma elemística. Primeiro, precisamos trabalhar no X xs vdu. Então precisamos trabalhar no YX d y. Aqui, precisamos passar esses dois parâmetros Agora, o que isso significa? O que é o pH do evento menos X? Significa a que distância o mouse está da horizontal I na direção horizontal, e esta representa a distância que o mouse está da vertical I. Vai representar a direção vertical. Basicamente, este retorna valor Delta X e este retorna o valor Delta Y. Sei que parece muito técnico, mas esse cálculo nos dá o resultado. Agora, a questão é por que calculamos isso? Usamos o ângulo para girar o I para que ele aponte para o cursor do mouse Agora precisamos converter esse valor radiante em valor de grau porque, em nosso estilo, precisamos aplicar o valor de grau, não o radiante Aqui, vou declarar outra variável AET atrasada e nome da nossa variável é raiz T. Raiz tardia significa rotação Dentro das rodadas, primeiro, vou passar o radiano Multiplique o radiano com o interior das rodadas, 180 dividido pelo ponto matemático Dot Pi. Então eu vou fechar o latão redondo e aqui eu vou digitar, eu quero multiplicar com, eu quero multiplicar com Então eu vou fechar o latão redondo. Então, fora e depois fora do processo redondo, vou adicionar mais, vou congnatar com 270 e semicon para finalizar Essa linha converte o ângulo de radiante em valor de grau. Depois disso, ele ajusta a rotação para fazer com que o I aponte corretamente para as mães Basicamente, aqui usamos uma fórmula. Grau igual ao brilho, multiplique por 180 por Pi Então é isso que fazemos aqui. Depois disso, multiplicamos por menos um. Multiplique o ângulo por menos um para inverter a direção. Aqui, invertemos a direção. Isso é necessário porque o sistema de coordenadas da tela é varrido verticalmente em comparação com o armazenamento de coordenadas matemáticas padrão Sem isso, o I poderia girar na direção errada e, em seguida, adicionamos 70, adicionamos 70 graus para alinhar o ponto inicial de rotação com o topo Agora, a questão é por que usamos 270? Por que usamos esse vedo? Podemos usar qualquer coisa, mas por quê? Porque no CSS, zero grau está voltado para a direita, 90 graus está voltado para baixo, 180 graus está voltado para o elevador e 270 graus está voltado para o elevador. Isso garantirá que as direções I comecem do topo e girem corretamente. Primeiro, convertemos o brilho em graus. Em seguida, invertemos a direção usando multiplicar menos um. Em seguida, invertemos a direção para uma rotação visual escura. Por fim, alinhamos a rotação com o padrão voltado para cima do I. Eu sei que parece muito técnico Agora temos o valor de rotação I. Se você quiser imprimir esse valor em seu console, você pode, mas não vou imprimi-lo aqui. Em seguida, vou aplicar esse valor de rotação ao nosso elemento I usando o método de estilo. Deixe-me te mostrar como. Aqui, nossa variável de tipo I, ponto , estilo, ponto e eu quero aplicar a propriedade de transformação. Transforme, igual a aqui, sou do tipo. Dentro dos códigos duplos, vou passar uma string. Dentro do código duplo, vou digitar girar, girar Então, dentro da grama redonda, novamente, vou usar códigos duplos e dentro da grama dupla porque vou digitar espaço, concatenar com aqui vou passar EG e semicoronta nesta linha. E eu vou configurar esse arquivo. Agora eu pressiono definir este arquivo. Se eu passar o cursor sobre essa seção do corpo, agora você pode vê-la seguindo o cursor, os globos oculares seguindo o ponteiro do cursor Então é assim que podemos obter olhos animados seguindo o cursor do mouse se for essa animação. Então, espero que agora esteja claro para você, obrigado por assistir a este vídeo do próximo projeto do SaduneFW 8. Animação de texto colorido: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo projeto de animação em JavaScript. E neste tutorial, vamos criar um efeito de cor de texto bonito e muito legal com animação CSS e Javascript. Aqui você pode notar que a cor das letras muda aleatoriamente e também está piscando Vamos gerar uma duração de animação aleatória. Além disso, atrasa a animação para criar esse efeito. Então, vamos entrar no editor de código do estúdio de resultados e ver como podemos fazer isso Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já criei um documento HTML chamado index dot HTML. Então, primeiro, dentro da tag body, aqui, vou pegar o Htag HT Element, este, título dois, e vou atribuir uma classe e vou atribuir um texto Depois disso, dentro dessa tag H two, vou digitar um texto colorido. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o sabor no meu documento. Em seguida, vou entrar no arquivo CSS de estilo. Primeiro, vou usar a estrela seletora universal e, em seguida, dentro dos aliases, primeiro, vou atribuir a mesclagem a esta página, margem de toda a direção, vou usar zero Em seguida, vou atribuir preenchimento, preenchimento e vou definir o valor do preenchimento também zero em toda a direção Em seguida, vou usar o tamanho da caixa. Vou usar o valor da caixa de garrafas. Depois disso, vou usar a família de fontes. Fonte. Família, aqui vou usar fonte aérea, área em que vou configurar este arquivo Depois de definir esse arquivo, você pode ver o resultado. Então eu vou estilizar a seção do corpo, corpo. Então, dentro do Cali , ele diz: primeiro, vou definir display, display e quero torná-lo flexível Depois disso, vou atribuir justificar o conteúdo, justificar o centro de conteúdo e alinhar o centro Nós o usamos porque precisamos alinhar esse elemento vertical e horizontalmente Depois de definir esse arquivo, você pode ver o resultado. Agora está no centro horizontal, mas se fornecermos a altura mínima, a altura média, se eu definir a altura da janela de visualização de 100 e definir esse arquivo, você poderá ver Agora você pode vê-lo horizontal e verticalmente no centro desta página Em seguida, vou selecionar H two tat usando seu nome de tag H two. Então, dentro da propriedade Kali versus primeira, vou usar a posição e quero usar a posição relativa Depois disso, vou usar o tamanho da fonte, e aqui vou usar o tamanho da fonte três EM. Então eu vou usar o espaçamento entre letras do Ppertico mais tarde, e eu quero usar o espaçamento entre letras, 0,2 e 5:00 A.M. E então eu vou usar texto, propriedade de transformação, transformação de texto, eu quero torná-lo eu Depois disso, quero definir fontut. Quero usar a espessura da fonte do tipo de fonte um pouco mais ousada. Eu quero definir 500. Em seguida, vou definir a cor, a cor desse texto, a cor desse texto, algum tipo de cor. E aqui eu quero usar um tipo de cor cinza escuro. Então, vou usar a tag de hass F se for duas. Vou configurar esse arquivo. Depois de definir esse arquivo, ele fica pouco visível por causa da minha cor de fundo, pois não defino nenhuma cor de fundo. Se eu usar uma cor de fundo escura, deixe-me mostrar o plano de fundo. Vou definir a hashtag 222, fundo cinza escuro Se eu definir isso para, você poderá ver o resultado. Fizemos nossa parte de estilo CSS. Agora precisamos entrar no script dot js five. Agora precisamos colocar todo o caractere de texto dentro desse Pantag Primeiro, vou declarar uma variável, que selecionará o elemento H dois usando o nome da classe, algum tipo t, e o nome da nossa variável é texto Texto atrasado igual ao documento, seletor CID, seletor CID, dentro dos latões redondos, dentro dos códigos únicos, eu quero selecionar a tag H two usando seu nome de classe dot TXT, texto Em seguida, vou selecionar o texto interno dessa variável. Aqui, vou digitar outra variável. Vou declarar LET tardiamente e nossa variável é HTML HTML, span spans, TML spans iguais a texto, ponto, ML interno DML e semi Agora, se eu definir esse arquivo e imprimir no meu console, algum tipo console, log de pontos dentro do processo redondo, se eu imprimir essa variável de extensão HTML, extensão HTML e, em seguida, definir esse arquivo e se eu mostrar meu console, inspecionar, console, aqui você pode vê-lo imprimir texto colorido Agora temos o texto inerte desse T eliminado. E agora eu quero selecionar todas as letras. Então, aqui vou usar o método dot speak. Cuspir. E dentro das rosas redondas aqui, vou usar um barbante vazio. Eu quero cuspir usando uma corda vazia e Semgrodon para terminar esta uma corda vazia e Semgrodon para terminar Depois de configurar este arquivo, aqui você pode ver no meu console, agora temos que contar 13 caracteres, incluindo um espaço. Agora é criar uma matriz, e todos esses são elementos da matriz. E então eu quero criar uma nova matriz, que pode envolver cada letra dentro de uma tag de extensão. E para criá-lo, vamos usar o método. Então, para digitar um mapa de pontos. Então, dentro desse método de mapa, precisamos passar para o parâmetro. O primeiro parâmetro que eu quero passar depois. O segundo parâmetro, eu quero passar index e I significa index. Depois disso, aqui, vou usar a função de seta igual à seta. Então eu vou usar o Ciss. Então, dentro dos versos de Cali, eu quero voltar, voltar Em seguida, vou usar esse tick um método de string de modelo. Então, dentro dos acentos cravos aqui, vou usar a tag span, span seguida, fechar a tag span E aqui, eu vou usar o cifrão. Então, dentro dos aliases, vou passar a variável letra Vou chamar essa letra de letra variável. Então, vou colocar todas as letras uma a uma dentro dessa caneta com a ajuda dessa função e método de mapeamento. Agora, estou fechando esta linha, se eu definir esse arquivo, você pode ver no meu console, Harry, criar uma nova área. Mas você pode notar que agora colocamos todo o caractere dentro de uma tag span. Em seguida, precisamos converter essa matriz em string regular porque precisamos inseri-la em nossa página Eval, e faremos isso usando o método join. Então, aqui para não se juntar. Então, dentro das redondas, você precisa passar uma corda vazia como Agora, depois de definir esse arquivo, como você pode ver, agora ele se converte em uma string E está pronto para ser inserido em nossa página de estimativas. Agora eu quero colocar essas extensões de ESTiml dentro deste texto. Para isso, aqui vou digitar texto e quero definir o EstiML interno tipo de ponto DML interno igual a aqui vou passar o nome da variável HTML span e subcon para Agora, se eu salvar esse arquivo e voltar para a seção de elementos e abrir essas duas tags, agora você pode ver que temos tags de extensão e eu coloco todos os caracteres dentro das tags de extensão. Ele basicamente inspecionará essa tag span usando JavaScript. Não usamos nenhum trabalho do ESTiml. Agora vamos ao CSS para trabalhar na animação. Para definir esse arquivo, vou pular para esse bloco ou arquivo CSS. Primeiro, aqui, vou criar o quadro-chave. Vou digitar no quadro-chave de taxa. Esse é o quadro-chave de animação e nosso nome de animação é texto animado. Depois, na aula com 0% de duração, 0%. E vírgula com 20% de duração da animação. Eu quero dizer cor, cor, eu quero dizer colorido. Eu quero dizer a mesma cor, essa, essa cor cinza escuro. Depois disso, vou duplicar esta seção, depois com 21% de duração e 79% de duração Eu quero usar a cor verde. Vou usar a tag has zero F zero. E então eu recebo esta seção e com 80% de duração, 80% e 100% de duração da animação, novamente, eu quero usar essa cor de fundo escura. Este, e eu vou submeter este arquivo. Em seguida, tenho que colocar essa tag span, que está dentro da tag two do tipo two span Então, primeiro dentro do caribrass, vou definir a posição e quero torná-la relativa Depois disso, depois disso, quero definir animação, animação e o nome da animação é texto de animação, este. Eu copio o nome da animação e o coloco aqui. Depois disso, precisamos definir a duração e eu vou defini-la em 1 segundo, e então precisamos definir a direção linear da animação e a contagem de animação em voo Agora, para configurar esse arquivo, você pode ver a animação em cor verde. E agora eu quero adicionar duração de animação diferente para cada uma das letras e quero valores aleatórios. Então, se eu recarregar minha página toda vez, você retornará um resultado diferente Para isso, precisamos pular para a pilha de pontos do script Jas, e aqui dentro deste Pantag eu vou aplicar a propriedade de estilo Estilo. Estilo igual a e aqui dentro do curso duplo, quero definir a propriedade de duração da animação. Animação, duração. Duração da animação. Aqui, vou usar dentro das calibrases. Vou usar valores aleatórios, então vou usar a função matemática. Matemática matemática, pontos matemáticos aleatórios. Essa. Depois disso, depois de usar os pontos matemáticos aleatórios, quero multiplicar por Vou usar o sinal de multiplicação com cinco pontos. Toda vez que ele retornará um resultado diferente, um valor de duração diferente. Depois disso, precisamos usar for second porque precisamos fornecer o valor da duração em segundos. Depois de definir esse arquivo, agora depois de definir esse arquivo, você pode ver o crescimento aleatório dos caracteres, um por um Não sabemos qual deles vai fazer. Agora vamos mudar a cor do texto. Para isso, vou usar a propriedade de filtro. Depois de llicolin, vou usar o alimentador de propriedades de filtro, dois pontos, e aqui quero usar o valor Hu, HUE, Hu, cache, rotação Hotate dentro do pincel redondo aqui, eu vou usar o cifrão e dentro das maldições, eu quero multiplicar o índice significa que eu multiplico Vou enviar o arquivo 50 e também para passar e também na unidade de aprovação o grau BEG, 50 graus. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Depois de perseguir o valor do U lod, é assim que nossas cores se parecem Agora, o texto está piscando com cores diferentes aleatórias. Espero que agora você saiba como funciona a animação de texto piscando Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto de animação em JavaScript 9. Animação de clippath usando JavaScript Parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. E hoje, neste projeto, vamos criar essa linda animação de texto em rolagem. Então, como você pode ver, quando eu rolei minha página para baixo, caso contrário, role para cima nesta página, você pode ver que aumentou o raio do círculo Tivemos que rolar dois círculos em dois cantos no canto superior esquerdo e no canto inferior direito. É um efeito de animação de caminho chave com JavaScript. No início, temos o grande título central desta página e, quando você rola para baixo nesta página, esses dois círculos ficam maiores e se sobrepõem ao texto Agora você pode ver na área sobreposta, temos o traçado do texto Ele cobriu o teste com traço e criou esse lindo efeito. Isso é o que vamos construir hoje neste projeto. Vamos entrar no código io do estúdio de resultados. Então, finalmente, estou no editor de código do meu estúdio sul. E como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo scrip dot js e o arquivo CSS de estilo E agora vou vincular isso a um arquivo com este documento. Primeiro, vou vincular o estilete CSS ao tipo de arquivo Link. Dentro dessa tag de link, vou passar o estilo dot css. Então, dentro da tag body aqui, vou usar o script Scripg E como fonte aqui, vou passar o script dot js, este, e vou submeter esse arquivo Então, dentro da etiqueta corporal aqui, vou pegar uma etiqueta de seção. Seção, essa. Dentro desta tag de seção, primeiro, vou pegar uma tag H two, H two e um pergaminho do tipo herald Depois disso, vou usar a tag profunda para dois círculos, algum tipo D, e nessa tag profunda, vou atribuir um círculo de classe à classe Então eu duplico essa etiqueta de mergulho. Agora temos um total de duas etiquetas profundas para dois círculos. Basicamente, vou chamá-lo círculo um e este é círculo dois. Então eu vou colocar essa pilha. Agora, vamos pular para esse bloco ou pilha CSS. No início, vou selecionar o início do seletor universal e depois o interior do surge Primeiro, vou atribuir margem. Eu vou dizer margem zero de todas as direções. Então eu vou dizer acolchoamento. Preenchimento, em toda a direção, vou atribuir zero. Em seguida, vou atribuir o tamanho da caixa. Tamanho da caixa, aqui vou usar a probidade da Border Box, valor da caixa da garrafa Depois disso, vou atribuir o valor da fonte e vou usar a área de fonte aérea Depois disso, vou selecionar a tag body. Corpo. Eu vou estilizar este. Então, dentro dessa etiqueta corporal, vou atribuir a altura. Vou atribuir altura mínima, altura mínima, aqui, vou atribuir até 200 VHt de altura Depois disso, aqui, vou selecionar a tag da seção. Agora, dentro da tag de seção, primeiro, vou definir a posição superior a partir do topo, vou atribuir zero à esquerda. Como eu, atribuiria zero. Vamos começar nossa tag de seção partir deste canto, no canto do laptop. Em seguida, vou definir a altura e aqui vou definir a altura da janela de visualização de 100 V. Em seguida, vou definir a cor de fundo do plano de e quero usar um fundo cinza escuro escuro Então, vou digitar tem tag 333. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu abrir meu navegador, é assim que ele fica. Aqui você pode observar essa barra de rolagem porque aqui atribuímos a altura da janela de visualização de 200 VH à nossa etiqueta corporal É por isso que temos essa barra de rolagem. Esta é a nossa etiqueta de seção, cuja altura é 100 VH. Agora você pode notar que, quando eu rolo minha página, nossa tag de seção sobe, mas eu não a quero Quero fixar esse elemento de seção naquele local, para isso, vou usar posição, posição e quero usar posição fixa. Agora, para definir a posição, também vou definir molhado. Vou digitar nós e aqui vou usar 100% úmido e cem por cento. Vou configurar esse arquivo. Agora eu configuro esse arquivo se eu voltar ao meu navegador e se eu tentar rolar para baixo nesta página, sim, podemos rolar, mas nossa tag de seção foi fixada nessa posição. E é isso que queremos. Agora, vamos voltar ao código do estúdio inter novamente. Em seguida, vou carregar a tag H two, a tag H two, que está dentro desta tag de seção Depois disso, vou digitar espaço, vou digitar H dois, depois dentro do carro vis, primeiro, vou definir a posição. Posição, vou torná-la absoluta. Depois disso, vou definir para, para e aqui vou atribuir o valor de 50%. Em seguida, vou definir a propriedade de transformação, transformar e aqui, vou usar transformar traduzir traduzir Y, traduzir Y -50 per Depois disso, vou definir W W 100 pers. Em seguida, vou alinhar o texto, Sletypetext, align Depois disso, vou definir o tamanho da fonte. Tamanho da fonte, e eu quero fazer isso. Quero chegar às 18:00 da manhã. E, finalmente, vou definir a cor, a cor dessa fonte, a cor, e quero a cor branca Para isso, vou digitar has tag if if if. Vou configurar esse arquivo. Eu configuro este arquivo se eu voltar ao meu navegador É assim que parecia. Vamos reduzir um pouco o tamanho. Parece muito grande. Então eu vou fazer com que seja 17 Em. Vou configurar esse arquivo novamente. Em seguida, vou trabalhar neste primeiro círculo. Vou selecionar o círculo um, dentro do carro Libs. Primeiro, vou definir a posição, posição e quero torná-la absoluta Depois disso, vou definir a largura Largura, aqui vou usar 100% de largura, 100%. Então eu vou definir altura, altura também 100%. E a seguir, vou definir a cor do plano de fundo, o plano de fundo. E para a cor de fundo, vou usar um tipo de cor verde variante tipo 22e, 760 Esta variante de cor verde. Mas antes que eu satisfaça, precisamos corrigi-lo. É uma classe, então você quer usar o ponto, e eu vou satisfazer. Depois de satisfeito, se eu voltar ao meu navegador, aqui você pode ver o elemento verde Você pode ver o elemento verde acima da tag da seção. Estou cobrindo toda a tag da seção. E agora eu quero recortar esse fundo verde. Quero mostrar apenas o círculo no canto superior do lábio. Para isso, vamos voltar ao código do Visual Studio e, desta vez, vou usar a chamada de propriedade clip path clip path Então aqui eu quero criar um círculo, algum tipo de círculo. Primeiro, vou definir o raio, que é de 150 pixels de ph, e quero colocá-lo em zero a partir de cima e, da esquerda, também zero Agora, depois de definir esse arquivo, se eu voltar ao meu navegador, é assim que nosso círculo se parece. Desenhe este diagrama com um círculo. Agora vou fazer a mesma coisa o círculo inferior direito. Para isso, vou duplicar esta seção e, desta vez, vou selecionar o círculo dois Além disso, vou mudar a posição desse círculo. Primeiro, vou mudar a posição. Eu vou fazer isso de 100% a 100%. Depois disso, vou mudar a cor do plano de fundo. Vou fazer com que seja um B seis, dois E. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu voltar ao meu navegador, é aqui que colocamos o segundo círculo. Basicamente, aqui recortamos o fundo profundo do segundo círculo e criamos esse círculo teta nesse ritmo Agora temos o círculo laranja no canto inferior direito. Basicamente, aqui recortamos o fundo do segundo círculo e o testamos nessa posição. Agora, quero aumentar o tamanho desse círculo ao rolar até esta página Para isso, precisamos entrar no JavaScript. Vamos voltar ao código do estúdio novamente e entrar no arquivo script dot js 10. Animação de clippath usando JavaScript Parte 2: E aqui vamos começar com a segmentação desse círculo Primeiro, vou declarar uma variável atrasada e nossa variável é o círculo um Circule um igual a, vou passar o ponto do documento ou o seletor Escolha o seletor dentro das bases redondas dentro de um único percurso, quero selecionar este círculo, círculo um, círculo um Em seguida, semicone nesta linha, então eu dupliquei esta seção e desta vez eu quero selecionar o círculo dois Este é o círculo dois e também vou mudar o nome da classe, círculo dois. Em seguida, vou ouvir o evento Scroll. Vou amarrar Window, nem mesmo ouvinte. Dentro das rodadas, dentro de um único percurso, quero ativar o evento de rolagem SCR OL L, rolar e, em seguida, quero usar uma função de retorno de chamada para isso, vou usar a função de seta vou usar a Dentro do Carlss, então aqui, vou declarar uma nova variável tarde e quero extrair o valor da Às vezes, nome scroll, valor de scroll igual a Window ScrollY Então, basicamente, vamos extrair o valor da parte superior da janela e da barra de rolagem. E à medida que rolamos para baixo, esse valor aumenta. E se eu rolar para cima, ele diminui. Portanto, é um valor variável. E vamos usar esse valor para alterar o raio desse círculo Então, em seguida, vou digitar o estilo círculo de um ponto, estilo, ponto, traçado do recorte, caminho do recorte, igual a, e usar o método de literais escalonados Eu uso cravos. Dentro dos carrapatos traseiros, vou digitar círculo, depois dentro do latão redondo, aqui, vou usar seno mais alto Então, dentro dos cravos aqui, eu vou fazer um cálculo Vamos adicionar 150. É o raio padrão do círculo. Com isso, quero adicionar valor de rolagem. Essa. Com isso, quero multiplicar esse valor de rolagem por zero ponto por 0,75 Depois disso, definimos o pixel. É um pixel. É um valor de pixel, então precisamos definir a posição do círculo centralizado E, como você sabe, colocamos nosso primeiro círculo em zero e zero, e semi terminamos essa linha Aqui estendemos o raio. Primeiro definimos, primeiro passamos o valor do raio inicial, que é 150 pixels, depois adicionamos o valor de rolagem, que você obtém após rolar a barra de rolagem E então multiplicamos esse valor de rolagem por 0,75. E como você sabe, quando você rola minha página para baixo, caso contrário, rola a página, ela aumenta. Então, vamos tentar isso. Defina este arquivo, se eu acessar meu navegador e tentar rolar esta página, como você pode ver, depois de rolar, ele aumenta o tamanho do círculo e copia Até você rolar completamente a página para baixo. E se eu rolar esta página para cima, como você pode ver, isso reduz o raio do círculo Então, quando rolamos para baixo, ele aumenta o raio do círculo e quando rolamos para cima, ele diminui o raio do Agora, vamos fazer a mesma coisa para o próximo segundo círculo. Então, para isso, precisamos entrar no estúdio Cod Eater novamente e eu vou duplicar essa Depois disso, vou selecionar o segundo círculo e aplicar esse estilo e, desta vez, quero apenas mudar a posição. Aqui, precisamos fazer com que seja 100% da esquerda e 100% da parte superior. É isso mesmo. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, deixo isso para o navegador. Agora você pode ver que quando eu rolo minha página para baixo, raio de ambos os círculos aumenta, e quando eu rolo para cima nesta página, ele diminui o raio de ambos os círculos Em seguida, precisamos tornar esse elemento H dois coloridos transparentes. Para isso, vamos ao código inicial, aqui vou pular para o arquivo da tabela de índice, copiar esse código e colocá-lo dentro desse elemento circulativo Também no círculo para elementar , o círculo um e o círculo dois, ambos os elementos Em seguida, defina esse arquivo e volte ao estilo ou CSS five. Em seguida, vou ter como alvo o elemento H dois, que está dentro do segundo círculo e, para o círculo profundo, algum tipo de ponto, círculo um, espaço H dois, coma. Em seguida, vou mirar no círculo de pontos dois, espaço, H dois. Então, dentro do CarlRassF, vou mudar a cor. Cor, eu quero mudar a cor desse círculo, transparente. Transparente, e então eu quero adicionar entusiasmo a este texto. Para isso, vou digitar webt take stroke, dash, stroke, este, e aqui eu quero cinco pixels take Cinco pixels recebem um traçado e, além disso, vou definir a cor. Quero usar as cores cinza do tipo Haztag 333 e vou configurar esse arquivo Agora, depois de configurar esse arquivo, volto ao meu se eu voltar ao meu navegador e rolar para baixo nesta página, aqui você pode ver que alcançamos o resultado desejado. Uma vez que esse círculo interessa com o elemento H dois , o elemento H dois tem esse efeito Isso acontece porque adicionamos um traço ao redor da etiqueta H two, que está dentro dos círculos, e tornamos a cor transparente. E o elemento branco H dois aqui dentro, está fora do elemento circular. Então, espero que agora esteja claro para você como podemos criar essa bela animação em Javascript. Então, obrigado por assistir a este vídeo Stune para nosso próximo projeto 11. Animação do 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 em JavaScript. Hoje, neste tutorial, vamos criar a animação Scroll Tigger Sim, vamos criar a animação SCRul tigger sem usar nenhuma biblioteca Não vamos usar o fair. Vamos usar o código PO JavaScript. Como você pode ver, sempre que eu desço minha página na segunda seção e alcanço uma certa distância, agora você pode ver a animação. É uma animação de transformação. Se eu rolar minha página um pouco mais para baixo, agora você pode ver que é uma animação em escala E se eu rolar um pouco mais para baixo, agora você pode ver que é uma animação giratória Então, em cada seção, usamos um estilo de animação diferente. Se eu rolar para cima nesta página, você também pode ver as animações desaparecerem Isso faz com que nosso conteúdo desapareça. É bem parecido com a animação escolar. Se você está familiarizado com isso , sabe como podemos executar a animação Scroll Tiger. Mas neste tutorial, vamos criá-lo por nós mesmos. Não vamos usar nenhuma biblioteca para isso. É uma animação muito eficaz para sites de página única. Vamos ver como podemos criar essa animação usando JavaScript, CSS e DML Finalmente, estou no editor de código do meu estúdio e, como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo script Dogs e o arquivo CSS de estilo dot. E no meu diretório de trabalho atual, há uma pasta chamada images. E dentro dessa pasta, temos algumas imagens, como gatos, cavalos e leões, vamos usar essas imagens. Então, primeiro, dentro dessa página de estimativa, vou criar uma seção. Então, vou usar a tag de seção, seção. Em seguida, vou atribuir uma classe a essa tag, classe, e aqui vou atribuir a seção um. Com isso, quero atribuir outra classe a esta seção, que é show Animate. Então, dentro desta tag de seção, seguida, dentro desta tag de seção aqui, vou pegar uma tag H um, cabeçalho um. Além disso, vou definir uma classe para essa classe de tag de cabeçalho e vou torná-la animada Então, dentro da tag, vou digitar a primeira seção. Em seguida, vou pegar um parágrafo dentro desta seção usando a tag T, P, e também vou atribuir uma classe e o nome da nossa classe é animate, essa Aqui vou digitar um pouco de DammiTextoWise, você pode digitar HTML, coma, CSS e JavaScript. Eu vou definir esses cinco. Depois disso, da mesma forma, vou duplicar esta seção Basicamente, aqui precisamos criar um total de cinco seções diferentes. Eu dupliquei esta seção, e esta é a seção número dois, e vou usar o mesmo conteúdo aqui Eu não vou usar essa classe para animar. Eu não preciso disso por enquanto. Depois disso, novamente, vou duplicar esta seção, e esta é a seção número três Novamente, vou duplicar esta seção, e esta é a seção número quatro Além disso, para fazer algumas alterações no título de uma tag, é a quarta seção. Quarta seção. Esta é a terceira seção. Terceira seção, e esta é a segunda seção, e eu vou submeter este arquivo Depois disso, vou duplicar esta seção oito. Mas desta vez, vou chamá-la de Seção 5. Dentro desta seção cinco, eu quero colocar algumas imagens, não o texto. Aqui eu vou pegar outro Delement DV e o nome da nossa classe é Aqui, vou atribuir imagens a uma classe. Então, dentro dessa tag profunda, vou usar uma tag de imagem. Aqui eu vou atribuir a três imagens. Então, digite a imagem IMG image como fonte e, como fonte, aqui, vou usar a primeira imagem, cats dot JPG Que está dentro da minha pasta de imagens, images slash cat dot JPG Com isso, também vou atribuir uma classe e nosso nome positivo é animate. Eu quero subtrair esse arquivo. Opa, aqui eu fiz um silástico Precisamos fornecer o caminho no código-fonte, não no antigo. Vou revisar esse caminho de arquivo a partir deste local e vou colocá-lo dentro desse atributo de origem. Então eu vou configurar esse arquivo. É cats dot JBG. Vou submeter este arquivo. Depois de configurar esse arquivo, vou duplicar esta seção Em seguida, vou atribuir a próxima imagem, que é hors dot GPG Em vez de usar GPG tipo cat hors dot. Então eu dupliquei essa linha e desta vez vou usar a terceira imagem leões com pontos de leões JPG Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu mostrar meu navegador, esse é o nosso navegador, é assim que nossa página se parece. Em seguida, precisamos estilizar essa página. Vamos entrar nesse arquivo CSS de pontos de estilo. Basicamente, fizemos nossa parte CSS e precisamos entrar no arquivo CSS de pontos de estilo. Como você pode ver, aqui eu abro um arquivo CSS de estilo. No começo, vou usar, vou importar uma fonte, que são pop-ins do Google. Depois disso, vou selecionar o seletor universal. Vou digitar estrela dentro do levoss. A primeira propriedade que vou usar é margem, margem, e vou dizer que é margem zero. Em seguida, vou definir o preenchimento, preenchimento também de toda a direção zero É um seletor universal. É por isso que ele aplicará toda a margem e preencherá todos os elementos Em seguida, vou definir o tamanho da caixa, caixa, tamanho , caixa de borda Depois disso, vou estilizar a tag da seção. Seção. Então o Cali diz, primeiro , eu vou primeiro usar a propriedade display, display, e vou torná-la flexível Em seguida, justifique o conteúdo, Justify Content Center. Além disso, vou digitar align I tabs center porque quero centralizar os elementos na horizontal e na vertical Em seguida, vou definir a direção da flexão, a direção flexão, a direção da flexão, vou usar Depois disso, vou definir a altura mínima para esse contêiner. Altura mínima média altura, e aqui vou usar a altura da janela de visualização de 100 V H. Em seguida, vou definir a cor do plano de fundo. fundo e cabeça, vou usar a hashtag um, A, dois, quatro, dois D, esse código de cores, esse código de cor cinza escuro Não é cinza, é um código de cores azul escuro. Depois disso, vou esconder o transbordamento. Às vezes, transbordamento oculto e eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, esta é a aparência da nossa tag de seção. Temos a seção ptolFive e, para toda esta seção, ela aplica esse escopo CS É por isso que toda a seção parece a mesma. Agora, vamos estilizar a outra seção, precisamos mudar a cor de fundo. Para isso, vamos voltar ao código do Visual Studio e, desta vez, vou focar na seção dois pontos ACC, Seção dois Então, dentro do Carlras, eu quero mudar a cor de fundo, cor de fundo, e eu quero usar GblorGBF vermelho, eu vou usar 96 para verde, aqui, eu vou usar 30, e para azul, eu É uma espécie de cor roxa, e eu vou guardá-la. Da mesma forma, precisamos alterar a cor de fundo da outra seção. Então eu dupliquei esse código, e é para a Seção 3 E para a Seção três, eu quero usar a cor de fundo, esse código de cores, Haz dag zero, cinco, seis, nove, seis, quatro Em seguida, vou duplicar essa linha e, desta vez, vou selecionar a Seção quatro E aqui eu vou dizer cor de fundo. Tem etiqueta, F se for um seis duplo zero, essa cor laranja. Em seguida, vou estilizar a seção número cinco. Eu dupliquei esta seção e vou mudar a cor de fundo da Seção número cinco e quero fazer isso aqui. Vou aplicar a cor RGB, RGB para vermelho, vou usar o valor alto de 255 para o verde, aqui, vou digitar zero e para o azul, vou passar 85 Em seguida, vou definir esse arquivo neste arquivo se eu voltar ao meu navegador, aqui você pode ver todas as cores diferentes de todas as seções. Agora, precisamos trabalhar na tag H two, e agora precisamos trabalhar em H um elemento, cabeçalhando um elemento. Vamos entrar no código do estúdio de resultados e, desta vez, vou focar no H one. Dentro do ColSSF, vou definir o tamanho da fonte, fonte, tamanho, quero usar o tamanho da fonte de 90 pixels e, em seguida, vou definir a cor da fonte, a cor e, às vezes, quero usar a cor branca. HastaGFFF, vou definir esse arquivo 90 pixels e, em seguida, vou definir a cor da fonte, a cor e, às vezes, quero usar a cor branca . HastaGFFF, vou Agora, vamos aplicar o estilo da fonte. Para aplicar o estilo de fonte dentro desse seletd universal, vou usar a propriedade da família de fontes da família de fontes A família de fontes precisa usar pop-ins da família de fontes Aparece e vem da família SanseriFont. Senseri E eu vou satisfazer o feedback do meu irmão. É assim que nossa fonte se parece agora. Em seguida, vou estilizar esses parágrafos. Vamos entrar no editor de código novamente e, depois disso, vou selecionar a tag do parágrafo, P. Em seguida, dentro do recesso colorido, a primeira propriedade eu vou usar o tamanho da fonte, e aqui, vou digitar o tamanho da fonte 35 pixels Depois disso, vou definir cor, cor e para cor, vou usar esse código de cores, zero, zero E F, essa cor azul clara. Depois disso, vou definir a fonte como oito. Fonte para oito, fonte oito, quero um pouco mais ousada, vou usar 600 Em seguida, vou mudar a cor do parágrafo da Seção dois, Soma, tipo ponto, EC, dois parágrafos de espaço. Então, dentro da cor re diz, aqui, eu vou usar a cor, e eu quero o mesmo código de cores, então com vários hastags zero, zero, um zero aqui eu vou usar variantes de cor verde SoMthtG 00, eu vou usar a cor, e eu quero o mesmo código de cores, então com vários hastags zero, zero, um zero aqui eu vou usar as variantes de cor verde SoMthtG 00, essa cor verde claro. Então eu dupliquei esta seção e esta é para seção número três e aqui eu quero mudar a cor FF zero, essa cor amarela clara, então eu vou mudar a cor para seção número quatro, Seção quatro, e eu vou usar e na seção, eu vou usar uma cor diferente 05, 69, 64, esse código de cor, esse código de cor verde escuro Depois disso, precisamos trabalhar nas imagens. Então, nessa seção, primeiro, vou selecionar SEC, Seção cinco, depois quero selecionar as imagens que estão dentro da Seção cinco. Eu quero ter como alvo a classe Dot Images. IGES. Isso dentro dos clires Basicamente, aqui eu miro fisicamente aqui da Seção cinco, eu quero direcionar essas imagens do elemento Dip dentro dos closes. Vou usar a propriedade de exibição, display Nesta peça, eu quero um display flex. Com isso, quero fornecer uma pequena lacuna entre esses itens, alguma lacuna de tipo, e quero uma lacuna de 40 pixels, 40 pixels. E eu quero satisfazer. Depois de voltar ao meu navegador, é assim que o texto de nossos parágrafos se parece e é assim que nossas imagens se parecem Agora, vamos ficar um ao lado do outro. Em seguida, precisamos trabalhar nessas imagens. Precisamos fornecer largura máxima, precisamos definir o peso máximo para essas imagens. Para isso, vamos voltar aos usuários para seu código. E aqui, vou selecionar a Seção cinco, pontuar a seção SEC cinco, Seção cinco e, a partir da Seção cinco, quero direcionar as imagens. Images Div e do Images De, quero segmentar a imagem IMG em cada tag Então, no Cariss aqui, vou usar a chamada de propriedade max wed, largura máxima, e vou defini-la 350 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver o resultado. Essa é a primeira parte deste tutorial. Nessa seção, trabalhamos no design do layout. Na próxima parte deste tutorial, iniciaremos o JavaScript. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 12. Animação do gatilho de rolagem, parte 2: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste tutorial e, nessa seção, vamos trabalhar em JavaScript. Vamos começar a trabalhar nos efeitos de rolagem. Vamos entrar no código do estúdio e entrar no arquivo script dot js. Inicialmente, dentro do arquivo js do script, vou focar em todas essas seções. Vou declarar uma variável AET atraso e o nome da nossa variável é seção Seção igual a esta, vou digitar document, quirselector Quielector dentro da redonda dentro um único curso Quero segmentar todas as tags de seção usando seu nome de classe section, section section Depois disso, vou digitar o ponto da janela no método de rolagem, na rolagem, igual a aqui, vou usar a função de seta. Então, dentro do Clss, basicamente, essa função é executada sempre que percorremos a página Dentro dessa função, precisamos examinar toda a seção, uma por uma. Seções de hemotp, eu vou usar, vou usar para cada loop, para cada um Então, dentro dos vestidos redondos aqui, vou passar pela seção AEC e pela função de seta Então, dentro da resina Cal, aqui examinamos esta seção e cada seção chamada sec Em seguida, uso uma função de seta para retorno de chamada e, dentro dela, declararei uma nova variável T atrasada e o nome da nossa variável está atrasado Aqui, vou declarar a distância de rolagem do nome da variável Distância de rolagem igual ao ponto da janela, scrollY, scroll Y. Basicamente, essa variável armazenará o valor da distância da rolagem da parte superior da tela até o quanto rolamos, ela armazenará o valor nessa Em seguida, precisamos recuperar a distância da seção. Vou declarar outra variável com atraso e nome da nossa variável é distância de seis seções Distância da seção igual ao segundo ponto, fora do local, fale. E então vamos para essa linha. Essa propriedade de deslocamento é a distância da borda externa da seção até a borda superior de sua matriz Deixe-me explicar isso com um exemplo, qual é o valor máximo do Oset Aqui você pode notar a distância. Esta é nossa primeira seção e esta é nossa segunda seção, e a distância entre a posição superior do navegador e a posição superior da segunda seção é chamada de distância superior deslocada Precisamos extrair essa distância de rolagem igual à distância do topo da página. Eu quero aplicar um pouco de estilo neste elemento da segunda segunda seção. Da mesma forma, precisamos nos inscrever na terceira seção, na quarta seção e na quinta seção. Então, sempre que atingirmos uma certa distância da seção da parte superior do navegador , eu quero acionar uma animação. Caso contrário, quero acionar um estilo. Basicamente, é bastante familiar com animação escrotal em Gizé Mas aqui não vamos usar nenhuma biblioteca para isso. Vamos usar JavaScript bruto. Vamos voltar ao código do estúdio. E aqui vou usar a condição. Se estiver dentro da distância de rolagem das redondas, a distância rolagem é maior que igual à distância de segundos Então, dentro do Carl diz, aqui, se essa condição for verdadeira, então aqui, eu vou digitar sec dot class list Quero adicionar uma turma. Adicionar ponto à lista de classes. Dentro do ss redondo, aqui, vou definir uma classe e nome da nossa classe é show animate. Mostrar animação. E semi, vá para uma linha. Como você pode ver, a distância I é igual à distância da seção; caso contrário, maior que a distância da seção, a instrução IP será executada Agora vamos ao navegador e ver quando essa condição está acontecendo. Então, aqui na primeira página. Desculpe, seção superior. A distância da seção é o valor fixo. A distância entre o topo e a segunda seção é a altura da primeira seção. Nunca muda, a menos que mudemos a altura. Enquanto isso, a distância de rolagem está mudando de valor. Quando rolamos a página para baixo, caso contrário, rolamos a página para cima, o valor é alterado. Em algum momento, esses dois valores são exatamente iguais. É aqui que a condição de IP se torna verdadeira, e isso acontecerá até que a desçamos até a borda superior da segunda seção. Então, sempre que ele toca na borda superior do navegador, ele aciona a animação Para esclarecer melhor esse conceito, vamos inspecionar a página Aqui vou inspecionar a página. Agora, aqui você precisa dar uma olhada na segunda seção. Aqui eu rolo minha página para baixo e as seções tocam na parte superior. Como você pode ver, não está funcionando porque eu saltei um pouco de silamismo mais tarde para o editor de código Sim. Essa é a silabística. Não é uma aula. É etiqueta. Precisamos selecioná-lo usando o nome da tag porque se eu mostrar minha página estática de índice, é um nome de tag. Não usamos nenhum nome de classe para selecionar esse elemento. Primeiro, precisamos usar o nome da tag e também fazer alguma correção, a grafia da distância DI, não E, distância , DI, este, e precisamos definir esse arquivo novamente. Vou configurar esse arquivo e voltar para o navegador. Desta vez, se eu rolar minha página para baixo e clicar na segunda seção, posição superior, tocar na parte superior do navegador, você poderá ver que ela adicionou classe à nossa seção em nossa segunda seção. Da mesma forma, se eu rolar para baixo mais uma terceira seção, posição superior, toque nesta seção, toque na parte superior. Agora você pode ver dessa vez, novamente , adicionar uma nova classe. Em nossa seção três. Além disso, se eu rolar um pouco para baixo e, novamente, se a posição superior da quarta seção tocar na parte superior do navegador, você poderá vê-la adicionada na classe. É assim que funciona. Depois disso, agora precisamos direcionar essa classe show animate estilizar esta seção e implementar a animação Vamos fazer isso mais tarde, mas antes que eu queira definir alguma condição no meu Javascript, deixe-me mostrar o que. Vamos entrar no código do estúdio e aqui precisamos lidar com a parte s. Então, para digitar s dentro dos cálices. Desta vez, quero remover essa classe show animate. Se a condição não corresponder, então eu digito a seção SEC dot class list, dot, desta vez vou usar o método remove, remove. Então, dentro das rodadas, dentro do único curso, vou passar o nome dessa classe, show animate Portanto, sempre que a condição não for verdadeira, ela removerá a classe desta seção e o semicon para finalizar essa linha Vamos configurar o arquivo e voltar para o navegador. Agora, você pode observar se eu rolar minha página para baixo e a condição é verdadeira, como você pode ver, na aula por meio da animação em nossa seção dois Mas se eu escolhi esta página e essa condição falhar, novamente, ela removeu a turma desta seção. Da mesma forma, se eu rolar a página e a Seção três tocar na posição superior, agora você poderá vê-la na aula, mostrar animação Se eu falhar na condição, você pode vê-la remover a classe daqui. Usando isso, podemos acionar a animação. Também podemos remover a animação de nossas seções. Agora, antes de trabalhar nesta aula, quero definir outra condição. Agora eu quero adicionar a classe antes desta terceira seção, caso contrário, a segunda seção chegará ao topo. Quero adicionar essa classe, mostrar animação em nossa segunda seção quando ela atingir essa distância antes de tocarmos na barra de URL do navegador Para isso, basta menos. Da distância aqui, vou para menos 150 pixels, 150 pontos Se eu definir esse arquivo e voltar ao navegador, agora você pode notar que o Weboy rolou minha página para baixo e esta seção alcançou essa posição, agora você pode vê-la na aula show Da mesma forma, se eu rolar a página para baixo e esta seção, o topo da terceira seção alcançará essa posição, modo que, como você pode ver na aula desta seção, mostre animação Fazemos isso porque, quando eu rolo minha página para baixo e o conteúdo desta seção fica visível, quero executar essa animação. É por isso que eu faço isso. Isso é tudo para a segunda parte deste tutorial. Na terceira parte deste tutorial, vamos estilizar a classe. Vamos estilizar a classe Show Animate em nossa seção de estilo Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 13. Animação do gatilho de rolagem, parte 3: Olá, pessoal. É bom ver você de volta. Essa é a terceira parte deste tutorial. Em nossa segunda parte, aprendemos como adicionar uma classe em nossa seção. Se eu inspecionar esta seção e rolar para baixo nesta página em um determinado ponto, se nossa segunda seção atingir uma certa distância, ela adicionará uma classe em nossa segunda seção Mostrar animação. Da mesma forma, nossa terceira seção atinge certa distância, adiciona a classe, mostra animação. E se eu rolar para cima nesta página e a condição se tornar falsa , ela removerá a classe dessas seções. Agora, no estúdio, vamos estilizar essa aula, mostrar animação. Vamos voltar ao código do isal studio e vou entrar no arquivo CSS de estilo Depois disso, agora nessa seção, quero segmentar a classe de animação que está dentro da tag da seção Aqui vou digitar aqui. Vou selecionar a classe animate, que está dentro da seção, depois da seção animate Animate Então, dentro do Cariss, a primeira propriedade, vou usar a opacidade Opacidade, vou torná-la zero. Se aplicarmos opacidade zero, ela ficará oculta Em seguida, vou aplicar a propriedade do filtro. Filtre, e aqui eu quero aplicar desfoque e quero desfoque de cinco pixels Depois disso, vou aplicar a transição. Transição e para a transição que eu quero, a duração da transição é de 0,5 segundo. Se eu definir esse arquivo e voltar ao meu navegador, agora você poderá ver que todos os elementos estão ocultos. Você não pode ver nenhum elemento vinculado à classe animate Vamos voltar ao código novamente. Agora, sempre que rolamos esta página, quero tornar essa seção visível novamente. Eu quero a tag HH two e a tag de parágrafo. Para isso, precisamos segmentar a classe show animate. Então, seção de tempo, mostre animação. Mostre espaço animado, ponto, eu quero segmentar a classe animada. Eu quero estilizá-lo. Então, dentro do fígado, diz: primeiro, eu vou fazer opacidade, opacidade, eu vou torná-la Porque eu quero torná-lo totalmente tópico. Basicamente, quero dizer que quero torná-lo visível novamente. Depois disso, vou aplicar filtro Filter, Blur, blur. E aqui eu vou passar zero pixel. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver sempre que eu rolei na minha página e esta seção está ativa, agora você pode ver o texto aparecer Então, quando a classe show animate for adicionada a esta seção, ela mostrará o texto Como você pode ver, sempre que eu percorro minha página e a terceira seção está ativa, ela mostra o conteúdo Nas semifinais, trabalhe para a quarta seção. E se eu rolar para cima nesta página, como você pode ver, ela oculta o texto, ela fica invisível novamente. Agora você pode entender por que a primeira seção já está visível? Porque se eu mostrar meu arquivo de estimativa de pontos de índice, como você pode ver, ela usa show animate class Nós passamos manualmente essa aula nessa seção. É por isso que nossa primeira seção contém tudo que fica sempre visível e agora podemos adicionar efeitos diferentes em seções diferentes. Vamos trabalhar com o arquivo CSS e agora quero direcionar a classe animate que está dentro da segunda seção Então digite dot SEC seção dois e, a partir daqui, eu quero segmentar a classe animate, animate Então, dentro do Carras eu quero usar a propriedade transform, transform, e quero mover esse elemento 100% de excesso na direção do excesso Vou usar traduzir X, traduzir X, 100%. Então eu preciso desse arquivo. Eu configurei esse arquivo, se eu voltar ao meu navegador, agora você pode notar que vamos mover esse elemento 100% na direção XX. Agora, sempre que eu rolar esta página, quero mover esse elemento dessa posição para a posição zero. Para isso, vou duplicar esta seção e sempre que a classe show animate estiver ativa dentro desta seção, alguns digitam show animate, show animate Então eu quero fazer com que seja 0%, caso contrário, zero, zero simples. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, volto ao meu navegador, agora você pode perceber que sempre que eu rolo minha página para baixo, em nossa segunda seção, ela vem dessa direção. Da mesma forma, podemos adicionar efeitos diferentes para nossos diferentes elementos, como a terceira seção. Então, vamos fazer isso. Em seguida, vou duplicar esta seção e, para a seção três, vou direcionar a seção três, e aqui vou usar a propriedade de escala Escala. Em primeiro lugar, quero reduzir a tag do título e o elemento. Vou fazer com que seja 0,70 0,7 vezes sempre que atuarmos como show animate class Nesse caso, quero ampliar esse elemento, escalar Aqui eu vou usar um Val. E eu vou configurar esse arquivo. Vamos ao navegador. Como você pode ver, quando vamos pular para a terceira seção, ela aumenta o número de alienados quando a condição se torna falsa; novamente, ela desaparece Agora, vamos trabalhar na quarta seção. Novamente, vou duplicar esta seção. E desta vez, quero focar na quarta seção aqui. Quero aplicar a propriedade de rotação, Transformar, transformar, girar e, por padrão, quero girá-la em 30 graus e sempre que a classe show animate estiver ativa, quero girar até Vou configurar esse arquivo. Depois de definir esse arquivo, volto ao meu navegador e chegar à quarta seção. Agora você pode notar que esse elemento está girando. Novamente, você pode ver que é assim que o conteúdo é girado. Agora, vamos trabalhar na última seção, quinta seção. Em nossa quinta seção, temos três imagens. Para isso, vamos entrar no código do Visual Studio e, primeiro, vou duplicar esta seção E aqui, vou focar na Seção cinco e, nessa seção, quero aplicar a tradução X com valor de rotação Traduza X 100%, 100%. Com isso, quero aplicar o valor de rotação, girar e quero girá-lo até Então aqui, vou aplicar translate g translate g, vou torná-lo zero. Se eu definir esse arquivo e voltar ao meu navegador e rolar para baixo até a seção de imagens, você poderá ver o resultado. Agora eu quero adicionar um pouco de atraso entre essas imagens. Também no parágrafo. Eu quero dizer este parágrafo. Para isso, aqui, vou usar a classe animate, que está dentro da tag de parágrafo, algum tipo P dot animate Dentro dos escultores, a propriedade que vou usar é de transição Faça a transição e eu quero adicionar um atraso de transição de 0,2 segundos. Depois de configurar esse arquivo, sempre que volto ao meu navegador e percorro esta página, agora você pode notar que depois de H uma tag, aparece a tag de parágrafo porque aqui adicionamos detalhes do porque aqui adicionamos detalhes atraso de transição neste parágrafo. Da mesma forma, se eu for pular para a quarta seção, depois de girar a tag H um, ela girará o parágrafo por causa desse atraso de transição de 0,2 segundos Em seguida, quero adicionar um pouco de atraso na imagem número dois e na imagem número três. Vamos voltar ao código de estúdio do usuário. Se eu mostrar minha página de estimativa de índice, como você pode ver aqui dentro desta classe de imagem, dentro desse elemento profundo, temos um total de três imagens. Precisamos segmentar a imagem nona criança dois e três. Para isso, vamos ao arquivo SASS de estilo e aqui. Vamos usar o seletor infantil, algum tipo de ponto, que é da Seção cinco, algum tipo de seção cinco, espaço, vou direcionar a imagem, ING, tag de imagem Então, dentro do cólon, quero matar a segunda criança, algum tipo N TH, enésima criança, enésima criança, quero atingir a segunda, vou passar para Então, dentro do carnívoro, vou usar uma propriedade chamada atraso de transição Atraso na transição e eu vou ultrapassar o atraso de transição de 0,2 segundos. Em seguida, quero selecionar o terceiro filho, três, a terceira imagem, aqui vou adicionar atraso de transição, 0,4 segundo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu usar meu navegador e pular para a quinta seção, agora você pode ver aqui que você pode notar que adicionamos atraso de detalhes na segunda imagem e na terceira imagem. É assim que criamos essa animação de gatilho de rolagem sem nenhuma biblioteca. Podemos fazer isso facilmente usando a animação GSAP, mas aqui não usamos nenhuma biblioteca Aqui usamos JavaScript puro básico para fazer isso e CSS. Obrigado por assistir a este vídeo, fique ligado em nosso próximo projeto de animação em JavaScript 14. Animação de estrela piscando usando JavaScript parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. E hoje, vamos construir esse lindo fundo animado de estrelas usando JavaScript. Como você pode ver, há muitas estrelas nesse fundo e todas elas piscando de forma diferente E então temos esse círculo. E dentro desse círculo, temos um texto. Bem-vindo à nossa página. E esse texto está flutuando acima desse círculo. E toda a estrela bebendo aleatoriamente. Se eu recarregar esta página e relacionar esta página, como você pode ver, aleatoriamente, ela muda a posição da estrela Se eu recarregá-lo novamente, como você pode ver, novamente, ele muda a posição dessa estrela aleatoriamente, e todas as estrelas estão bebendo Isso é o que vamos construir neste projeto. Vamos entrar no editor de código do Visual Studio. Então, finalmente, estamos no meu editor de código de estúdio, e como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo CSS no estilo EstimLfle com ponto de índice e o arquivo JS com porta de script, e agora vou vincular o arquivo CSS de ponto de índice a este CSS de ponto Vou digitar tinta e aqui vou passar o estilo dot css. Em seguida, dentro da tag body, vou inserir o arquivo script dot Gs. Vou digitar Script tag, script. Então, como a fonte é a fonte Rc, vou passar o script dot js Vou configurar esse arquivo. Depois de definir esse arquivo, vou pular para a seção do corpo. Dentro da etiqueta corporal aqui, vou pegar a etiqueta de seção. Seção. Então, dentro desta etiqueta de seção, vou pegar uma etiqueta H two, tubo H aqui vou digitar, bem-vindo. Bem-vindo ao nosso, então aqui vou usar a tag Ba, BR. Aqui eu uso o Bateg porque quero quebrar a linha. Então, dentro da tag T, vou pegar uma tag span, span. Então, dentro da tag Span, tipo hemo, bem-vindo à nossa página. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, é assim que nossa página da web se parece agora. Agora, precisamos estilizar esta seção, vamos estilizar esse texto. Então, para isso, precisamos entrar no estilo ou no arquivo SASS. Então, primeiro, vou importar uma fonte, e o nome da nossa fonte é Poppins Então, eu importo essas fontes pop in. Depois disso, vou usar seletor universal, tipo de música, início e, em seguida, dentro do crass, primeiro, vou definir a margem para esta página, margem de toda a direção zero, depois vou definir o preenchimento e também a direção em que quero usar o Em seguida, vou usar o tamanho da caixa, borda do tamanho da caixa Depois disso, vou definir as famílias de fontes, vou digitar a família de fontes aqui, vou usar a fonte Poppins Dentro do curso único, vou digitar P, O PINs Poppins e ele vem de SansarionFamily , Em seguida, vou selecionar a tag body, body, e aqui dentro do alias diz, vou usar o cabeçalho de estouro PpotaloFlow e vou definir Depois de definir esse arquivo, vamos estilizar a tag da seção. Agora vou selecionar essa tag de seção usando o nome da tag. Eu copio a tag da seção e vou selecionar essa tag de seção no meu estilo ou arquivo CSS. Então, lá dentro, surge a primeira propriedade que vou usar, display. Essa peça e eu queremos fazê-la desmoronar. Ou seja, justifique o conteúdo, justifique um centro contido. Em seguida, vou alinhar este item e alinhar os itens também no Então eu vou definir altura, altura, vou definir altura, altura de 100 janelas de visualização Depois disso, vou definir a cor de fundo, o plano de fundo e, para esse plano de fundo, vou usar a hashtag 222, cor cinza escuro Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nossa página se parece agora. Agora, para criar esse círculo ao redor do texto, usaremos o pseudo-elemento anterior desta tag de seção Aqui, vou digitar a seção dois pontos antes. Então, dentro do carro, fica a primeira propriedade em que vou usar o conteúdo Quero criar um conteúdo em branco. Conteúdo igual ao conteúdo é um conteúdo em branco. Depois disso, vou definir a posição. Posição, eu quero definir a posição absoluta. Então eu vou definir, nós. Aqui eu vou definir a largura 30 da largura da janela de visualização. De acordo com a área da janela de visualização, isso mudará o tamanho do círculo Então eu vou definir a altura. Além disso, 30, é Vw, não H, coloque W. Aqui eu uso uma altura semelhante e faço com que seja quadrada Mais adiante, vou definir a borda da borda, e quero cinco bordas VW e quero uma borda sólida, sólida, e a cor da nossa borda é, vou usar essa variante de cor azul para a borda Depois disso, vou definir o raio da borda, o raio da borda Aqui eu vou passar de 50%. Então eu vou configurar esse arquivo, mas antes de configurar esse arquivo, eu cometi um erro, é errado soletrá-lo antes de E. Então eu vou configurar esse arquivo e voltar para o meu navegador Se eu voltar ao meu navegador, é assim que nossa fronteira se parece. Depois disso, precisamos adicionar uma pequena sombra de caixa. Para isso aqui, vou digitar box shadow box. Sombra, e eu vou usar um valor, esse valor de sombra da caixa, e vou definir esse arquivo. Depois de definir esse arquivo, é assim nosso círculo se parece agora com essa sombra de caixa. Depois disso, vou estilizar esse texto, esse H para marcar. Para isso, vamos voltar ao código do estúdio e, desta vez, vou usar H para marcar H dois. Então, dentro da classe, a primeira propriedade, vou usar a posição e vou tornar a posição absoluta. Em seguida, vou definir o tamanho da fonte, o tamanho da fonte, e aqui vou definir o tamanho da fonte V W, a janela de visualização, nós Em seguida, vou definir cor, cor e quero torná-la totalmente branca. Eu uso esse código menor, se for F. Depois disso, vou definir fonte para oito, fonte para oito, e eu quero fontes um pouco mais leves, então vou empatar 400 Em seguida, vou definir o alinhamento do texto e o centro do alinhamento do texto. Além disso, vou definir uma pequena altura da linha, altura da linha. Vou passar a altura da linha dois pelo índice M Z, e vou passar cinco aqui, índice Z cinco. Em seguida, vou transformar esse texto. Quero distorcer um pouco esse texto, digitar transform property, transform, e aqui vou digitar e Hembus skew value, skew skew Y, skew y menos sete graus DG Em seguida, vou subtrair esse arquivo e voltar para o navegador. Agora, é assim que nosso texto se parece. Bem-vindo à nossa página. Agora você pode ver que nosso texto está no centro desse círculo. Além disso, inclinamos o texto em menos sete graus e precisamos adicionar alguma sombra de texto Vamos trabalhar com o código do estúdio e aqui vou usar a propriedade chamada text shadow. Então, digite o texto e reutilize isso. Isso assume o valor da sombra, e eu vou definir esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nosso texto se parece agora. Basicamente, aqui, passo a passo, aumento o valor de take shadow. Se eu mostrar, como você pode ver, primeiro use um pixel, depois dois pixels, depois três, quatro e cinco, e aqui use a cor cinza para capturar a sombra. Agora, vamos trabalhar na tag San, que contém a página. Para isso, vou selecionar H dois, H dois, dentro da tag H dois, quero selecionar a tag span. Vou usar a extensão do nome da tag. Então, dentro da Calibra , a primeira propriedade vou usar a espessura da fonte Aqui, vou usar fontes Little Boulder , então vou digitar 700 Em seguida, vou definir o tamanho da fonte tamanho da fonte. Aqui, vou definir o tamanho da fonte três EM, um pouco maior que o anterior. Em seguida, vou definir “take shadow”, text shadow”, e aqui vou passar “ multiple take shadow”. Eu colo esse código e vou configurar esse arquivo. Depois de definir esse arquivo, se cinco voltas para o meu navegador, é assim que nossa página se parece. Agora, é muito grande. Parece muito grande para este site. Acho que precisamos reduzir o tamanho para reduzir o tamanho desse círculo, também o conteúdo do texto. Então, vamos experimentar com isso. Em vez de usar, deixe-me mostrar primeiro, vou diminuir o tamanho desse elemento anterior. Aqui eu vou fazer 20 V. Depois vou diminuir o tamanho dessa borda. Eu vou fazer três VW. Depois disso, depois disso, vou diminuir o tamanho da fonte. Aqui, eu vou fazer cinco W. Então, eu também vou diminuir a altura da linha e vou usar 1,5 Em. Em seguida, vou diminuir o tamanho da fonte. Aqui eu vou usar duas fontes EM. Satifique e veja como fica. Depois de voltar ao meu navegador, é assim que fica. Agora está perfeito. Agora eu acho que parece muito legal para este exemplo. Caso contrário, em nosso vídeo anterior, parece muito grande para este exemplo. Agora precisamos trabalhar na animação. Precisamos trabalhar na animação flutuante. Então, vamos criar o quadro-chave para isso. Vamos entrar no código do estúdio de vídeo. Então, aqui, primeiro eu escrevo, adicione os quadros-chave do quadro-chave de taxa Então, o nome dos nossos quadros-chave é flutuante porque é uma animação flutuante. SmotyPFLA TNG. Flutuando então dentro da lista 0% de duração e aquela com 100% de duração Eu quero aplicar a propriedade de transformação, transformar, transformar a distorção do heterótipo Inclinação Y, inclinação Y menos sete graus DEG. Com isso, quero aplicar outra propriedade, traduzir Y. Traduzir Y -20 pixels, 20 pixels Em seguida, vou duplicar esta seção e, aqui, vou digitar com 50% da duração No início, com 50% da duração, quero alterar o valor Y do trânsito. Vou fazer com que seja positivo. Faça com que seja de 20 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, vou chamar essa animação. Eu copio o nome da animação flutuando e vou pular para a tag two, esse seletor Aqui eu vou chamar de propriedade de animação. Animação. Primeiro, precisamos fornecer o nome da animação que está flutuando. Em seguida, precisamos definir o tempo de animação. Estou aqui para passar cinco segundos. Em seguida, precisamos fornecer a direção da animação, que está dentro e fora. Depois disso, precisamos fornecer a contagem de iterações, e eu quero executar essa animação para tempo limite infinito Eu quero configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, esse é o nosso visual de animação. Se você quiser tornar essa animação mais rápida, sim, basta reduzir o tempo de duração da animação. Se eu aguentar três segundos e depois definir esse arquivo e voltar para o navegador. Agora você pode ver que é assim que podemos aumentar a velocidade da animação. Essa é a primeira parte desse projeto. E na próxima parte desse projeto, vamos criar esse início e também vamos trabalhar em JavaScript. Obrigado por assistir a este vídeo fique ligado na próxima parte 15. Animação de estrela piscando usando JavaScript parte 2: Então, se na parte anterior deste tutorial trabalharmos nessa animação flutuante, animação flutuante de texto. Agora vamos criar o senhor. Vamos criar essa mistura aleatoriamente. Vamos para o arquivo JavaScript. Estou no editor do meu estúdio de resultados e, a partir daqui, vou abrir o arquivo script dot js Primeiro, primeiro, precisamos selecionar essa tag de seção. Mas para isso, precisamos declarar uma variável AET com atraso e nossa variável é seção Seção posterior igual ao documento, ponto, seletor yy e, em seguida, dentro do latão redondo dentro dos códigos únicos, quero direcionar essa tag de seção, então vou passar a tag Nin section e semiconn para Nin section e semiconn Depois disso, vou declarar uma variável, outra variável, atrasada e o nome da nossa variável é J, posterior J igual a é atribuído com zero Em seguida, vou criar um loop while e definir uma condição. Por que J, menos de 200. Y J menor que 200 , então dentro do calibre eu quero criar a estrela Então, aqui, eu quero criar estrelas para declarar outra variável com atraso e o nome da nossa variável é senhor. Senhor, igual a documento, documento aqui, vou criar elemento, criar elemento e, das bases redondas, dentro do código único, quero criar o elemento I, I e semiconm para finalizar esta linha Depois disso, precisamos criar algumas variáveis que precisaremos posteriormente para criar as estrelas. Aqui vou declarar outra variável tardia, tardia X igual a matemática, matemática, ponto MD, piso Então, dentro dos vestidos redondos, aqui vou usar o método aleatório de Matt. Matemática, ponto matemático aleatório. Em seguida, dentro dos vestidos redondos, e eu quero multiplicar com janela, interior com W interno e semicônio dois nesta Eu quero satisfazer. O ponto interno da janela retorna a largura dessa janela do navegador e está retornando o valor do pixel. Em seguida, pegamos o valor e multiplicamos pelo valor aleatório do ponto Md Em seguida, convertemos esse valor em inter usando o método floor Em seguida, vou digitar, começar, ponto, estilo, ponto, P igual a dentro dos tiques traseiros, vou usar o cifrão. Então, dentro do surge, vou passar a variável chamada X. X pixel E semicone para esta linha. Em seguida, vou duplicar esta seção, vou alterar o nome da variável X para Y e também alterar a altura interna do ponto da janela, a altura interna Vou substituir X por Y. Então, em vez de tarde, vou usar o valor T. Em seguida, precisamos criar a largura e a altura da estrela Para isso, vou definir outra variável mais tarde e nossa variável é tamanho. Tamanho tardio igual à função matemática aleatória, aleatória. Eu vou multiplicar com. Aqui eu quero multiplicá-lo por quatro. Então, vamos acabar com essa linha. E então usaremos o tamanho para definir a altura e a largura. Em primeiro lugar, vou definir a largura do estilo de ponto estrela do tipo estrela. Comece com o estilo dot weed, igual ao interior dos carrapatos dos morcegos Em seguida, vou usar Dollar sine e dentro do clivus Head, vou adicionar um com o tamanho, e precisamos passar a variação em pixel Px e semicron Você pode notar a adição dela com um porque às vezes o ponto matemático aleatório retorna zero, e se eu multiplicar zero por quatro, ele também retornará Se passarmos diretamente apenas o tamanho, em alguns casos, ele pode retornar zero. É por isso que ele mais zero com um. Então, o valor mínimo que passamos é um pixel. E se passarmos de zero, isso não é bom para o nosso projeto. Para evitar essa situação, usamos apenas um valor aqui. Então, precisamos fazer a mesma coisa com a altura. Eu entendo essa linha, e vou substituir e aqui vou substituir pela altura. Então, agora temos a posição dessa estrela e a dimensão dessa estrela. E agora estão as estrelas em nossa seção. Para isso, aqui vou digitar section dot, apenhil method, append Dentro do recesso redondo, vou passar a estrela, a estrela e o semícone para finalizar essa linha Além disso, precisamos continuar esse loop, então vou incrementar a variável J, J mais mais Até que o valor J se torne 200, ele executará o loop. Então, basicamente, ele criará um total de 200 estrelas em nosso plano de fundo. Agora, se eu entrar no navegador e inspecionar esta página, inspecionar e mostrar essa tag de seção, agora você pode ver dentro dessa tag de seção que temos um total de 200 elementos I. Usando o iTag, criamos essas estrelas. Agora eles não são visíveis porque não estilizamos essas estrelas. Precisamos estilizar todas as estrelas. Vamos dar uma olhada no código do estúdio novamente. Lembre-se de que todas as estrelas têm tipos aleatórios. Eles não são iguais. Seu tamanho é diferente, sua localização é diferente, tudo é diferente um do outro. Vamos mostrar essa estrela. Vou entrar neste arquivo css de blocos e, aqui, vou direcionar a tag I que está dentro desta seção. Seção, depois dentro das alavancas do carro. Aqui, primeiro, vou usar a posição. Posição, vou torná-la absoluta, posição absoluta, e então vou definir plano de fundo, plano de fundo. E como plano de fundo, vou usar a cor branca, então vou usar esse valor HtGFFF Além disso, vou definir o raio da borda. Raio da borda, vou fazê-los circular, então eu uso 50% e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, você poderá ver todas as estrelas em tamanhos e locais diferentes. E agora precisamos brilhar essa estrela. Para isso, precisamos usar box shadow. Agora vamos voltar ao código estrial. E aqui, eu vou usar essa propriedade chamada box shady, esta, aqui e aqui, eu vou passar essa sombra de caixa Vou configurar esse arquivo. Depois de definir esse arquivo, volte ao meu navegador, agora você pode ver que todas as estrelas estão crescendo. Aqui você pode notar o efeito crescente das estrelas. E agora precisamos trabalhar no efeito de animação nas estrelas. Para isso, vou criar uma nova animação. Deixe-me te mostrar, então aqui eu vou digitar. Aqui vou digitar quadros-chave, adicionar quadros-chave, adicionar quadros-chave , e o nome da nossa animação é estrelas, estrelas dentro do carboidrato com 0% de duração, vou colocar opacidade, opacidade Nessa posição, quero definir a opacidade zero e, em seguida, duplicar Então eu vou duplicar esta seção aqui 10% de duração, eu quero definir a opacidade um Então, com 90% da duração, 90% da duração, quero definir a opacidade de um EGI, em 100%, deixe-me mostrar a 100% da duração, quero definir a opacidade zero agi E vou chamar essa animação de estrelas, copiar o nome da animação, e aqui vou chamar a animação. Animação. Primeiro, forneça as estrelas do nome da animação, depois precisamos fornecer a direção da animação. Vou passar de forma linear. Eu quero rodar essa animação por um tempo infinito, vou passar infinitamente. Vou configurar esse arquivo. Eu configuro esse arquivo se eu voltar ao meu navegador. Agora eu configurei esse arquivo, como você pode ver, nada aconteceu porque não definimos a duração da animação. E lembre-se, toda vez que recarregamos esta página, ela cria aleatoriamente a estrela em posições diferentes Você pode ver o resultado e forneceremos a duração usando o Java State porque queremos aumentar a estrela aleatoriamente Não queremos fazer crescer todas as estrelas de uma só vez. Para isso, precisamos entrar no arquivo JS. Aqui, vou criar outra variável, late, e o nome da nossa variável é duração. Duração tardia, igual a, vou usar o método map dot random, Mt dot random, Random. Em seguida, vou multiplicar por, e aqui vou multiplicar por dois e ponto e vírgula até dois e ponto e vírgula Depois disso, vou aplicar esse valor aleatório à duração da animação. Sumtyp start dot style, aquela duração da animação, duração da animação igual a aqui, precisamos usar acentos aqui, precisamos usar Basicamente, é o método de string Tabit então dentro do cifrão, depois ult para passar o cifrão e dentro do Cali ress eu vou fornecer duração, duração e, aqui, vou adicionar com duração Então eu vou passar a média de segundos e ponto e vírgula dois nesta linha Isso definirá um valor de duração aleatório para nossa animação de estrelas. Então, fique feliz se eu voltar ao meu navegador e agora você perceber que as estrelas estão piscando, mas estão pintando aleatoriamente É assim que criamos esse lindo efeito de animação. Aleatoriamente, colocamos a estrela em posição diferente desse fundo Além disso, ele começa aleatoriamente. Se eu recarregar a página, agora você pode ver como ela reproduz todas as estrelas aleatoriamente em posições diferentes Espero que agora esteja claro para você como podemos criar esse lindo projeto de animação. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 16. Modo dia: modo noturno — animação de estrada parte 1: Olá, pessoal. Bem-vindo à nova lição deste curso. Neste projeto, vamos criar essa interessante animação rodoviária. Como você pode ver nesta cena, temos um fundo de céu, sol e um rolo, e dois carros se movendo um contra o outro. Além disso, o fundo está se movendo. É por isso que isso nos dá um efeito realista. E sempre que clico no Sol, ele se transforma em lua e toda a cena fica escura. Então, isso é basicamente o modo escuro e o modo claro. Vamos mudar o escuro para claro e do claro para o escuro com a ajuda do JavaScript. E é um bom exemplo de animação de alternância em JavaScript. Então, vamos começar, então, como você pode ver, estamos no editor de código do meu estúdio e, como você pode ver no meu diretório de trabalho atual, temos o arquivo index StimlFlEscre dot js e o arquivo CSS style dot, e temos um total de duas imagens, big dot PNG, essa imagem, e também temos um car dot GIA, essa imagem, e vamos usar Agora, primeiro dentro do meu ponto de índice StimlFle dentro da tag body, vou pegar uma tag de seção section, section, e vou atribuir uma classe e vou chamá-la de SIM e , dentro da tag de seção, vou adicionar outra Aqui vou adicionar um elemento profundo, DV, e vou atribuir uma classe a essa classe de elemento profundo, e o nome da classe é sol Esse elemento vermelho é para o sol. Em seguida, vou adicionar as imagens de fundo. Para isso, vou pegar outro elemento Dev, Dv Dt, e vou chamá-lo de BG, BG significa background Então, dentro desse elemento DV, aqui vou usar o total de duas imagens IMG. Basicamente, vou usar a mesma imagem duas vezes, então vou amarrar o carro, é para o GIF do carrinho de imagem E vou atribuir uma classe e também uma classe, e vou chamá-la de carta um. Então eu vou duplicar esta seção, e isso é para o cartão dois Aqui eu uso a mesma carta e vou mover as cartas na direção oposta. Em seguida, vou configurar esse arquivo e voltar para o meu navegador. Agora é assim que parece. Agora precisamos entrar no arquivo CSS de estilo. Precisamos começar a estilizar. Agora, vamos entrar no arquivo CSS de estilo. Agora estamos no meu arquivo CSS e vou começar a estilizar Primeiro, vou selecionar a estrela seletora universal e, em Cali, a primeira propriedade, vou usar a margem De todas as direções, vou usar a margem zero para todo esse elemento. Então eu vou usar preenchimento, preenchimento, vou passar de zero novamente Em seguida, vou usar o tamanho da caixa, borda do tamanho da caixa Depois disso, aqui, vou mirar na cena, essa, a seção do pecado. Eu copio o nome da classe sine e volto para o arquivo CSS stylo Eu digito dot sin e, dentro do Caris, a primeira propriedade que vou usar é a primeira propriedade que vou usar posição e quero torná-la relativa Depois disso, vou atribuir altura a essa área, área da cena. Altura, aqui, vou usar 100 de altura da janela de visualização. Com isso, vou atribuir mais de uma propriedade, estouro oculto Eu me escondi na área de transbordamento. Em seguida, vou atribuir um plano de fundo gradiente. fundo, aqui vou usar um gradiente de vídeo, gradiente linear, digitado Soo, gradiente linear e vou passar Aqui, vou passar esse código de três cores e vou compactar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece. Basicamente, isso vai me fornecer uma visão do céu. Aqui criamos um céu para o nosso pecado, todo o pecado, e depois, vou trabalhar no sol. Precisamos criar o sol. Para isso, vamos voltar ao código do estúdio de resultados e, desta vez, vou direcionar o nome da classe. Vou direcionar o D usando seu nome de classe dot N Sun. E lá dentro, o carnaval diz, aqui, eu vou usar a posição da propriedade, e vou torná-la absoluta Depois disso, vou usar o valor máximo. De cima para cima, de cima, eu quero movê-lo 100 pixels e do laboratório, do laboratório, eu quero movê-lo 55% Caso contrário, 50%, você pode usá-lo no seu caminho. Em seguida, vou atribuir uma altura interna ao sol com 100 pixels e também a altura de 100 pixels. Depois disso, vou atribuir uma cor de fundo. fundo para plano de fundo, vou usar a hashtag if if if is this color code Depois disso, basicamente é uma cor branca. Depois disso, vou atribuir o raio da borda. Quero fazer com que circule, digite borda, o raio da borda e herói passe 50%, e quero fazer com que circule Depois disso, quero transformar esse elemento. Mas antes de transformar esse elemento, vamos adicionar uma pequena sombra de pântano Em seguida, vou adicionar sombra de pântano. Sombra da caixa, sombra da caixa. Aqui eu vou usar box shadow, zero, zero, 50 pixels. Então eu vou fornecer a cor. Hashtag, tem tag, e eu vou passar se for esse código de cores Em seguida, quero fazer o ponteiro do cursor quando movo meu cursor sobre o sol Então, vou digitar o cursor e vou torná-lo um ponteiro Agora, para configurar esse arquivo, vamos voltar ao navegador. Vamos ver como é o nosso sol. Então este é o nosso sol, e é assim que ele se parece, e como você pode notar, ele está brilhando por causa da sombra da caixa Vamos adicionar uma pequena transição a esse sol para um efeito de suavização quando eu o animo Para isso, vou digitar transição e, para transição, vou usar 0,2 segundo. Esta é a duração da nossa transição, e eu vou configurar esse arquivo. Agora, vamos trabalhar no plano de fundo dessa cena. Vamos adicionar a imagem de fundo. Então, vou entrar em is a studio code eater” e, aqui, vou focar no plano de fundo usando o nome de classe Tat BG Então, dentro dos carros, a primeira propriedade, vou usar a posição e quero torná-la absoluta. Depois disso, vou usar outra propriedade Width, vou atribuir Width, aqui para atribuir 100%, 100%. Em seguida, vou atribuir altura, altura, herm para atribuir altura, 280 pixels Em seguida, vou atribuir plano de fundo, plano de fundo e, a partir do plano de fundo, quero adicionar o URL da imagem, o URL da imagem e, aqui, vou passar essa imagem de ponto grande PNG, ponto BG PNG. Em seguida, vou adicionar o tamanho do plano de fundo, o tamanho do plano de fundo e quero torná-lo de 1.500 pixels Essa grande área. Em seguida, quero repetir esse plano de fundo na direção XX para digitar repetição de fundo, repetição de fundo. Aqui vou passar a repetição X e vou definir esse arquivo. Agora vamos voltar ao navegador, como está. É assim que parece. Agora precisamos colocar o plano de fundo na parte inferior. Para isso, vamos dar uma olhada no código do estúdio novamente, aqui vou digitar bottom. Você precisa posicioná-lo na parte inferior, então digite o zero inferior. Vamos certificar e ver como ficou. Depois de definir o zero inferior, se voltarmos ao meu navegador, era assim que parecia. Em seguida, precisamos mover essa imagem para o lado esquerdo. Para isso, precisamos usar animação. Precisamos usar quadros-chave. Vamos fazer isso. Aqui, vou criar um quadro-chave no quadro-chave ate e vou nomear a animação animada Antecedentes BG. Então, dentro do carliss com 0% de duração, eu quero mover esse fundo Aqui, vou chamar propriamente a posição de fundo X. Quero mover esse fundo em XX de algum tipo de posição de fundo X, posição fundo X, zero pixel Então, eu duplico essa linha com 100% de duração, 100% de duração Eu quero mudar a posição. Desta vez, quero fazer com que seja de -1.500 pixels e vou definir esse arquivo Depois de configurar esse arquivo, vou chamar essa animação. Aqui vou digitar a animação. Nosso nome de animação é animate BG Animate background. Então você precisa fornecer a duração da animação e eu quero executá-la por muito tempo, então vou fazer com que seja de 25 segundos. Depois disso, quero tornar a direção da animação linear e executar essa animação para animação por tempo infinito, então vou torná-la infinita. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode notar que é assim nosso plano de fundo se move da direita para a esquerda. Isso vai nos dar o efeito de corrida de carro. Agora, vamos examinar novamente o código do estúdio do usuário. Agora, vamos ladrilhar os carros. Primeiro, vou escolher a primeira carta usando o nome de classe dot car one. Como você pode ver aqui, eu uso dois cartões e, para os dois carros, usamos a mesma imagem, cartão dot GIA. Dentro do Cress, primeiro, vou definir a posição da posição do carro e quero torná-la absoluta Em seguida, vou digitar o valor inferior, inferior e, a partir da parte inferior aqui, vou colocá-lo em 20 pixels. Depois disso, vou atribuir a largura máxima. No máximo com largura máxima, vou fazer com que seja de 200 pixels. Em seguida, fornecerei o índice Z, o índice Z e o Helm para passar um, e vou definir esse arquivo Depois de configurar esse arquivo, vamos voltar ao navegador e ver como ele ficou. Então é aqui que colocamos nosso carro. Agora, precisamos fazer a mesma coisa com este carro, a segunda carta, mas precisamos mover esse carro na direção oposta. Agora, vamos colocar o segundo carro. Então, aqui, eu vou cavar esta seção. E em vez de usar o carro da classe um, vou digitar o cartão dois, posição absoluta e inferior, aqui, vou passar 50 e o máximo é o mesmo, e o valor do índice z, não quero o índice z, então vou fazer isso e elogiar esta linha E eu vou subtrair esse arquivo. Depois de submeter este arquivo, se eu voltar ao meu navegador, é aqui que colocamos o cartão Em seguida, quero mover as duas cartas na direção oposta. Para isso, aqui, vou usar um valor de ultimamente. Quero tirar nossa primeira carta do lado esquerdo, eliminando a última. Eu quero movê-lo de -200 a 200 pixels. E nosso segundo carro na direção oposta. Então, Hemoty da direita para a direita, eu quero movê-la em -200 Se eu definir esse arquivo e voltar ao meu navegador, agora você não poderá ver os carros porque desta vez esses carros estão fora do quadro. Nós movemos o carro para fora do quadro. Movemos nosso primeiro carro -200 pixels e movemos nosso segundo cartão -200 pixels no lado direito Agora, essa é a primeira parte. Na próxima parte deste tutorial, trabalharemos na animação desse carro. Obrigado por assistir a este vídeo fique ligado na nossa próxima parte. 17. Modo dia: modo noturno — animação de estrada parte 2: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste tutorial e, nessa seção, começaremos com a animação de cartas. Então, vamos entrar no código de estúdio W a. Aqui colocamos nosso primeiro cartão p -200 pixels e nosso segundo cartão com a direita, -200 Agora, os dois carros estão fora da estrada. Agora precisamos criar uma animação que possa mover o carro dentro dessa estrada. Agora vamos criar a animação para nosso primeiro carro, Hebotype, nos quadros-chave de taxa e nosso nome de animação é Então, dentro das calibras com 0% de duração, aqui dentro das calibragens eu quero usar a propriedade transform, transform, transform, e vou usar translate X porque precisamos mover esse carro na direção x. Com 0%, eu quero fazer com que seja zero pixel. Então, com 90% e 100% de duração, 90% e 100% de duração, eu quero transformar esse elemento, o elemento carro, alguém use a probabilidade de transformação, transforme, traduza X. Então, dentro das rodadas, eu vou usar a função CALC Então, dentro da grama redonda, aqui, vou passar por 100 pontos de observação de ervas daninhas do porto H plus concatene com 200 pixels e eu vou satisfazer Da mesma forma, vou criar a segunda animação para o segundo carro, então dupliquei esta seção e substituirei o nome da animação Keyframe name car two aqui pelo valor de translação X, quero girar o carro na Precisamos usar outra propriedade chamada girar Y, girar Y aqui eu quero girar, o elemento do carro em 180 graus Além disso, em nossa função de elfo, precisamos mudar a direção. Precisamos passar Vu negativo de -100 vs e aqui, vou concatenar com Fisicamente, enraizado e alimentando o carro verticalmente, aqui e aqui, eu uso o V 100 vw negativo, não o H. Para substituir o HV W. Também em E a partir desse valor de -100 VW, temos -200 pixels. Também anotei esse elemento, então vou copiar esse valor e colá-lo aqui Agora, esse carro, a segunda carta, se move para a direita para o lado esquerdo. Agora vamos chamar a primeira animação. Em nossa primeira seção de carros aqui, vou digitar animação. Nosso nome de animação é carro um e nosso carro de animação um, e nossa duração de animação é de 18 segundos. Com essa animação, a direção é linear e contagem de iterações da animação é infinita Vou submeter esse arquivo. Depois de configurar este arquivo, se eu voltar ao meu navegador, agora você pode notar do lado esquerdo esse carro foi movido para o lado direito e leva um total de 18 segundos para completar a animação. Agora precisamos fazer a mesma coisa com o segundo carro. Desta vez, precisamos mover o segundo carro do lado direito para o lado esquerdo. Como você pode ver, o herói usa um valor infinito, então esse carro está se movendo repetidamente. Precisamos fazer a mesma coisa com o carro dois. Então, vamos entrar no código do estúdio, e aqui vou chamar a segunda carta de animação de duas. animação do tipo Sono e o nome da animação é cartão dois e a duração da animação é dois segundos Se você usar a duração da animação quilt second, isso aumentará a velocidade desse carro Em seguida, vou digitar linear, direção de animação linear e, em seguida, a contagem de interações de animação é infinita. Mas antes de definir esse arquivo, precisamos fazer algumas correções porque o herói usa vestidos redondos errados. Precisamos mover o interior dessa base redonda e separar o valor de rotação Y. Agora está correto. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele move o cartão na direção oposta. Você pode notar que a carta do lado direito é muito mais rápida do que carta do lado esquerdo porque usamos 12 segundos de duração para esta carta. Então é assim que podemos executar essa animação. Agora, precisamos trabalhar no modo diurno e noturno. Se clicarmos nesse sol, quero mudar para o modo diurno para noturno. Para isso, vamos entrar novamente no Visual Studio Code Eater Agora precisamos transformar a cena em pesadelo. Para isso, precisamos entrar nesse arquivo script dot Js. E primeiro, dentro desse arquivo de scripts de cães, eu vou mirar no sol. E para atingir o sol, vou declarar que uma variável C N é o custo sol igual a aqui, vou digitar documento, seletor Kiri de ponto de documento de hemótipo, seletor Kiri Então, dentro dos vestidos redondos, dentro dos códigos únicos, vou selecionar o Sundiv usando seu nome de classe sun e semiconm two Então eu duplico essa linha e vou mudar o nome da variável aqui, vou criá-la Desta vez eu vou desta vez eu vou selecionar o pecado. Aqui eu vou fazer isso pecar. Cante igual ao código de pontos do documento, seletor aqui, eu vou digitar Aqui, vou direcionar o Sindep usando seu nome de classe dot dot sin Então eu quero adicionar um evento. Quero adicionar evento de clique, tipo de música, sol, ponto, adicionar ouvinte de eventos Dentro da Bress redonda, quero adicionar um evento de clique Clique. Então eu quero executar e chamar a função. Vou digitar a função de seta em um recesso redondo e aqui é igual a maior que seno para a função de seta Então, dentro do recesso de cores, eu quero adicionar na aula Quero adicionar uma aula ao nosso syndep. Para isso, vou digitar Sin class least, class least dot Toggle Aqui eu uso o método toggle porque sempre que clico no botão dentro dos latões redondos, vou passar o nome da classe e o nome da classe é noite e ponto e vírgula para essa linha, e vou Sempre que clicarmos nesse elemento Sandv, ele adicionará uma classe a esse elemento Sindiv, que Se eu clicar duas vezes , nosso método de toalha removerá a classe desse elemento div É por isso que aqui usamos tobul agora, depois de configurar esse arquivo, vamos voltar ao navegador e inspecionar esta página. Depois de inspecionar esta página, vamos ver se ela funcionou corretamente ou não Sempre que eu clico nesse elemento Sundev, este de, como você pode ver, adiciona Aptar sin à noite de aula Ele adicionou uma nova classe Aptar sin. Se eu clicar neste sol novamente, como você pode ver, remova a classe. Usando essa classe, podemos pular para o modo noturno e, novamente, podemos pular para o modo D. Agora precisamos entrar nesse estilo de arquivo CSS e trabalhar no modo noturno. Agora, depois dos quadros-chave, vou trabalhar no SM para o tipo nightmde dot Clique no elemento da cena, classe Night , e dentro do Caris eu quero mudar a cor de fundo. Antecedentes. Antecedentes, quero fazer com que seja a hashtag dois, dois, dois, oito, duplo três Essa cor azul marinho. Caso contrário, você pode usar a cor cinza escuro, depende de você. Vou configurar esse arquivo. Agora, se eu voltar para o navegador e clicar no sol, agora você pode notar que ele se transforma nessa cor azul marinho escuro e nos dá o modo noturno. Agora vamos voltar ao código do Visual Studio novamente. Em seguida, quero mover o elemento Sundiv lado do colo ao clicar nele Vou cavar esta seção e, desta vez, quero selecionar o elemento Sundiv, que está dentro da cena e a classe noturna é ativada, então eu quero atingir o elemento Sundiv, o sol Aqui eu vou usar a propriedade chamada lept. Agora, em vez de usar 55%, quero mover esse elemento em 45% Com isso, quero mudar a sombra da caixa. Aqui vou digitar box shadow, zero, zero, zero, a cor da caixa é Hasa se for totalmente branca Vou configurar esse arquivo. Agora, para configurar esse arquivo se eu voltar ao meu navegador e passar o dia à noite, agora você pode ver esse sol movido para o lado esquerdo, 45%. É movido para o lado esquerdo quando eu transformo o dia em noite. Aqui, primeiro movemos esse elemento 45% para o lado esquerdo, depois removemos a sombra da caixa e a tornamos sólida porque precisamos remover o efeito crescente do sol. Em seguida, precisamos trabalhar na forma da lua. Para isso, vou duplicar esta seção novamente e, desta vez, precisamos trabalhar antes do pseudo-elemento do elemento Então, para digitar cólon e cólon antes. Então, dentro das calibragens, primeiro, vou criar um conteúdo em branco O conteúdo está totalmente em branco. Então eu quero posicioná-lo. Quero posicioná-lo absoluto porque quero mover esse elemento com esse sol quando ele se move de 55% a 45% Depois disso, precisamos colocá-lo. Precisamos colocar do topo aqui eu vou usar -20 pixels e da esquerda para a esquerda, eu quero colocá-lo 20 pixels Então eu vou definir dentro da altura desse elemento com 100%, também altura, 100%. Depois disso, vou definir o plano de fundo. Antecedentes. Para o plano de fundo, vou usar esse código de cores Haztag 22283 Basicamente, essa cor de fundo combina com essa cor de fundo do sol, a cor de fundo do sol noturno, porque precisamos esconder essa parte do sol Então eu vou converter essa caixa quadrada. Basicamente, por enquanto, é uma caixa quadrada, deixe-me mostrar se eu configurar esse arquivo e voltar ao meu navegador e clicar no sol, agora você pode ver uma caixa quadrada que está acima do sol e se eu a fizer redonda, ela criará uma forma de lua. Deixe-me te mostrar como. Então, se eu usar raio de borda, raio de borda, vou torná-lo 50% ou raio de borda, então vou definir esse arquivo Agora, se eu voltar ao meu navegador e clicar neste sol, como você pode ver, agora essa forma se transforma em forma de lua, a lua harpa, porque agora temos outro círculo acima da lua e essa cor do círculo é combinada com essa cor de fundo É por isso que é invisível. É por isso que podemos ver apenas a forma da lua. É assim que podemos criar essa bela animação usando Java Strip, CSS e HTML. E é assim que podemos transformar dia em noite e a noite em dia. Espero que agora esteja claro para você como podemos construir esse lindo projeto de animação. Então, obrigado por assistir a este vídeo Stune para nosso próximo projeto 18. Menu de navegação circular usando Javascript: Olá, pessoal. Bem-vindo à nova lição deste curso. Neste projeto, vamos criar esse efeito de toalha de menu circular, esse lindo efeito de toalha Como você pode ver, quando eu clico nesse botão de toalha, esses seis elos circulares aparecem e ele gira em torno do botão da toalha. E se eu clicar novamente, esses itens vão para trás do botão da toalha e se escondem. Para criar esse efeito, usaremos um pouco de JavaScript. Sem perder tempo, vamos começar a prática e ver como podemos criar esse lindo menu de toalhas Finalmente, estou no editor de código do meu estúdio de resultados e, como você pode ver, eu já crio um arquivo de estimativa de pontos de índice, estilizado cssfle e arquivo JS de pontos de script, e vinculo todo esse arquivo a este documento Agora, primeiro, dentro da etiqueta corporal, aqui vou pegar um recipiente. Vou pegar um recipiente profundo para digitar um recipiente de pontos profundos. Recipiente profundo dentro desse elemento Dev, vou criar outro botão DevElementF Então digite Dev dot Toggle. É para o botão Alternar. Então, dentro desse botão de alternância, eu quero adicionar o ícone do botão de alternância Para isso, vamos usar este site. Pontos iônicos: I/Slash, Lincons. Vamos obter todos os ícones deste site. Para obter os ícones, precisamos clicar em uso. Depois de clicar em Uso, aqui, precisamos copiar as duas tags de script. Então, para selecionar a tag Script e eu a copio, vou colocá-la dentro dessa tag body, mas antes que o ponto do script seja cinco. Eu quero configurar esse arquivo. Agora podemos usar ícones do site. Vamos adicionar o ícone de alternância. Para isso, vou voltar ao site e acessar a seção de ícones. A partir daqui e da seção de pesquisa, quero pesquisar o ícone de adição. Vou usar esse ícone. Eu seleciono esse ícone. E então eu seleciono esse ícone. A partir daqui, precisamos copiar esse código. Eu copio esse código e volto para o editor de código do salt studio. Dentro desse DV de alternância, vou colocar esse ícone. Vou colar esse código de ícone. Vou configurar esse arquivo. Em seguida, abaixo do botão, quero adicionar o menu Para isso, vou usar a tag UL UL. Então, dentro dessa tag UL, vou pegar a tag LI. Como vou atribuir a variável Css à tag LI, digite o atributo de estilo, estilo e heterótipo ou nome da variável aqui vou atribuir valor, alguém usa dois pontos e ela para atribuir Então essa variável é igual a um. Além disso, vou atribuir uma classe a essa classe de tag UL e o nome da classe é min. Então, dentro desse item da lista, eu vou adicionar Nora A. Em seguida, dentro dessa tag âncora, eu vou adicionar o ícone Primeiro, quero adicionar o ícone inicial. Vou voltar para o navegador. E a partir daqui, vou procurar minha casa. Vou usar esse ícone, copiar o código, colocar o código dentro dele e obter a tag. É isso mesmo. Vou configurar esse arquivo. Agora eu pressiono definir este arquivo. Se eu voltar ao meu navegador e mostrar a página da web, aqui você pode ver o botão de alternância e o ícone inicial Então, vou acelerar esse processo e adicionar todos os ícones um após o outro. Eu acelero esse processo e, um após o outro, adiciono todos os ícones, como contorno da câmera, esboço do Parson, upAnoline, esboço do e-mail, contorno da chave, etc adiciono todos os ícones, como contorno da câmera, esboço do Parson, upAnoline, esboço do e-mail, contorno da chave, etc. Então, me satisfaça se eu voltar ao meu navegador, é assim que parece. Agora precisamos começar essa parte de estilo. Para isso, vamos entrar no código do estúdio do usuário e entrar nessa seção de estilo, na página de estilo, no estilo ou no CSS Primeiro, aqui vou importar uma fonte. Vou usar fontes pop in para este projeto, então vou passar, então vou importar uma fonte pop-ins do Google. Depois disso, vou usar a estrela seletora universal. Então, dentro do Calibra diz, primeiro, vou definir a margem zero de toda a ducção Além disso, vou usar preenchimento. Além disso, vou atribuir zero para toda a ducção Vamos remover a margem e o preenchimento. Em seguida, tamanho da caixa, tamanho da caixa, caixa de borda. Depois disso, vou definir a da fonte, a família da fonte. Dentro do curso único, vou digitar pop-ins e ele vem da família de fontes Sans Sansal. Vou configurar Depois de configurar esse arquivo, vou abrir meu navegador e o editor de código lado a lado. Agora, como você pode ver aqui, abro meu navegador e editor de código lado a lado. Depois disso, precisamos remover os itens da lista. Em seguida, vou estilizar os itens da lista. Então, eu digito a tag LI, defino a tag AI e, a partir daqui, vou remover sua tag de estilo, List, style, e vou passar Nan wd. Depois disso, aqui vou selecionar a tag de âncora usando A e, dentro do Carlss, quero remover Vou usar decoração de texto, decoração de texto. Eu vou fazer com que não seja nenhum. Em seguida, vou estilizar a etiqueta corporal. Então, para selecionar o corpo. Depois, dentro da etiqueta corporal, dentro das cálices Primeiro, vou definir altura mínima, algum tipo de altura média, altura mínima, 100 VH Em seguida, vou usar a propriedade display porque precisamos alinhar o centro de conteúdo da exibição do tipo de página e vou torná-la fragmentada Depois disso, justifique o centro de conteúdo. Também alinhe, alinhe o centro dos itens. Com isso, vou adicionar um fundo gradiente. Então, digite a cor de fundo. E aqui eu quero usar a cor do gradiente linear, gradiente linear e, em seguida, nos resfriados, vou passar o valor do gradiente linear Para essa cor de gradiente, vou usar esse valor 45 graus, eu quero girar esse gradiente em um ângulo de 45 graus, então eu uso essas variantes de cor, roxo claro e vermelho Vou configurar esse arquivo. Até configurar esse arquivo, ele não está funcionando porque aqui precisamos usar apenas o plano de fundo, não a cor. Agora, se eu definir esse arquivo, como você pode ver, agora ele está funcionando. Ele alinha todo o meio desta página vertical e horizontalmente Além disso, mudou a cor de fundo. Em seguida, precisamos direcionar o contêiner. Precisamos estilizar esse contêiner. Deixe-me mostrar esse elemento do continente. Para isso, vou copiar o nome da classe e voltar ao estilo CSS five. Aqui vou selecionar o elemento continente e, dentro da calibração, primeiro vou definir maconha e vou ter que passar de 270 pixels Além disso, a altura de 270 pixels é uma caixa quadrada. Depois disso, vou usar a propriedade distal, display, e vou torná-la flexível, o centro de conteúdo Justify Alinhe e alinhe o IM também no centro. Depois disso, também vou definir a posição e vou criar uma posição. Vou tornar isso relativo. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. E para entender a área quanta área usamos para esse contêiner, você pode usar a cor de fundo por enquanto. Deixe-me mostrar que alguém usa fundo, você pode usar qualquer cor. Eu vou usar a cor vermelha, ED Eu vou vender esse arquivo. Depois de definir esse arquivo, agora você pode observar a área. É para fins temporários. Inicialmente, criamos uma caixa quadrada. Em seguida, fazemos com que seja desfixado para alinhar o ícone de alternância no meio Agora vamos estilizar esse botão de toalha. Precisamos estilizar esse botão de toalha usando o nome da classe. Vou copiar o nome da classe e voltar ao estilo ou arquivo CSS, e aqui vou selecionar o botão toalha usando o nome da classe e, dentro do recesso de cor, primeiro vou atribuir molhado para esse botão, vou usar 70 pixels Então eu vou atribuir a altura. Altura também de 70 pixels. Depois disso, vou definir a cor do plano. Cor de fundo, eu vou usar a cor branca. Branco. Além disso, na próxima propriedade, vou usar o raio da borda Raio da fronteira, vou chegar a 50%. Depois disso, vou definir a cor. Cor, e aqui vou usar cor, cinza escuro, Hazteg Aqui usamos a puberdade colorida porque os ícones são literalmente fontes Depois disso, vou usar a propriedade de exibição Display, vou torná-la flexível, justificar o conteúdo, justificar o centro de conteúdo Alinhe o item também no centro. Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou torná-la de 30 pixels. Acho que 30 pixels são suficientes para isso. Se eu definir esse arquivo, é assim que ele se parece. Vamos ter uma boa aparência. Então eu quero fazer um ponteiro de cazar quando eu passo minha casa sobre Então, vou levar carros para cima, vou fazer dele um indicador Além disso, vou fornecer esse valor de índice de dados S índice 20. Em seguida, vou usar a propriedade de transição e também transição e fornecerei a duração da transição, 0,3 segundo. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Se você colocar minha coalhada nela, agora você pode ver que nossas cartas se transformaram em ponteiros Essa é a primeira parte deste tutorial. E na próxima parte deste tutorial, iniciaremos o JavaScript e também trabalharemos nesse botão de alternância Quando clico nesse botão de luta, quero transformá-lo em um sinal, o sinal de cruz. Obrigado por assistir a este vídeo fique ligado na nossa próxima parte