Melhore seu site pessoal: como animar um botão Curtir

1. Introduções: O que faz com que um site pareça bom? Como você pode usar animações para se envolver melhor com seu público? O que está envolvido na concepção e interface intuitiva. Bem-vindo ao Aprender Fazendo: animando um botão curtir. Neste curso vamos aprender como fazer um simples botão em um animado. Oi, meu nome é Jude Sub e eu tenho feito sites e IU liso por mais de oito anos. Aprenderemos juntos sobre como utilizar HTML, CSS e JavaScript para criar microinterações divertidas e interface legal. Quando terminarmos, teremos aprendido a usar ícones de fontes personalizadas, ouvir o clique do usuário e manipular o DOM para exibir nossas animações legais. Dito isto, você deve ter algum conhecimento muito básico de HTML, CSS e JavaScript. Mas não se preocupe, eu vou guiá-lo ao longo do caminho. Com isso, vamos começar. Vamos fazer UI incrível esmagá-lo. 2. Baixe o editor do VS-Code: Antes de começarmos, vamos baixar um editor de texto. Eu gosto do VScode, você vai ver aqui em cima, eu tenho um disponível. Vamos em frente e abrir nosso navegador e na barra de pesquisa, vamos digitar código visual studio. Agora, vá em frente e clique neste link. Agora, eu estou usando o Windows, mas se você está usando Mac ou qualquer outro sistema operacional, sinta-se livre para baixar os binários apropriados para o sistema operacional, então basta clicar aqui e ali você tem. Agora, vá em frente e clique em “Download” e o download deve aparecer. Eu não vou passar por este processo de configuração porque eu já tenho um disponível. Mais uma vez, sinta-se livre para ir junto e juntar-se a mim, estamos usando o Visual Studio Code. Vejo você no próximo vídeo. 3. Como configurar o servidor ao vivo: Agora que instalamos o código do Visual Studio, vamos em frente e personalizá-lo. Uma das maneiras que você pode fazer isso é encontrar este pequeno botão chamado Extensões. Vamos adicionar um chamado Live Server. Na pesquisa, vamos digitar Live Server, e no topo direito aqui, vamos em frente o botão de instalação. Pode demorar um pouco, mas quando terminar, você quer apertar o botão de recarga aqui. O que o Live Server faz é que nos permite desenvolver localmente e ver as coisas mudarem instantaneamente em nosso navegador. Bastante bacana. 4. Como começar um servidor ao vivo: Ótima. Agora que instalamos o Live Server, vamos em frente e ver como ele funciona. Vamos explorar. Você notará que ele está pedindo nossa pasta de espaço de trabalho. Então vamos em frente e adicionar um. Eu já criei uma pasta de skillshare dentro dos meus documentos você possa ter qualquer estrutura que você quiser, mas eu vou usar isso e ele diz que é skillshare. Vou adicionar um novo arquivo e vamos chamar isso de index.html. Agora, VS Code está equipado com Emmet. Então vamos usar isso. Vamos digitar html:5 e clicar em “Enter”. Agora temos uma placa de fervura HTML carry que nos é dado de graça. Vá em frente e digite agora, Olá, Mundo e clique em “Salvar”. Vamos clicar na paleta de comando agora “Ver” e, em seguida, abrir ao vivo e você notará que ele já está auto-completado para nós. Servidor, abra com o Live Server. Você notará que agora temos um Servidor Live do nosso desenvolvimento local. Deixe-me minimizar isso rapidinho, só um pouco mais. Ótima. Uma coisa que você pode fazer é digitar, Este é um teste, e pressione “Salvar” novamente. Observe que vemos as mudanças aparecem instantaneamente sem ter que clicar em “Atualizar”, isso é um recurso bacana. Deixe-me ir em frente e digite h2, Isso é legal. Aperte “Salvar”. Você notará que o Live Server pega as alterações, e é por isso que eu realmente recomendo usar o Live Server para desenvolvimento local. 5. Como adicionar um botão básico: Para o primeiro projeto, eu quero passar um pouco mais de tempo descrevendo meu processo de pensamento quando eu abordo um problema de design. Uma coisa que sabemos é que um botão como é tecnicamente uma caixa de seleção. Vamos em frente e apenas fazer um HTML básico. Nós vamos fazer é se livrar disso e eu digitar menos de sinal, entrada, tipo é igual a aspas, “caixa de seleção”. Vamos fechá-lo adicionando uma barra e, em seguida, um sinal maior que. Agora, se apertarmos “Salvar” agora, você notará que tudo o que recebemos é uma caixa de seleção, mas isso não é muito descritivo; para que serve a caixa de seleção? Vamos em frente e adicionar, Goste de nós e depois aperte “Salvar”. Agora sabemos por que a caixa de seleção está lá para, e embora seja muito básico, os próximos vídeos vamos estilizá-lo e adicioná-lo algumas funcionalidades. 6. Como estudar como o estudo do projeto do botão: Para o nosso primeiro projeto, vamos começar muito simples. Vamos olhar para o botão Like do Instagram como uma inspiração, quando você clica nele, ele fica vermelho e enche o coração. É um feedback visual muito bom. Mas e se você pudesse realmente animá-lo e pulsá-lo quando o usuário clicar nele? É o que vamos tentar fazer. Vamos usar HTML, CSS e JavaScript para que quando o usuário clica nele, ele pulse. Se você não tocou em nenhuma dessas tecnologias, pode parecer um pouco assustador. Mas não se preocupe, é por isso que estou aqui. Vejo você no próximo vídeo. 7. Como adicionar uma folha de Stylesheet externa: Ótima. Agora que temos o nosso normalizador, agora podemos ter um CSS consistente em todos os nossos navegadores. Outra coisa que precisamos fazer agora é realmente adicionar o estilo. Vamos em frente e fazer isso. Você notará que criaremos um novo arquivo e chamaremos o style.css. Dentro do nosso style.css, eu vou seguir em frente e fazer uma regra simples para html e vai mudar a cor para tomate. Tudo bem, e depois, vamos apertar “Salvar” e mudar para o nosso Index.html e eu vou copiar isso e nós temos que ter certeza de não chamá-lo de normalizar, mas sim style.css. Depois de fazer e clicar em “Salvar” você vai notar que as cores mudam de fato para tomate. Você notará que eu realmente coloquei style.css abaixo normalize.css. Isso é realmente importante porque você quer normalizar realmente normalizar primeiro e depois nossos estilos. 8. Como usar fontes para ícones: Em que design, há várias maneiras de fazer as coisas. Uma das maneiras que poderíamos ter adicionado um coração era através do CSS, mas eu vou apenas criar uma nova pasta e vamos usar uma fonte. Vamos criar um diretório de fontes, e você vai notar que não há nada aqui, e nós realmente pretendemos obter um de Eu gosto do meu Fontello. Vá em frente e digite Fontello em sua barra de pesquisa. Você vai notar que leva um pouco para carregar. Há uma fonte impressionante, e você vai notar esses dois. Há um coração e o coração vazio. Vou em frente e selecionar esses dois e baixá-lo. Eu não tenho que baixar todo o Font Awesome, e você vai notar que ele está dentro da unidade zip, e eu vou para ir em frente e abrir através do Visual Explorer e clique com o botão direito do mouse nisso e pressione Revelar no Explorer. Você vai notar aqui que temos um diretório que é semelhante ao longo das mesmas linhas. Eu vou ir em frente e arrastá-los para a minha pasta de fontes, e você vai notar que está lá. Vamos voltar ao compartilhamento de habilidades e acertar CSS. Na nossa unidade zip, eu vou bater na pasta CSS, e eu só preciso deste aqui e movê-lo para você, CSS, e você vai notar que eu tenho todos os três agora. Perfeito. Deixe-me ir em frente e fechar estes dois, e você vai notar no diretório de fontes que ele está realmente vazio. Certifique-se de apertar este botão de atualização, e lá está. Tudo está preenchido corretamente. Vamos em frente e abrir nosso Fontello CSS. Você vai notar todos esses CSS que recebemos de graça. Referencia os arquivos de fonte e está descendo. Estas são as classes que você precisa lembrar quando nós realmente declarar os ícones do coração. Vamos voltar para index.html e vamos precisar fazer referência a ele porque é um CSS externo. Eu estou indo para ir em frente e incluí-lo pela abreviação Emmett, e ele está no diretório atual, pasta CSS, e o nome é fontello.css, deixe-me ir em frente e pressione salvar. Você realmente não vai ver nada imediatamente. Vamos precisar adicionar uma etiqueta I e ir em frente e digitar classe igual a dois pontos. Vamos chamar este ícone de coração traço, e novamente, isso é referências ao fontello.css, e você vai notar aqui que temos todos os três. Agora, se queremos o vazio, vamos apenas ir em frente e fazer ícone coração vazio oops, errado ortografia T, remover o outro T, apertar salvar, e lá vai você. Vemos ambos os corações, o cheio e o vazio. Novamente, escolhi a rota da fonte. Há muitas outras maneiras de você ter feito isso, mas eu senti que a rota da fonte era a mais fácil. Legal. Vejo-te no próximo. 9. Usando CSS para "pular" um coração: Até agora muito do que temos feito, foi apenas um trabalho de configuração. Mas agora estamos prontos, temos Fontello, temos o nosso normalizado, e temos o nosso style.css. Vamos em frente e remover o tipo de entrada. O que queremos fazer agora é criar um contêiner. Vamos criar uma div e criar uma classe chamada container. Ótima. O que vamos fazer é mover esses caras para dentro do nosso contêiner div que está formatado um pouco. Parece um pouco mais limpo. Certo, conserte esse pouco, e aqui está, bem, ótimo. Agora tudo está alinhado e nós vamos bater Save. Você vai notar que o índice parece bom. Nós criamos uma classe de contêiner, então vamos mudar para style.css, e vamos remover isso. O que vamos fazer é criar essa classe de contêiner e adicionar um display, um flex. Uma vez que você aperta Salvar, você vai notar que um tomate vermelho desapareceu, mas nós vamos ir em frente e também mudar nosso coração ícone, modo que quando você adicionar o tomate cor de volta, você vai notar que nós temos o coração cheio e dentro do ícone do coração e observe nossas cores lá, ótimo. Agora vamos adicionar um efeito pulsante. Vamos criar uma classe chamada pulso, e vamos adicionar a animação e o nome será pulso. A duração, vamos fazer 0,3 segundos, e vamos executá-la infinitamente. Podemos remover tudo o resto aqui, ótimo. O que queremos fazer é criar esta animação de pulso, vamos adicionar um quadro-chave em quadros-chave, e vamos chamá-lo de pulso. Ops, livre-se desse período. Dentro de nossas chaves, vamos adicionar uma porcentagem. Vamos começar com zero por cento, e basicamente, vamos adicionar transformação: escala. Vamos ter que definir em um, não se esqueça do ponto-e-vírgula. Vamos acabar com isso para a mesma transformação. Vamos em frente e adicionar transformação novamente e escalá-la para um. Mas no meio, vamos ter 50 por cento. Vamos em frente e adicionar 50%, e vamos modificar isso um pouco. Vamos adicionar transformação novamente, escala de dois pontos, e desta vez vamos fazer 1.3 ponto-e-vírgula. Você vai notar que acabei de apertar Salvar, mas nada está acontecendo mesmo com minha animação de pulso. Nós nos ajustamos para o infinito, mas notem nossa classe aqui para o olho, é chamado de coração de Ícone, mas o que precisamos fazer é adicionar pulso a ele. Vamos fazer isso, e aí está, está pulsando agora, é porque adicionamos a classe de pulso ao nosso “i tag”. Vamos em frente e fazer isso agora mesmo no nosso índice. Vou adicionar pulso, apertar Salvar, e lá vai você tem um coração pulsante. Esta vai ser uma lição fundamental para animar nos vídeos futuros. Vejo-te no próximo. 10. Como manipular o DOM: A próxima coisa que queremos fazer é manipular o DOM. Por DOM quero dizer o Modelo de Objeto Documento. Nós vamos querer especificamente atingir este pequeno coração. Como é que fazemos isso? Bem, vamos precisar de JavaScript. Uma das poucas maneiras de fazer isso é clicar com o botão direito do mouse e clicar “Inspecionar” ou Control+Shift+I ou Command+Shift+I, e você notará que há esse botão de console. Isso nos permite digitar em algum destino JavaScript. Vamos primeiro descobrir. Chamamos esse ícone de coração, e vamos clicar em “Console” e vamos digitar Document.QuerySelector. Certifique-se de que o S está em maiúsculas. Paren aberto, aspas simples, ponto, porque é uma classe que vamos segmentar, ícone de coração, e fim de aspas e parênteses. Veja, nós temos uma referência agora para a nossa classe de coração ícone. Esta será a base para como podemos usar JavaScript para modificar o DOM. Você pode até ir em frente aqui e clicar na pequena seta e você verá que todo o DOM está listado. O que queremos fazer é remover a pausa. Eu vou fazer isso diretamente e você vai notar que a animação pára. Agora sabemos como fazer referência ao DOM. Isso será fundamental para o próximo vídeo onde usaremos JavaScript para removê-lo. 11. Como adicionar um Javascript externo: Desta vez eu quero falar sobre como podemos adicionar JavaScript externamente. Anteriormente, falamos sobre manipulação DOM e como podemos fazer isso via JavaScript. Vamos começar removendo o primeiro ícone. Agora ficamos com o coração vazio. Vamos querer adicionar uma tag de script, mas vamos adicioná-la logo acima da tag body final. Elemento novamente tem isso disponível, mas você pode digitá-lo todo o caminho. Antes de irmos em frente e digitar algo, vamos realmente precisar criar uma pasta. Vamos chamar-lhe Scripts. Dentro de Scripts, vamos criar um novo arquivo e vamos nomear este main.js. Vou fazer algo muito simples, console.log ('isto é script java! ') e eu vou salvar isso. Nós vamos voltar para o nosso index.html. Agora que temos um lugar que podemos fazer referência, vamos olhar para o diretório atual e está dentro de Scripts. Chama-se main.js e aperte “Salvar”. Nada deve mudar. Vou apertar “Console”. Lá vai você. Temos agora uma referência a este main.js porque nós adicionamos em nosso index.html. 12. Como comprar um coração básico: Nesta lição, vamos juntar tudo o que aprendemos até agora em um só. Neste momento, queremos que este coração alterne. Atualmente está em vazio, mas se removermos o modificador vazio, temos agora o coração cheio. Agora, podemos definitivamente apontar o ícone do coração vazio, mas isso vai nos causar alguns problemas. Eu gostaria de criar um coração JS. O que isso nos permite fazer é segmentar sem se preocupar com o ícone de classe real. Estamos de volta ao nosso js principal, eu vou me livrar da instrução console e obter uma referência ao nosso HeartDom é igual document.QuerySelector ( 'js-heart '); novamente, eu vou movê-lo apenas um pouco. A razão pela qual fazemos isso é que queremos obter uma referência ao HeartDom, e eu vou escrever um comentário sobre isso. Ótima. A próxima coisa que queremos fazer é adicionar um ouvinte de eventos. Vamos escrever um comentário rápido, criar um ouvinte onclick, e então vamos adicionar o HeartDom, e novamente temos a referência dele. Vá em frente com o.on-click= (event) =>, que é igual a maior que o sinal, e então uma chave, e se você não sabia, esta é a maneira ES6 de escrever uma função. A próxima coisa que vamos precisar é de uma variável de gosto, para verificar se o usuário tinha gostado ou não anteriormente. Vamos em frente e criar isso agora mesmo. Vamos gostar é igual a falso. Basicamente, estamos inicializando para falso. Vamos escrever um comentário sobre isso. Vamos dizer inicializado para falso. Provavelmente ajuda a ser um pouco mais descritivo, inicializado como falso. Especificamente, isso acontece quando o usuário não selecionou. Ótima. Agora que criamos a variável like, quando o usuário clica nela, queremos que a variável like realmente inverta. Como é que fizemos isso? Adicionamos o ponto de exclamação e a variável gostou novamente, basicamente uma maneira extravagante de alternar o similar. Tenha isso em mente que esta é uma pequena maneira de inverter uma variável. Como você pode ver aqui, eu estou adicionando o ponto de exclamação que basicamente significa o oposto do que ele é atualmente. Em seguida, vamos verificar se gostei está definido como um valor verdadeiro. Vamos ter Target.ClassList. Certifique-se de que o L está em maiúscula.remove ('icon-coração-vazio'); novamente isto irá invertê-lo para que removamos o iconheart. Mas reparem no alvo aqui, eu vou realmente definir isso. Teremos target= event, a partir do objeto evento, ponto CurrentTarget, o T capitalizado para Target. O CurrentTarget contra a propriedade do objeto de evento que temos passando para a frente e vamos fazer uma const porque ele não vai mudar. Vamos ser um pouco mais descritivos. Esse alvo é basicamente o que clicamos. Nós assinamos aqui. Vamos escrever um comentário sobre isso. Isto é o que clicamos. Ótima. Novamente, usamos um alvo para basicamente remover o ícone antigo e vamos adicionar um novo com ClassList. adicionar e agora precisamos definir a classe que usamos, que é iconheart e grande. Temos que remover o vazio e adicionamos o preenchido. Precisamos agora do contrário. Vamos fazer outro aparelho encaracolado lá dentro. Na verdade, vamos copiar essas duas linhas e colá-las aqui e eu deveria virar a remoção no anúncio. Vamos fazer isso. Remover agora torna-se adicionar e adicionar torna-se remover. Outra coisa que eu gosto de fazer é ser mais consistente. Vamos mover a função de remoção para cima e o anúncio está por baixo dela. Agora é consistente com as declarações anteriores. Só para ter certeza de que entendemos o que está acontecendo, vou escrever alguns comentários. Para o primeiro caso, removemos o coração vazio, se gostarmos, e adicionamos o coração cheio. Nós vamos realmente fazer o oposto quando o usuário não tem gostado dele. Vamos em frente e colá-lo aqui e mudar isso para o coração cheio. Se não gostar, queremos adicionar o coração vazio. Perfeito. Apenas para uma revisão rápida novamente, base da variável curtida, vamos basicamente alternar os corações e foi isso que acabamos de fazer. Vamos refrescar e, lá funciona. Agora não é muito bom feedback, porque eu realmente quero que o cursor para você mostrar um dedo ponteiro. O que vamos fazer é criar uma classe de coração que basicamente inclui em si mesmo um ponteiro de cursor. Vamos fazer isso. Vou digitar Iconheart e começar com uma chave encaracolada. Na verdade, deixe-me ir com o coração e vamos digitar ponteiro do cursor e isso nos permite voltar para o nosso arquivo indexado e vamos adicionar em nossa classe de coração. Sempre que roll-over, vamos ver um ponteiro do cursor, como este. Perfeito. Agora é muito bom feedback, porque agora um usuário pode saber, se eu passar o mouse sobre ele, eu posso realmente alterá-lo. 13. Como animar o coração usando o JavaScript: Agora que somos capazes de alternar um coração, assim, o que realmente queremos fazer é que ele pulse quando um usuário clica nele. Vamos em frente e saltar para o nosso main.js. A maneira simples de fazer as coisas é simplesmente adicionar a classe de pulso. Vamos fazer isso agora mesmo. Você pode ser tentado a ir em frente e remover a classe de pulso quando não estiver mais leve. Mas isso vai nos dar um efeito ligeiramente indesejável. Veja isto. Vou apertar “Salvar” e voltar para o nosso navegador. Não é isso que queremos. Não queremos que pulse para sempre, queremos clicar nela uma vez e ter um pulso. O que vamos fazer é ir em frente e remover o pulso que pensamos que iria removê-lo depois de um “diferente”. Em vez disso, vamos começar com o HeartDom e anexar, e adicionar um EventListener, e vamos ouvir um final de animação. Quando a animação terminar, queremos que o coração remova a classe de pulso. Vamos em frente e passar no evento através da função de seta, e o que vamos fazer é ir em frente e direcionar o objeto do evento. Então vamos querer acessar o alvo atual do objeto de evento, e o que queremos fazer é remover a classe de pulso. Vamos fazer isso, .ClassList.Remove, e vamos digitar o pulso porque essa é a classe que queremos remover do DOM. Ótima. Vamos comentar isso. Vamos digitar remover a classe de pulso assim que terminar. Ótima. Vamos apertar “Salvar” e conferir. Espere, o que está acontecendo aqui? Bem, se você voltar para o nosso style.css, você notará que nossa classe de pulso realmente se definiu para infinito. Vamos e remova isso, salve e tente mais uma vez. Perfeito. Pulsa exatamente uma vez. Quando você olha para o Inspetor DOM, você notará que pisca rapidamente a classe de pulso e, em seguida, remove-se, e isso é porque anexamos o EventListener ao HeartDom, ouvindo o final da animação. Esta vai ser a base para muitas das nossas animações no futuro. Bom trabalho no primeiro projeto. 14. Conclusão: Este tutorial de animação foi bastante simples. No entanto, os princípios de segmentar uma cúpula, adicionar um ouvinte de eventos para animação terminam e ouvir a interação de um usuário como um clique podem ser usados para criar animações complexas. Espero que isso tenha sido útil para você.