Começar com animações de CSS

1. Boas-vindas ao curso!: Com tantos sites incríveis e alguns não tão impressionantes , muitas vezes pode ser difícil fazer seu site se destacar da multidão. Uma forma de fazer isso é adicionar algumas animações ao seu texto , como o título de uma página ou qualquer outro texto de título. Não queremos exagerar e animar tudo , mas alguns textos chamativos podem realmente chamar a atenção do usuário. Aqui, você vê os exemplos do que vamos criar nessa classe usando HTML e CSS. Juntos, criaremos 10 exemplos, que você poderá aplicar facilmente a projetos reais posteriormente. Com todos esses textos em movimento e animações de aparência complexa, eles acham que eles são muito complexos de construir. Bem, na verdade, tudo o que você vê aqui é bem simples com a maioria precisando apenas de algumas linhas de CSS para criar a animação. Na verdade, geralmente escrevemos mais CSS para deixar nosso texto aparência que queremos e, na verdade, usaremos para a animação em si. Você aprenderá todas as técnicas úteis, como quadros-chave, modos de faturamento, duração das animações, atrasos, efeito de atenuação, cálculo de valores com variáveis, combinação de animações, polígonos e caminhos de clipe, e também alguns CSS gerais. Esta aula foi projetada para ser adequada para iniciantes , embora alguma exposição a HTML e CSS seja uma vantagem real, pois presume-se que você conheça o básico. Você não precisa ter feito nenhum trabalho de animação no passado. Além disso, tudo o que criarmos será criado de forma totalmente gratuita dentro do navegador. Você não precisa de nenhuma compra ou software adicional. Podemos começar imediatamente dentro do navegador. Com isso, vamos agora passar para a primeira animação e nos vemos no próximo vídeo. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição. Revise o código que você escreve e pense em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa ficar muito perdido e desviado da aula. Você pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare, não só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Animação 1: animações básicas e quadros principais: Conforme mencionado no vídeo de introdução, nenhum software ou compra adicional é necessário para concluir esta aula. Tudo será concluído dentro do navegador usando um site chamado codepen.io. Vamos dar uma olhada rápida neste site e ver como configuramos as coisas. Para começar, acesse codepen.io. Esse será o site que usaremos para criar todas essas animações. Se você quiser e tiver um editor de texto como o Visual Studio Code já configurado, use-o gratuitamente. Isso está completamente bem. Mas, para mim, vou criar uma nova caneta para cada um desses exemplos de código. Depois de criar uma conta e fazer login no Codepen, você verá uma tela semelhante a esta. À esquerda, temos uma barra lateral onde podemos criar uma nova caneta. Clique nesta caneta e isso deve criar novas fotos vazias do site. Dentro do Codepen, teremos uma seção HTML, uma seção de folha de estilo e também uma seção de JavaScript. Tudo isso será vinculado e combinado para que possamos escrever nosso código e ver essa prévia na janela abaixo. É muito fácil começar a criar trechos de código simples e ver os resultados muito rapidamente. Nos próximos exemplos, veremos algumas variantes diferentes de animações e como podemos trabalhar com diferentes tipos de texto. Para isso, precisamos de um texto de logotipo incrível com o qual trabalhar. Neste exemplo específico, vou isolar cada uma das letras do texto para ser um único elemento e veremos o porquê quando começarmos. Primeiro de tudo, crie um div, que será um invólucro para todo o nosso texto. Adicione uma classe igual a title_container e usaremos isso para adicionar alguns estilos em breve. Para esses próximos exemplos, vou usar um nome comercial chamado fábrica de cupcakes. Para alguns dos exemplos posteriores, podemos digitá-lo como uma sequência completa de texto, exatamente assim. Mas para essa animação em particular, vamos trabalhar com cada um desses personagens individualmente. Isso significa que precisamos isolar cada um deles adicionando cada caractere aos seus próprios elementos HTML. Para isso, podemos criar algo como uma extensão com elementos de extensão. Agora, criaremos nossos textos com um caractere vez usando Control ou Command C para copiar. Cole com Control ou Command V. Então continuaremos fazendo isso até soletrarmos a palavra fábrica de cupcakes. Você também pode alterá-lo para um nome diferente, se quiser. Isso realmente não faz nenhuma diferença. Mesmo que seu nome seja mais longo ou mais curto, a animação não faz diferença. T-O-R-Y. Lá vamos nós. Este é o nosso texto todo explicitado. Também para a última palavra fábrica, só para adicionar um estilo diferente. Na verdade, vou segregar isso adicionando uma classe. Defina o nome da classe igual a factory e, em seguida, também podemos copiá-lo e colá-lo em cada um dos seguintes elementos. Vemos o texto da fábrica de cupcakes. Na verdade, precisamos ter certeza de que escrevemos isso corretamente. Lá vamos nós. Todos estão pré-visualizados na parte inferior. Para começar, no CSS, podemos adicionar um pouco de estilo e layout e adicionaremos alguns estilos gerais à seção de corpo. Primeiro de tudo, a altura. Isso é apenas para apresentação. Vamos definir isso como sendo 100 por cento da altura da janela de visualização. Usaremos o flexbox definindo o tipo de exibição para ser igual a flex. Isso nos permitirá posicionar nosso texto no centro dessa janela. Faremos isso definindo o conteúdo justificado para estar no centro e eles devem empurrar o texto para o centro, horizontalmente. Alinhe os itens no centro. Isso nos dará o alinhamento vertical. Ambas as opções são possíveis porque o tipo de exibição padrão é estar em uma linha. Isso significa que o conteúdo é da esquerda para a direita na página, não em forma de coluna, de cima para baixo. Após nosso posicionamento, adicionaremos algumas fontes. Defina a família da fonte para ser igual à Georgia. Um substituto da serifa. Você também pode alterar isso se quiser ter uma fonte diferente ou estilo diferente no tamanho da fonte. Faça com que isso seja um pouco maior de 62 pixels. Isso o torna um pouco mais legível dentro do navegador. Lembre-se de que cada um desses caracteres em nossa palavra é cercado por esse elemento span. Vamos pegar esse elemento de extensão. Então, podemos começar a trabalhar adicionando um pouco de estilo. A cor do cinza ardósia. Até agora, todo o estilo que estamos fazendo é apenas para apresentação. Atualmente, não tem nenhum efeito na animação que vamos criar em apenas um momento. Em seguida, faça com que seja um pouco diferente da seção de fábrica. Escolheremos nossa classe de fábrica e também mudaremos a cor desta. Como essa é uma classe, usamos o ponto. Pegue o texto de fábrica. Então, podemos definir a cor dentro daqui. Eu vou escolher um valor hexágono, que é EEC 549 ponto e vírgula. Com todo esse estilo básico pronto, agora podemos começar a adicionar algumas animações básicas. Para criar uma animação em CSS, uma forma muito simples de fazer isso é definir o estado inicial e final da animação. Entre esses dois estados, o início e o final, podemos alterar qualquer uma das propriedades CSS que você desejar. Por exemplo, podemos definir a cor inicial do nosso texto cinza e, em seguida, podemos definir a cor final para uma cor diferente. Podemos alterar o tamanho da fonte. Podemos brincar com o espaçamento e qualquer outra propriedade que você queira. Para definir essas mudanças ou essa transição, o que precisamos fazer é usar os quadros-chave. Essa regra de quadros-chave tem um conjunto de chaves curvas como esse e, no interior, definimos o estado inicial e final da nossa animação. Podemos fazer isso definindo isso como zero ou zero por cento. Em seguida, podemos adicionar nossos estilos dentro dos colchetes encaracolados. Depois, o estado que queremos que apareça quando a animação for concluída em 100 por cento. Como estamos apenas começando com um exemplo simples, usaremos apenas essas duas porcentagens, mas você também pode adicionar quaisquer outros valores dentro dos quais quiser. Isso criará mais estados intermediários e animações complexas. Além de apenas adicionar nossos quadros-chave, também precisamos dar um nome a essas regras de quadros-chave. Vamos chamar isso de animação. Em seguida, definiremos o estado de zero por cento, que é o início da nossa animação. Para fazer com que cada uma dessas letras se mova, o que vamos fazer é adicionar alguma margem, que é algum espaçamento fora dos elementos no lado esquerdo. Vamos adicionar uma margem à esquerda de 10 pixels. Em seguida, quando a animação terminar, reduziremos isso para que a margem seja de apenas cinco pixels. O que isso fará com cada um de nossos elementos individuais, que são os elementos de extensão, adicionaremos essa animação, que começará adicionando mais espaço à esquerda e , em seguida, reduzirá isso até menos espaçamento, o que moverá efetivamente cada uma dessas letras, uma de cada vez. Para vincular isso aos nossos elementos de extensão, o que podemos fazer é pular para a seção de extensão. Colocar o nome da animação, que é igual a esse nome que atribuímos aos nossos quadros-chave. Se você salvar isso, atualmente não vemos nenhuma alteração nessa pré-visualização. O motivo é que, embora tenhamos definido o estado inicial e final, também precisamos declarar a rapidez com que essa animação é o processo. Quantos segundos a duração dura do início ao fim dos quadros-chave. Para fazer isso, logo abaixo do nome da animação, podemos adicionar a duração da animação. Para isso, quero usar três segundos. Podemos usar o S por segundos ou também podemos usar o MS por milissegundos. Por milissegundo, 1.000 é igual a um segundo inteiro. Vou manter isso em apenas três segundos. Agora, se apertarmos o botão Salvar ou também atualizar, você notará duas coisas sobre essa animação. A primeira coisa é que está realmente funcionando. Ele vai de uma margem esquerda de 10 pixels e termina em um valor menor de cinco pixels, fazendo com que cada uma dessas letras se mova. Bem, se você também olhar de perto, vamos atualizar. Quando chegamos ao final da animação, vemos esse salto logo no final. O que isso está fazendo é que a animação está começando, está terminando e depois voltando ao estado original, que estava antes de a animação ser processada. Tudo bem se for isso que você deseja fazer, se quiser restabelecê-lo de volta ao formato original. Como alternativa, muitas vezes você pode querer deixar o estado final exatamente como a animação terminou. Bem, para fazer isso, o que podemos fazer é usar uma propriedade chamada modo de filme de animação e definir esse valor para ser igual a encaminhamentos. O que isso fará é garantir que, no final de nossa animação, o modo de encaminhamento signifique que ele permaneça no estado final, definido em nossos quadros-chave. Agora, se salvarmos e recarregarmos a página, poderemos ver nossa animação entrar em vigor e permanecer no estado final de nossos quadros-chave. Só para finalizar, vou definir isso como igual ao logotipo número 1 da fábrica de cupcakes . Agora é nosso primeiro logotipo ou nossa primeira animação concluída. vejo no segundo. 4. Animação 2: como combinar animações: Para nossa segunda animação, vamos combinar duas animações separadas. O que faremos para começar é trabalhar com o cupcake, vou usar o espaço e as propriedades novamente para começar de forma mais ampla. A animação começará e, em seguida, elas se fecharão juntas e depois, quando tudo estiver concluído, desaparecerão no mundo da fábrica. Para começar, criaremos uma nova caneta clicando no botão de garfo na parte inferior. Isso fará uma cópia do nosso projeto existente para nos dar um ponto de partida com todo o HTML e os estilos básicos de que precisamos. Vou mudar isso para o logotipo número dois. Então, conforme mencionado, manteremos todo esse texto, manteremos o corpo e todas essas fontes básicas, mas criaremos nossos novos quadros-chave na parte inferior. Para deixar isso claro, o que exatamente estamos fazendo, mudaremos esses quadros-chave para serem chamados espaçamento e isso ajustará novamente a margem. Embora isso se aplique a todos os nossos elementos de extensão, vamos desaparecer na fábrica, então isso não é visível. Trabalharemos com o texto de fábrica logo em seguida, então começaremos adicionando uma margem total em vez de apenas à esquerda. Agora, para isso, vamos colocar a margem zero na parte superior e inferior, vou escolher 14 pixels à esquerda e à direita. Esse será o estado inicial em zero por cento e eu também vou adicionar isso em 25 por cento. Então, o que isso fará é garantir que nossa margem permaneça a mesma no primeiro trimestre da animação e, depois, no final, ela se misturará para formar um valor de margem diferente. Vamos mudar a margem, manter zero na parte superior e inferior e fazer quatro pixels à esquerda e à direita, vamos tentar e ver como está. Se formos até o vão. Bem, eu vou fazer é copiar essa margem no lugar como o estado inicial de nossa animação para que, assim que ela for carregada, nossa extensão ou nossas letras tenham essa margem à esquerda e à direita. Isso permanecerá no primeiro trimestre da animação e, em seguida, reduziremos o espaço entre cada um para quatro pixels, então, como alteramos o nome da animação de animação para ser espaçamento, vamos mudar isso e também podemos criar uma abreviatura para tudo isso, em vez de adicionar todas essas propriedades de animação em duas linhas separadas, podemos colocar todas elas em uma propriedade de animação. Temos o nome da nossa animação e, em vez de ter o tempo e o modo de filme como propriedades separadas, podemos adicionar tudo isso na mesma linha. Isso significa que podemos remover nossa duração e nosso modo de preenchimento. Tudo ainda deve funcionar como antes. Então, agora salve e atualize, começamos com uma margem de 14 pixels à esquerda e à direita. Isso permanece no primeiro trimestre da animação e, no final, isso é reduzido para quatro pixels. Como definimos o modo de preenchimento para ser encaminhado, esse também é o estado final, em vez de voltar ao valor original. Vamos ver isso mais uma vez. 14 pixels até 4, e isso permanece no lugar. No início deste vídeo, mencionei que vamos combinar duas animações separadas. A animação que temos, queremos aplicá-la apenas às palavras, ao cupcake e depois desapareceremos na palavra fábrica quando isso terminar. Para isso, precisamos criar uma regra de quadros-chave separada na parte inferior dos quadros-chave. Chamaremos isso de atraso. Então, isso funcionará com a propriedade de opacidade CSS e começaremos com 0 por cento e também 30 por cento. A razão pela qual definimos dois valores diferentes aqui é porque, repentinamente, o valor da opacidade é igual a 0. O que faremos é adicionar isso a cada uma das letras de fábrica. Isso definirá a opacidade, que significa que ela é totalmente transparente, então não veremos nenhuma das palavras dos primeiros 30% dos nossos quadros-chave. Então, no final, 100 por cento, faremos com que o valor da opacidade seja igual a 1, que é totalmente opaco, o que significa que nosso texto está de volta ao seu valor normal. Vamos destilar para a classe olfativa logo acima, logo abaixo da cor. Vamos definir a animação, novamente usando a abreviatura que podemos colocar no nome da animação de delay e executá-la em cinco segundos. Então, podemos ver novamente, se atualizarmos os primeiros 30% da animação, a opacidade será definida como zero e, no final, isso começará a desaparecer. Além disso, farei com que pareça um pouco melhor, vou reduzir o espaço entre cada uma dessas letras e também torná-la em itálico. Então, volte para a classe de fábrica. Coloque na propriedade font-style de Italic, vamos experimentar esta e também reduzir a margem, ou seja, 0 na parte superior e inferior e cinco pixels à esquerda e à direita. Vamos falar um pouco menos, vamos mudar isso para dois pixels. Pronto, é assim que podemos combinar duas ou mais animações e também mesclar todas essas propriedades CSS em uma abreviatura de animação. 5. Animação 3: como facilitar e cortar o texto: Bem-vindo de volta à nossa terceira demonstração. Vamos usar esse mesmo HTML para esse vínculo e também muito do mesmo estilo, então começaremos rapidamente duplicando nosso projeto. Então, garfo, nosso segundo logotipo. Isso duplicará nosso conteúdo original. Portanto, o HTML permanecerá exatamente o mesmo para que possamos controlar todas as letras individuais, vamos mudar isso mais tarde. O corpo pode permanecer o mesmo, o vão, podemos remover a margem e também as duplicatas que não deveríamos ter. Em seguida, vamos começar a trabalhar criando nossos quadros-chave. Para este, o que vamos fazer é tornar todas as letras mais amplamente espalhadas ou espaçadas com a propriedade de espaçamento entre letras. Então, vamos começar bem largo, carta para emprestar tudo de volta à posição original. Além disso, no final, colocaremos o texto em itálico definindo uma transformação. Assim, podemos remover um desses quadros-chave. Você precisará de um conjunto de quadros-chave para esse, e chamaremos isso de animação pois ainda há várias coisas. Novamente, em zero por cento. Então, conforme mencionado, usaremos a propriedade de espaçamento entre letras para este. Vamos definir isso como 10 pixels logo no início, também definiremos um estado intermediário, que é 50 por cento, que o espaçamento entre letras começará a ficar maior. Então, começaremos com 10 pixels de largura inicialmente e, na metade da animação isso será muito mais amplo. Vamos usar 100 pixels. Em seguida, no final, definiremos nosso espaçamento entre letras como 20 pixels. Mas isso é um pouco mais amplo do que o estado inicial original. Vamos salvar isso. Podemos colocar em nossa animação em nosso período, colocando o nome da animação. Vamos ver como isso fica. Você pode ver que ele fica mais largo e depois retorna ao centro em três segundos. Vamos nos refrescar e ver isso mais uma vez. Então, aqui, em zero por cento, definimos o espaçamento entre letras 10 pixels e terminamos em 20 pixels de largura. Assim, também podemos definir o estado inicial e final, também podemos facilitar ou criar essas animações, podemos facilitá-las, o que gradualmente traz nosso primeiro encontro, e nós também pode facilitar que eles finalizem ou finalizem gradualmente nossa animação. Então, para fazer isso dentro da nossa animação, definiremos o ease-in. Isso aumentará nossa animação de forma um pouco mais suave, mas se você quiser que ela seja facilitada e também eliminada, podemos selecionar a atenuação, atualização e, nesse caso, tudo ficará bem. Uma coisa que também precisamos fazer com o texto de fábrica é remover a animação não usada anteriormente. Também podemos remover o estilo da fonte em itálico, pois vamos pular todos os textos na tela aqui. Uma coisa que você pode notar também quando estamos trabalhando com esse espaçamento entre letras ou margem, pressionamos o texto para que fique bem largo e saímos da tela. Vamos apenas salvar e atualizar. Às vezes, você verá que o texto se divide em linhas adicionais; obviamente, essa não é a aparência que vamos escolher. Para corrigir isso, podemos trabalhar com o contêiner do título. Vamos pegar isso, que é o contêiner de todo esse texto aqui. Este é o cluster, então usamos o ponto. O que vamos fazer aqui é simplesmente definir o tipo de tela para ser igual a flex. Vamos experimentar isso. Agora você pode ver que o texto sai da página sem passar para a próxima linha. A razão pela qual ele faz isso é porque, por padrão, a caixa flexível tentaremos encaixar em uma única linha, a menos que adicionemos uma propriedade adicional , como flex-wrap. Flex-wrap restringirá essa largura à largura do contêiner da página e permitirá que ela se enrole em várias linhas. Obviamente, não queremos isso, então podemos removê-lo e manter as configurações padrão. Então, a última coisa que faremos é voltar aos nossos quadros-chave e definir a distorção em nosso texto. Inicialmente, vamos definir a transformação como um valor de zero a 50 por cento da nossa animação. Na transformação, usaremos a propriedade skewx e a definiremos como um valor inicial de zero. Isso significa que, na metade da nossa animação, não temos nenhum efeito da transformação. Mas, quando chegarmos ao final, copiaremos isso e colaremos em 100 por cento e definiremos a velocidade para menos 20 graus, isso agora causará uma diferença no final da nossa animação, que veremos agora mesmo. Em seguida, ele se inclina sobre todos os textos 20 graus e nos dá esse efeito itálico. Você também pode brincar com isso e fazer algumas coisas realmente loucas. Então, por exemplo, se quiséssemos que, no início da animação, todo esse texto fosse empurrado para fora das bordas da tela. Então, para entrar no centro, poderíamos fazer algo como adicionar uma margem à esquerda, que fizemos antes, 100vw, que é a largura da tela. Isso então começará bem amplo e, em seguida, todos os textos entrarão no centro. Vamos remover isso e manter nossa animação original. Ótimo. Só para finalizar isso vamos pular para o topo, e vamos chamá-lo de logotipo número 3. Salve, abra e nos vemos na próxima. 6. Animação 4: atrasos e Traduzir: Passando agora para a animação número 4. Como sempre, clicaremos no botão “Fork” para fazer uma cópia do nosso logotipo número 3. Vamos mudar isso para o número 4 como título e podemos reutilizar muito do mesmo código dos exemplos anteriores. Mas o que vamos fazer é dividir as palavras, o cupcake e a fábrica. Faremos com que a fábrica deslize da esquerda para a direita e, uma vez concluída após um atraso de tempo, desapareceremos nas palavras do cupcake. Já temos essa classe, uma fábrica para trabalhar com essa palavra. O que também faremos é ir até as palavras, o cupcake e adicionar uma classe igual a cupcake. Isso nos permitirá trabalhar com essa seção específica e se a copiarmos e colarmos em cada uma das seguintes letras. Agora temos duas seções claras e, em vez de trabalhar com o intervalo, substituiríamos isso pela classe de cupcake. A cor é boa, mas o que vamos fazer com as palavras do cupcake é desbotar isso no final. Começaremos com um valor de opacidade de zero. Isso significa que não vemos essas duas palavras inicialmente, mas as desapareceremos com nossa animação. Agora vamos descer até o fundo. Vamos configurar nossos quadros-chave. Para isso, vamos trabalhar com dois separados. Remova todo o conteúdo de dentro da nossa animação e chamaremos isso de deslizar para a direita. Este vai se aplicar às palavras fábrica. Ele vai começar à esquerda e depois traduzir no eixo x para a oposição. Em vez de configurar as porcentagens dentro dos quadros-chave, se você quiser ir apenas de um estado para outro, podemos simplesmente dizer para. Isso começará com nossas propriedades CSS iniciais que temos acima e, em seguida, vamos animar com as propriedades que adicionamos aqui. Podemos simplesmente duplicar isso, nossa seção de fade e chamaremos isso de fade. Este também pode manter a parte de dentro. Para desaparecer, vamos adicionar isso às palavras o cupcake. Lembre-se de que atualmente definimos a opacidade como igual a zero. Começaremos com isso como zero e, se copiarmos isso e colarmos em nosso fade, mudaremos isso para um e isso estará no final da nossa animação. Efetivamente, o que temos é essa opacidade em zero por cento e , em seguida, essa no final. Em seguida, podemos configurar isso. Podemos mudar a classe do cupcake, fazer com que a animação desapareça. Faça isso funcionar em 1,5 segundos. Salve isso e veremos nossa animação agora desaparecendo. Temos um problema familiar, que é que, no final, voltamos ao estado original da opacidade para ser zero. Podemos manter o estado final da animação definindo-a para avançar e tentar. Isso agora permanece em vigor. Agora podemos começar a trabalhar com o texto de fábrica, que começará à esquerda e depois deslizará para a direita. Já temos essa configuração de classe e a cor. Dentro daqui, podemos configurar o estado inicial da nossa animação. Usaremos a propriedade de transformação qual traduziremos o valor cruzado do eixo x de menos 150 pixels. Se salvarmos isso, podemos ver que empurrado para a esquerda, 150 pixels e esse será o estado inicial da nossa animação. Podemos copiar isso e terminar com o valor zero. Obviamente, precisamos adicionar essa animação deslizante à direita à nossa classe de fábrica. Coloque isso na animação que chamamos de deslize para a direita. Faremos isso em dois segundos. Além disso, mantemos o estado final com atacantes. Tudo isso funciona bem, mas uma coisa que você notará é que temos essa sobreposição da fábrica examinando as palavras cupcake. Uma das maneiras de corrigir isso é adicionar um atraso na animação. Só aparecemos depois de deslizarmos o texto de fábrica para a direita. A maneira de fazer isso é entrar em nossa seção de cupcakes e tivermos duas maneiras de fazer isso. Podemos adicionar um atraso de animação e configurá-lo para ser igual a qualquer número de segundos que você quiser. Isso adicionará um atraso de 1,5 segundo ao nosso fade in. Ou também podemos adicionar isso à abreviatura. Vamos colocar isso logo antes do nome da nossa animação. Vamos comentar isso. Isso ainda nos dá o atraso de tempo necessário. 7. Animação 5: texto deslizante: O próximo será um pouco divertido o que já temos. Vamos trabalhar com o grupo da fábrica e, em seguida, começaremos de novo no canto superior direito e depois moveremos isso diagonalmente para baixo para que fique abaixo das palavras, Cupcake. Isso ficará abaixo. Depois disso, após um pequeno atraso, adicionaremos as palavras TheCupcake alterando a opacidade. Vamos até o botão Fork e duplicaremos nosso projeto. Faça uma cópia disso e , em seguida, vamos alterá-lo para o logotipo número 5. Para fazer isso, adicionaremos uma margem inicialmente às palavras Factory, que a moverá de algum lugar no canto superior direito e a colocará diagonalmente no lugar. Para fazer isso, usaremos alguma margem. Agora, atualmente estamos trabalhando com cada uma dessas classes de fábrica. Se adicionássemos alguma margem a cada uma delas, ela se aplicaria individualmente a cada letra. Em vez disso, para mover isso como um grupo inteiro, o que vou fazer é cortar cada uma dessas classes de fábrica, cortar todas as extensões, criar uma nova seção div. Este terá a classe de factory_wrapper dentro daqui, cole em nosso conteúdo. Agora, isso nos dá um invólucro para trabalhar com toda essa palavra, para que possamos manter nossos estilos básicos para o corpo, o recipiente e também o cupcake. Está tudo bem. Podemos retirar essa seção comentada e depois ela começar a trabalhar com a fábrica , para que não precisemos nos transformar. Vamos trabalhar com margem para este. Podemos mover a animação, pois vamos aplicá-la ao nosso invólucro de fábrica. Vamos fazer isso. Selecione nossa classe e adicione uma propriedade de animação. Nessa propriedade de animação, podemos usar o nome do slide nos quadros-chave existentes durante dois segundos. Vamos deixar isso no estado avançado. Lembre-se de que os atacantes manterão os estados finais de nossa animação. Até nossa animação em nossos quadros-chave do slide à direita, aqui dentro, além de adicionar as duas propriedades, também podemos adicionar o estado inicial com as palavras, de. Podemos adicionar isso dentro desses colchetes encaracolados. Para isso, enviaremos nosso texto de fábrica para o canto superior direito, em algum lugar próximo a essa área. Para isso, adicione alguma margem no lado esquerdo. Vamos colocar isso na página em 300 pixels. Depois disso, no final, alteraremos isso para uma margem superior a 50 pixels. Vamos ver qual efeito isso terá. Como você pode ver, no início da transformação essa margem esquerda se aplicará ao lado esquerdo, empurrando esses textos para a direita e, gradualmente, no final isso adicionará alguns margem para o topo, que então empurra esse texto abaixo das palavras do cupcake. Vamos salvar isso e atualizar para que possamos vê-lo mais uma vez. Bom, isso está funcionando bem, mas apenas como um toque final, o que eu quero fazer é mover as palavras, Factory, para ficarem mais à esquerda. Vamos inserir isso logo abaixo das palavras, bolo. Para isso, vá para o estado final da nossa animação. Podemos então reduzir a margem restante. Vamos tentar o valor negativo de 100 pixels, veja como isso fica. Isso parece melhor. Talvez 120. Bom. Isso agora usa a palavra “ Fábrica” para ficar logo abaixo da palavra “bolo”. 8. Animação 6: variáveis, gerenciam e calculam atrasos nas rotações: Bem-vindo de volta e vamos começar com nossa animação no número 6, [inaudível] trabalhando em nossos projetos atuais. Renomeie esse número 6. Vamos ficar com o texto da fábrica de cupcakes, mas torná-lo um pouco diferente apenas para mantê-lo interessante. No momento, podemos remover a embalagem de fábrica, que envolve todos os textos de fábrica. Remova essa div, que são as tags de abertura e fechamento desta. Até o corpo, faça com que seja um pouco maior. Vamos usar o tamanho da fonte de 100 pixels. Vamos misturar as coisas com uma cor de fundo diferente. Você pode colocar isso como qualquer cor que quiser, mas eu vou escolher 1f1c1c, só para dar a isso uma cor de fundo mais escura. Podemos manter o contêiner do título. Não precisamos mais dessa aula de cupcake. Também removeremos o invólucro de fábrica para que também possamos remover o CSS correspondente. Só para restabelecer a cor das palavras cupcake, adicione-a ao corpo. A cor que era cinza ardósia claro. Agora estamos prontos para continuar com nossa animação. Esta será uma série de rotações nos eixos x e y e veremos como fazer isso adicionando isso a cada uma de nossas letras com o elemento span. Vamos adicionar a extensão. Aqui dentro é onde colocaremos nossa animação. Fazendo uso dos primeiros quadros-chave, o que faremos é chamá-lo de RotaTex. Você só precisa de um único estado porque estamos girando do valor original para 90 graus, então podemos colocá-lo como um valor de zero por cento. Isso vai passar por uma transformação que gira o texto no eixo x. Dentro dos colchetes, podemos colocar um valor dentro de graus e, se você quiser ver como isso fica sem a animação, podemos simplesmente colocá-lo em nossos elementos de extensão. Se salvarmos isso em 90 graus, não veremos nada na tela porque ela está sendo girada para fora da vista. Mas se mudarmos isso para um número diferente, como 100, podemos ver a rotação de 120. Esse é o efeito que vamos conseguir girando isso no eixo x e depois de volta ao estado original. Vamos mover isso, colocar isso como uma animação, de três segundos, o nome dos quadros-chave de RotaTex. Salve isso e agora você pode ver que ele começa no valor de 90 graus quando você começa em zero por cento e depois retorna ao estado padrão. Este está girando no eixo x, mas o que também podemos fazer é girar no eixo y para dar a ele eixo x, mas o que também podemos fazer é um efeito de rotação. Para isso, chamaremos nossos quadros-chave de spin. Como queremos apenas começar com um único valor, como aqui, começaremos com zero por cento também fazendo uso da transformação, mas essa será RotaTey. Para fazer uma rotação completa, precisaremos girar esses 360 graus, então, até nossa extensão, colocaremos isso em nossa animação. Este vai ser giratório. Vamos encurtar isso para dois segundos, salvar e isso girará nosso texto 360 graus e, em seguida, girará de volta ao estado inicial. Como podemos ver, isso só se repete uma vez, mas também podemos definir quantas vezes queremos que isso se repita. Se quisermos dois, substitua-os logo depois, isso gira duas vezes e também podemos continuar repetindo isso definindo isso com o valor de infinito. Essas são duas maneiras diferentes de girar no eixo x ou y. Mas também podemos fazer outra coisa em vez de girar tudo ao mesmo tempo, então, no momento, cada uma dessas letras está girando exatamente ao mesmo tempo para nos dar esse efeito. Mas também podemos tornar isso um pouco mais complexo adicionando um intervalo de tempo entre cada um deles. A forma de fazer isso é adicionando uma variável a cada uma de nossas letras. Faremos isso na forma de um atributo de estilo. Não precisamos dessa classe em cada uma dessas seções de cupcakes e podemos substituí-la pelos atributos de estilo. Isso é igual a uma variável que vou chamar de —i e definir a variável igual a um valor. O valor será incrementado pelo valor de uma dessas extensões. Isso significa que isso se multiplicará no intervalo de tempo. Não se preocupe se isso não fizer sentido no momento, vamos apenas copiar e colar em cada uma dessas letras. Vamos dar uma olhada em exatamente como isso funciona em apenas alguns instantes. Em seguida, número 3, colocarei isso em cada uma de nossas letras. O que temos agora aqui é uma variável chamada —i e cada uma delas tem um valor correspondente. Podemos ir até nossa animação, que está aqui. Manteremos a animação de rotação que gira no eixo y em 360 graus. Em vez de fazer tudo isso ao mesmo tempo, podemos adicionar um atraso de animação para cada um desses personagens. Depois da animação, passando um atraso na animação. Se quiséssemos, poderíamos simplesmente fazer um atraso, como um segundo, e isso se aplicará a tudo. Como não temos nenhuma referência às nossas variáveis, estamos apenas aplicando isso a cada uma das extensões. Em vez disso, podemos aplicar um cálculo, a função calc, e vamos atrasar cada um deles em 0,1 segundo. Multiplicaremos isso pelo valor da variável, que é —i nos dá esse bom atraso para cada um dos nossos elementos de span. Vamos ver isso mais uma vez. O que eu fiz aqui é que pegamos cada uma de nossas variáveis, uma de cada vez. Na primeira, multiplicaremos 0,1 segundo por um. Isso será simplesmente 0,1 de segundo, e então será 0,2 de segundo, 0,3 até a última letra, que é y, e isso será adiado em 1,7 segundos. Restabeleça a cor como um toque final. Também adicionaremos essa classe de fábrica de volta às nossas cartas, então classe é igual a fábrica, copie e cole nas seguintes letras. Aí está nossa animação, que mostra como podemos girar nos eixos x e y usando as transformações de rotação e também como podemos adicionar um atraso de tempo diferente a cada um deles. de nossos personagens, como fazer uso da função calc e das variáveis. 9. Animação 7: cores em movimento: Bem vindo de volta. Começaremos com nossa animação número 7, bifurcando nosso projeto atual. Para obter todos os estilos e conteúdos básicos. Vamos ligar para esse número 7. Esta será uma animação relativamente simples usando coisas que já aprendi, mas também muito bonita. O que vamos fazer é trabalhar com várias cores e também usaremos as variáveis no atraso da animação, onde trabalhamos anteriormente. Isso vai filtrar nossas quatro cores diferentes e girá-las. Para isso, precisamos apenas de um conjunto de quadros-chave. Chamaremos isso de quadros-chave de cor. Simplesmente definiremos a propriedade de cor CSS. O primeiro vai começar em cinza ardósia claro. Em seguida, colocaremos nele três cores separadas. Quatro cores no total. O próximo será de 25%. A cor depende de você, mas eu vou escolher o rosa choque com 25%. Cinquenta por cento será da cor cáqui. Então, a 100 por cento, a cor do azul claro. Vamos ver como isso ficará se colocarmos a cor em nossa animação. Vou transformar isso em uma animação de cinco segundos. Se salvarmos isso, agora podemos ver nossas cores estão começando a girar em nossos diferentes estágios da animação. Mas isso também só acontece uma vez. Lembre-se de que, anteriormente, também podemos fazer com que essas animações sejam executadas em um loop. Podemos definir quantas vezes queremos que isso seja executado ou também podemos definir isso como um valor infinito. Isso manterá nossa animação em execução constante. Você também pode ver que, quando chegamos a um determinado estágio da fábrica, o texto ainda tem essa cor amarela, que definimos anteriormente. Também precisamos remover as classes de cada uma dessas letras. Remova tudo isso. Isso está salvo e agora parece muito melhor, não temos nenhum conflito no CSS. Também podemos remover a cor de fábrica. Isso funciona como fizemos nos vídeos anteriores, porque temos essa variável que adiciona o atraso de tempo ou um atraso de animação a cada uma dessas chamadas. Cada uma dessas cores é aplicada às letras da esquerda para a direita após o atraso de 0,1 segundo. 10. Animação 8: letras em saltar: Aqui vamos com a animação número 8. Este será bem simples, com base no que tínhamos anteriormente. Atualmente, na animação anterior, que é a número 7, criamos um atraso na animação que causa esse efeito e o ciclo de cores da esquerda para a direita. Fizemos isso inserindo uma variável e, em seguida, levamos em consideração esse atraso de tempo. Eu multipliquei por 0,1 segundo. Percorremos todas as quatro cores em vários estágios e usaremos essa animação para o Número 8, causando um efeito de salto em cada uma delas. Faremos isso usando a escala de transformação y, que usamos anteriormente para expandir cada um desses caracteres verticalmente. Eu farei isso com um intervalo de tempo entre cada um. Vamos bifurcar a caneta atual e renomeá-la para o número 8. Não vai ser muito colorido para este, mas faremos com que pareça muito melhor. Vá até o final, criaremos uma segunda regra de quadros-chave. Chamaremos essa onda para dar a ela um efeito de onda. Agora, você pode ficar muito louco com isso. Você pode adicionar quantas transformações quiser em vários estágios. Mas um efeito agradável, simples e sutil é fazer isso na metade ou 50 por cento, onde podemos definir a transformação para transformar a escala no eixo y, e isso pode ser qualquer valor que você quero. O valor de um é apenas o tamanho normal da extensão. Mas vamos fazer com que seja 1,3 vezes maior que o tamanho. Usando nossa onda, podemos adicioná-la como uma segunda animação à nossa extensão, separá-la por uma vírgula. Vamos tentar isso em dois segundos. Está na nossa onda. Agora vamos ver como isso fica. Temos um bom efeito que vai da esquerda para a direita com o mesmo atraso de tempo que usamos anteriormente. Mas eu também vou acelerar isso. Vamos tentar um segundo. Isso é bom. Vamos para um pouco mais devagar, 0,7. Você pode brincar com esses valores e fazer com que funcionem exatamente como você deseja. Mas é assim que podemos combinar essas duas animações para criar um efeito bonito. 11. Animação 9: efeito brilhante: Bem-vindo de volta à Animação número 9. Vamos misturar um pouco as coisas e trabalhar com um título diferente. Concentre-se, vamos criar uma cópia. Esse é o número 9. Na verdade, esse vai usar um texto diferente então chamaremos esses deliciosos hambúrgueres e depois passaremos para o HTML. Vamos mover cada uma dessas extensões de dentro do contêiner do título e simplesmente colocar um elemento p. Esse elemento p conterá o texto de hambúrgueres saborosos. O que eu gostaria de fazer com este é criar um belo efeito de brilho de néon no fundo. Para fazer isso, trabalharemos com a animação novamente, mas usaremos a propriedade CSS de sombras de texto. Começaremos com a sombra da tecnologia para ter um determinado valor. Em seguida, para a animação vamos aumentá-la e , em seguida, restabelecê-la volta ao valor mais baixo e você verá como isso vai ficar em breve. No corpo, podemos manter a altura da tela. Podemos mover essa cor para o texto. O contêiner de título para mantê-lo no centro moverá a extensão, pois removemos todos os elementos da extensão e estamos apenas trabalhando com esse contêiner de título. Os quadros-chave, precisamos apenas de um conjunto de quadros-chave, pois usaremos a animação única com o conteúdo e renomearemos isso para brilhar. Como vamos fazer animações de um estado para outro, podemos usar zero por cento ou 100 por cento. Ou podemos usar o que vimos anteriormente, que é de e para. Esse é o estado inicial e final. O brilho. Isso será causado pela criação uma cor diferente e também de uma sombra de texto. No estado, que é o começo, definiremos a cor para ser cinza claro do CCC. Então, dentro dos dois estados, mude a cor para ficar simplesmente branca. Voltaremos a isso em um momento e veremos como isso fica adicionando nossos quadros-chave ao contêiner de título dentro da propriedade de animação. Eu envio um brilho. Fará isso por um período de dois segundos. Nossa animação funciona como você pode ver. Vamos apenas atualizar isso. Ele começa na cor cinza, que é CCC, e depois passa para a cor branca antes retornar ao estado preto padrão. Agora, há algumas coisas que queremos fazer para melhorar isso. Em primeiro lugar, queremos que isso continue funcionando infinitamente para que possamos adicionar a propriedade infinita dentro daqui. Isso fará com que a animação continue passando da cor frontal para o branco. Quase podemos ver isso entrar em vigor, mas o que seria realmente bom se passássemos do CCC colorido para o branco e depois voltássemos para o CCC e depois voltássemos para o branco e continuássemos percorrendo cada um desses correlativos continua percorrendo a animação e indo de cima para baixo. Para fazer com que elas sigam formas alternativas, também podemos adicionar uma propriedade chamada alternativa. Veja como isso parece. Agora, isso gira entre cada uma dessas cores. Podemos ver isso melhor se mudarmos para uma cor mais escura, como o vermelho. Isso está claramente funcionando. Vamos restabelecer isso de volta ao nosso CCC. Então, para dar esse efeito de brilho em segundo plano, usaremos a propriedade CSS chamada text-shadow. Quando o do estado, na sombra do texto. Não queremos nenhum deslocamento no eixo x ou y para a sombra, simplesmente queremos que ela fique no centro de cada um desses caracteres e, em seguida, empurre-a para fora do centro. Vamos mantê-lo em 00. Podemos adicionar uma sombra de texto de 10 pixels e a cor do ciano. Essa é a frente. Copie isso e adicione isso às duas seções. Mas desta vez vai ser um pouco maior. Vamos usar 50 pixels. Agora está em ciclos a partir do nosso valor menor ou maior. Então, assim como aconteceu com a cor, já que estamos usando a propriedade final, ela retornará ao valor pequeno e continuará entre os dois. Isso agora nos deixa com esse belo efeito brilhante para nosso logotipo. 12. Animação 10: caminhos de ondas de fundo e grampos: Parabéns, você chegou à animação final e essa vai ser um efeito muito legal. Como sempre, vamos até o botão Fork para criar uma cópia e renomeá-la. Este vai usar um texto diferente. Vou chamá-lo Waterside Cafe, que é a nossa animação número 10. Vamos dar a isso um tema de água porque vamos usar um fundo de água. Veremos como isso ficará em apenas um momento. Por enquanto, removeremos o contêiner do título. Também podemos remover esses quadros-chave e também substituir os textos pelo Waterside Cafe. Podemos mudar essa classe. Em seguida, fornece aos nossos textos uma carga de trabalho de cluster. A classe será igual à onda porque vamos criar um efeito de onda no estilo da água. Teremos o esboço de nossos textos atuais, que é Waterside Cafe. Então, ao fundo, teremos um efeito regado, que sobe e desce como uma onda. Isso vai nos dar um efeito muito bonito. Para isso, vou mudar a família de fontes. Vamos para Garamond. Podemos manter o plano de fundo completamente bom. Tudo o resto está bem. Depois, vamos para nossa aula de ondas. Para começar, antes de fazermos qualquer animação, vamos garantir que o texto esteja delineado. Podemos ver a onda efetivamente parecendo estar se movendo para cima e para baixo dentro de cada uma dessas letras. Para fazer isso, usaremos duas propriedades, que são a largura do traçado do texto e também a cor do traçado do texto. O traço nos dará o contorno de cada caractere, em vez uma letra totalmente sólida, como a que temos. Isso usará o prefixo Webkit para garantir que seja compatível com os navegadores modernos. Em seguida, uma largura de traçado de texto Eu defini a linha para ter um pixel de largura. Podemos ver que isso definirá a cor do fundo para ser transparente. Em seguida, defina a cor do nosso traçado de texto para ser o que você quiser, e eu quero escolher azul claro. Novamente, assim como na propriedade acima, também precisamos usar o prefixo Webkit para fins de compatibilidade, portanto, a cor do traçado do texto. Eu quero escolher o azul claro. Isso nos dá a base do efeito. Temos o esboço e, em seguida a próxima etapa é criar nossa animação, que vai se espalhar para cima e para baixo em nosso texto. Crie nossos quadros-chave de onda. Para fazer isso, precisaremos usar algo chamado traçado de recorte na forma de um polígono. Vamos dar uma olhada rápida em como trabalhamos com isso. Um traçado de recorte é efetivamente uma forma ou um caminho que recorta ou bloqueia o resto do conteúdo. Você criou um traçado de recorte com um círculo. Isso mascara a imagem bloqueando todo o conteúdo que a cerca. Abaixo disso, temos a forma de elipse, o que nos dá essa borda arredondada. Depois disso, temos um polígono em forma de diamante e, em seguida, uma forma completamente diferente na parte inferior. Para alcançar qualquer um desses caminhos, precisamos passar por uma série de pontos ou coordenadas. Como podemos obtê-los? Bem, poderíamos brincar com esses números manualmente. Poderíamos desenhá-los em determinados gráficos, programas ou também usar alguns geradores on-line. Um exemplo disso é um site chamado cssportal.com, tem um gerador de clip-path que nos dá muitas formas diferentes para começar. Você pode ver que tudo isso mascara a forma do plano de fundo. Também podemos arrastar cada um desses pontos para criar um traçado de recorte diferente. Isso é gerado automaticamente para nós. Essa é uma maneira muito simples de criar nossos clip-paths. Como estamos criando um efeito de onda, o que queremos ver é algo como um polígono personalizado. Isso nos dá vários pontos na página. Podemos clicar em vários estágios da imagem, assim como eles estão aqui. Eu vou criar quantos pontos diferentes eu quiser. Como você pode ver, isso nos dá esse traçado de recorte, que é uma forma poligonal. Então, dentro de cada um desses pontos, cada um desses pontos tem uma certa posição nos eixos x e y. Você pode ir em frente e brincar com esses valores, se quiser. Eu já tenho alguns números em mente que vou usar. Vamos voltar ao nosso projeto sobre os quadros-chave. A ideia por trás disso, o que vamos fazer é configurar dois conjuntos separados de caminhos de recorte. Vamos configurar um certo caminho que será o estado inicial em zero por cento. Configure a regra de zero por cento. Em seguida, mudaremos essa metade de 50% para um estilo de onda diferente. Isso fará a transição entre nossos dois valores. Então, no final, com 100 por cento, retornaremos ao estado original. Com isso em mente, também podemos usar uma abreviatura que separa esses dois valores com uma vírgula e, em seguida, colocar nossos traçados de recorte dentro deles. Vamos começar. Assim como vimos no gerador, usaremos o traçado de recorte, que tem a forma de um polígono. Em seguida, dentro dos colchetes, vamos inserir cada um dos caminhos que queremos usar. A primeira posição está em zero por cento e depois 65. Em seguida, examinaremos uma série de todos os pontos, exatamente como vimos no gerador. O próximo é 15 e 49 por cento, todos os valores presentes separados por uma vírgula, 32 por cento e 55 por cento, 58 e 69, 69, 74, 82 e 89, 94, 93, 100 por cento e 100 por cento, e o último para este é zero por cento e 100. Esse é o estado inicial e final da nossa transição. Então, podemos fazer a transição para um valor diferente dentro dos 50 por cento. Assim como antes, configuraremos nosso traçado de recorte, que é um polígono, e depois inseriremos nossos valores. Esses valores serão uma pequena variante dos números acima; ele fornece um efeito de aparência sutil, começaremos em zero por cento e 60 por cento, 12 e 65, 31 e 66, 49 e 62, 57 e 50, 68 e 45 por cento, 100, 46, 100, 100 e, finalmente, em zero por cento e 100. Este é o nosso traçado de recorte agora concluído. Vamos fazer a transição entre esses dois dentro da nossa onda, como sempre faremos isso com a animação, passando o nome dos quadros-chave. Mantenha isso relativamente lento durante seis segundos. Também queremos repetir isso com infinito. Agora, assim que você fizer isso, você notará que a animação começa a ter efeito, mas não é exatamente o efeito que queríamos. Queremos manter o contorno deste Waterside Cafe o tempo todo e inserir efetivamente a onda em seu interior. Atualmente, como você pode ver, fomos removidos do texto do contorno em vez de colocar a onda dentro. A maneira de fazer isso é também acessar nossa onda logo acima. Adicionaremos os pseudo-elementos de antes. Isso efetivamente adiciona um elemento filho antes da nossa onda. Criando algo de forma eficaz logo antes desses elementos p sem realmente criá-lo. Mas o que realmente queremos criar? Queremos inserir nossa animação, que possamos recortá-la em nosso lugar e colá-la nela. Certifique-se de que esses elementos que acabamos de criar também tenham o mesmo conteúdo que vemos aqui. Também podemos adicionar a propriedade de conteúdo que adicionará o texto do Waterside Cafe. Isso o mantém na mesma forma do que temos atualmente. Mas, como você pode ver agora, se economizarmos, efetivamente teremos dois elementos. Isso é antes dos elementos, e esse é um que criamos com os elementos p. primeiro passo é remover isso dos documentos e colocá-lo diretamente atrás. Podemos fazer isso definindo o valor da posição CSS como o valor absoluto. O que isso faz é eliminar efetivamente o fluxo do resto do conteúdo, o que significa que ele efetivamente não ocupa nenhum espaço. Agora que terminamos, esse conteúdo agora fica atrás da onda original ou do texto original, que significa que não podemos vê-lo. Para ver isso, na verdade precisamos dar um pouco de cor a isso. Vamos definir isso para azul claro, com a mesma cor do contorno do texto. Nos dando esse belo efeito de onda de água, que parece estar dentro do texto. 13. Agradecimentos: Um grande parabéns de minha parte, por fazer essa aula e chegar ao fim. Espero que você tenha gostado e também tenha aprendido algumas técnicas novas. Espero que você possa colocar algumas dessas técnicas em prática em um projeto futuro, e eu também não posso esperar para ver o que você criou compartilhando seu projeto na área do projeto Skillshare. Mais uma vez, obrigado e espero vê-lo em uma aula futura.