Como criar um efeito de animação de desbotamento com JavaScript e CSS

Animações, transições e efeitos 3D são nada menos que um atraente. Sempre que você está construindo seu site ou projeto, você não deseja que ele se perca no aglomerado de milhões de sites disponíveis na Internet. Você quer que se destaque, você quer que diverta seus usuários e seja armazenado em suas mentes subconscientes. Para tornar suas páginas da web mais intrigantes, você precisa utilizar várias animações e efeitos de transição de página.

Um dos efeitos de animação populares e extremamente interessantes é o Aparecimento gradual e Desaparecer Animação, que pode ser implementada usando JavaScript e HTML \ CSS.

Etapa 1: Configure a página básica

Crie um novo HTML no seu editor de código preferido, crie um script.arquivo js e um estilo.Arquivo CSS também como mostrado:

Dentro do arquivo HTML, vincule o arquivo CSS e o script.Arquivo JS usando as seguintes linhas antes da etiqueta corporal:

Agora, vamos implementar uma animação de desbotamento em uma imagem e, para a imagem, usaremos uma imagem sem royalties da UNSPLASH. Você pode criar uma tag de imagem e um botão que usaremos para desaparecer e desbotar a imagem com as seguintes linhas:

id = "imagem" src = "https: // imagens.Unsplash.com/foto-1640273837947-EA830D50C191?ixlib = rb-1.2.1 & ixid = mnwxMJA3FDB8MHXWAG90BY1WYWDLFHX8FGVUFDB8FHX8 & AUTO = FORMAT & FIT = CROP & W = 2072 & Q = 80 "
alt = ""
/>


Efeito desbotado

Observe que demos o ID "Imagem" à imagem e ao ID de “MyButton” para o botão que estamos criando.

Como a imagem é bastante grande, definiremos uma altura e largura específicas no arquivo CSS usando as seguintes linhas:

#Image
Altura: 200px;
Largura: 200px;

Sua página deve ficar assim:

Temos nossa imagem no centro da tela e logo abaixo da imagem, temos o nosso botão.

Etapa 2: Modificando o arquivo CSS

Existem muitas maneiras de implementar uma animação específica usando CSS e JavaScript, mas para este post em particular vamos tocar com as aulas e o atributo de opacidade do CSS. Modifique seu arquivo CSS com as seguintes linhas:

#Image
opacidade: 1;
Transição: Opacity 0.3s de facilidade;
Altura: 200px;
Largura: 200px;

#imagem.desaparecer
opacidade: 0;

Para explicar o que estamos fazendo nas linhas acima: estamos simplesmente colocando a opacidade da imagem para 100% no início e se a imagem tiver uma classe ativa "desaparecer" Então a opacidade mudará para 0%. Mas, essa mudança de opacidade acontecerá em um caso, para fazer um efeito semelhante a animação, usamos o atributo de transição e o definirá como 0.3s.

Agora, tudo o que precisamos fazer é escrever algum script que alternará a classe "Desaparecer" Da imagem

Etapa 3: Alegando aula com JavaScript

No script.arquivo js, ​​vamos primeiro buscar o elemento de imagem e armazená -lo dentro de uma variável, e depois vamos alternar a classe, mas tudo isso deve ser feito no botão pressionar. Então, anexe as seguintes linhas no arquivo de script:

Deixe a imagem = documento.getElementById ("imagem");
documento.getElementById ("MyButton").OnClick = function ()
imagem.Lista de classe.alternar ("Fade");
;

Então, com isso, devemos ser capazes de implementar a animação de desbotamento e a transição de desbotamento também.

Etapa 4: testando nossa animação

A última etapa é executar o arquivo HTML em nossa máquina local e testar a animação após a pressão do botão, você deve ver a seguinte saída:

Como você pode ver no GIF acima, nossa animação está funcionando perfeitamente.

Conclusão

As animações podem ser facilmente implementadas com o uso de JavaScript junto com HTML e CSS para fazer as páginas da web parecerem muito mais atraentes e atraentes. Neste post, aprendemos a fazer uma animação de desbotamento e desbotamento em um elemento HTML atribuindo diferentes propriedades CSS na classe do elemento e depois alternando as classes usando JavaScript.