0

Efeitos de zoom (CSS + HTML)

Ruan Andrade
Ruan Andrade

Olá, doces pessoas. Venho compartilhar um pouco de conhecimento usando essas duas tecnologias (CSS + HTML) para que todos possam treinar e ver o seu site ficando estilizado de forma bem simples.

Primeiro crie um arquivo com extensão .html e faça o passo abaixo:

Usando uma tag do html chamada 'div', coloque uma classe nessa div chamada 'img-wrapper' ou como você quiser identificá-la, de modo a ficar semelhante a isso:

 <div class="img-wrapper">
              <img src="img/bg.jpg" alt="imagem de fundo">
          </div>

Lembrando que a tag "img" trabalha com imagens, e o atributo "src" irá especificar o caminho. Como a minha imagem está dentro de uma pasta específica pra isso (organização em primeiro lugar), eu tenho que passar esse caminho exato, de modo a ficar como: "pasta / nome do arquivo", que no meu caso foi: "img/bg.jpg".


Obs: sempre que estiver treinando, nunca esqueça de colocar o atributo alt na sua tag quando envolver imagens, para que as pessoas com limitações visuais estejam igualmente informadas quando seus leitores de telas traduzirem para eles. Por que "sempre que treinando?" Bem, porque quando forem para o projeto finall de um cliente, vocês jamais irão se esquecer de colocar! :) <- Eu feliz sabendo que vocês entenderam.


Bem, agora crie um arquivo com a extensão .css para podermos estilizá-la, e crie algo semelhante a isso:

.img-wrapper {
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-color: rgba(0, 0, 0, 0.88);
}

.img-wrapper img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.5;
   animation: zoom 25s;

}

@keyframes zoom {
   0%{
       transform: scale(1.3);
   }
   100%{
       transform: scale(1);
   }
}

Vamos por partes, eu vou deixar de lado um pouco as propriedades mais "básicas" apenas porque eu digitei muita coisa, e percebi que o artigo ficou extremamente extenso e apaguei , mas estou aberto para todas as perguntas, então fiquem sossegados.


Bem, o keyframes é uma regra do CSS que vai definir etapas da sua animação, como no caso acima, o que acontecerá entre 0% e 100% de zoom na imagem. Cada keyframe diz como o elemento deve ser renderizado em um tempo dado durante o período da sequência de animação, cujo no caso eu passei no seletor acima da regra> animation: zoom 25s.

Ou seja, durante 25s a imagem vai dar zoom.


Bem, acho que é isso, é minha primeira postagem aqui e estou um tanto incerto sobre a qualidade, mas aceito todo e qualquer tipo de crítica construtiva.


Espero que tenha gostado,


Boa noite, bom dia ou boa tarde (dependendo de quando ver essa postagem).


ATT,

Ruan.



0
0

Comentários (1)

None

Brasil