Como criar uma animação GIF e adicioná-la ao HTML
Atualizado pela última vez em 22 de novembro de 2023 by Peter Wood
No mundo em constante evolução do web design e da criação de conteúdo, a capacidade de incorporar recursos visuais e animações atraentes em páginas da web é uma habilidade valiosa. GIFs são uma das formas de animação mais envolventes e amplamente utilizadas na Internet. Se você deseja adicionar humor, criar elementos interativos ou simplesmente melhorar o apelo visual do seu site, saber como adicionar GIFs ao HTML é uma habilidade essencial para qualquer desenvolvedor web ou criador de conteúdo. Neste exemplo de guia, você conhecerá as etapas para integrar GIFs em código HTML para que você possa dar vida ao seu conteúdo da web.
Parte 1: Como criar animação GIF para adicioná-la em HTML
Antes de adicionar animação GIF ao HTML, primeiro você precisa de uma animação GIF. Se você encontrar uma animação GIF muito adequada no site, poderá salvar diretamente seu link para uso posterior, mas se não encontrar uma animação GIF adequada, você mesmo poderá fazer uma animação GIF para adicioná-la ao site. WidsMob GIF é um criador e editor de animações GIF que permite criar qualquer animação GIF desejada por meio de arquivos de vídeo e imagem.
1. Importe MP4, MKV, WEBM, MPEG e muitos outros tipos de arquivos de vídeo.
2. Personalize o conteúdo da animação GIF e visualize-a instantaneamente.
3. Ajuste as configurações HSL da animação GIF para obter a melhor experiência de visualização.
4. Adicione texto à animação GIF para explicação auxiliar.
- Baixe e instale WidsMob GIF no seu computador. Após a instalação bem-sucedida, inicie o software. Clique no Vídeo para GIF botão na página inicial do software, selecione o arquivo de vídeo na caixa de diálogo pop-up e importe-o para o software. Depois que o vídeo for importado com sucesso, a animação GIF será gerada automaticamente e começará a ser reproduzida.
- O conteúdo do vídeo será cada vez mais complicado, então você pode considerar selecionar novamente o conteúdo da animação GIF. Há uma linha do tempo abaixo da caixa de visualização da animação GIF. Você pode determinar o conteúdo da animação GIF por meio das caixas de seleção em ambas as extremidades da linha do tempo ou inserir o horário de início e o tempo de reprodução da animação GIF em ambas as extremidades. Clique no Jogar ícone para visualizar a reprodução da animação GIF.
- Clique na Ajuste de Vídeo botão. Na área de edição à direita aparecerão 3 opções para você ajustar o HSL da animação GIF. Ajuste o controle deslizante de Contraste e observe as mudanças em tempo real da animação GIF à esquerda. Se quiser obter a melhor experiência de visualização, você precisa cooperar diretamente com as outras duas opções.
- Para a animação GIF adicionada em HTML, pode ser necessário adicionar texto para auxiliar na explicação. Clique no Adicionar texto no canto superior direito da caixa de visualização, insira o texto na caixa de diálogo pop-up e defina a cor, a fonte, o tamanho do texto, etc. OK botão, e o texto é oficialmente adicionado à animação GIF.
- Selecione diretamente o texto na animação GIF e arraste-o para modificar a posição do texto na animação GIF. Para animação GIF em HTML, você pode ajustar o controle deslizante de Qualidade in Configurações do GIF para obter uma animação GIF de alta qualidade. Após a edição, clique no Exportar GIF botão para exportar a animação GIF e inseri-la em HTML.
Parte 2: Como adicionar GIF animado em HTML
Agora que você tem uma animação GIF, a próxima coisa a fazer é adicionar com êxito a animação GIF ao arquivo HTML para garantir que ela possa ser reproduzida sem problemas na Web. No entanto, as configurações de exibição de diferentes navegadores da web podem ser diferentes e você precisa continuar tentando garantir a melhor experiência de visualização.
- Certifique-se de que seu arquivo de animação GIF seja colocado no mesmo diretório do código HTML. Para abrir o arquivo HTML, você pode escolher um editor de texto ou um ambiente de desenvolvimento integrado. Encontre o código em seu código que precisa inserir a animação GIF. Geralmente você usa o tag para inserir animação GIF.
- Adicione src a img para especificar o caminho de armazenamento do arquivo de animação GIF. O caminho relativo é o endereço do arquivo armazenado no mesmo diretório que o HTML. Não se esqueça de escrever o nome e o formato da animação GIF. Caminhos absolutos permitem adicionar GIFs animados carregados no site.
- No atributo img, você pode definir o atributo alt, que pode fornecer uma breve descrição da animação GIF. Quando a animação GIF não carrega, o texto será exibido para assistência.
- Dependendo das configurações de exibição da Web, pode ser necessário ajustar a largura e a altura. HTML contém esta função de atributo.
- Salve o arquivo HTML com a animação GIF adicionada e você poderá abri-lo em um navegador da web para poder visualizar a animação GIF sendo reproduzida na página da web. GIFs animados devem ser reproduzidos automaticamente na maioria dos navegadores, sem necessidade de código adicional.
Parte 3. Perguntas frequentes sobre GIF para HTML
Conclusão
Até agora você já aprendeu como adicionar GIFs ao HTML e esperamos que este guia o ajude a aprimorar seu conteúdo da web e envolver seu público com animações envolventes. A web é um espaço dinâmico e a capacidade de incluir GIFs abre um mundo de possibilidades criativas. Quer você use GIFs para entretenimento, educação ou para aprimorar a experiência do usuário, lembre-se de manter suas animações relevantes, com desempenho otimizado e consistentes com o design geral do seu site.