CSS3 – Efeito com animação sem jQuery – Rollover

Olá pessoal, tudo bom?
Primeiramente peço desculpas pela demora a postar novos tutoriais aqui no site. Muito serviço e pouco tempo.
Mas vamos lá!
Hoje irei dar início a uma série de tutoriais sobre efeitos com animações com jQuery e CSS.
Espero que gostem.

A bastante tempo algumas pessoas estão me pedindo para criar mais tutoriais sobre efeitos com animações.

Hoje irei ensinar um efeito bem legal para adicionar à suas páginas de “clientes”, por exemplo, ou até mesmo em seus thumbnails.

Esse efeito é estilo ROLLOVER, porém com animação em CSS3.

Exemplo

  • bradesco
  • ford
  • senac

Passo 1: Criando as imagens

Para poder utilizar esse efeito, vai ser necessário criar imagem por imagem para cada objeto. Dependendo do caso, todas as imagens devem possuir o mesmo tamanho, por exemplo para uma tela de “clientes”.

Utilizando o exemplo da tela de clientes, vamos criar as imagens abaixo, com a proporção de: 150px x 202px.

senac  ford  bradesco  vivo

Perçebam que as imagens possuem 2 versões da mesma logo, na parte superior a logo em preto e branco e na parte inferior a logo colorida.

Percebam também que todas as imagens possuem um padrão. Criamos um retangular na vertical, dividimos ao meio e adicionamos cada imagem no centro de cada parte do retângulo. Essa padronização é extremamente importante para que o efeito funcione 100% em todas as imagens.

Passo 2: Criando nossa lista de clientes

Agora que já temos nossas imagens, vamos estilizar para deixar nossa tela de clientes bem bacana e pronta para receber o efeito.

HTML – lista de clientes

Estou utilizando o elemento de lista ul, pois gosto de manter a semântica do HTML, mas você também pode utilizar div.

Todos os clientes terão um link que irá redirecionar para seus respectivos websites e todas as imagens serão chamadas de acordo com as que criamos.

FICA A DICA

Percebam que estou utilizando o atributo alt em todas as imagens.. Isso é extremamente importante para manter seu site acessível.

Acessibilidade: Acessibilidade à Web significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web. Mais concretamente, significa uma Web projetada de modo a que estas pessoas possam perceber, entender, navegar e interagir de uma maneira efetiva com a Web, bem como criar e contribuir com conteúdos para a Web.

PASSO 3: Estilizando e adicionado o efeito

Após criarmos nossa lista de clientes, vamos estilizar com css para que fiquem alinhados um ao lado do outro para termos uma melhor visibilidade.

Percebam que utilizei a propriedade overflow para esconder o resto da imagem e estou mostrando apenas metade dela.

Agora vamos ao efeito, bem simples porém bastante legal.

Adicionamos ao objeto img a propriedade transition do CSS3, que vai nos proporcionar um efeito suave de transição.

E adicionamos no hover de cada link, um margin negativo que irá empurrar a imagem 101px para cima, ou seja, metade dela, revelando assim o que estava escondido pelo overflow.

Agora seu resultado deve estar assim:

  • bradesco
  • ford
  • senac

FINALIZANDO

Bom galera, é isso ai.
Espero que tenham gostado do efeito e prometo que mais pra frente irei postar muitos outros.

Grande abraço a todos vocês e até mais!

Não deixem de compartilhar e ajudar o TUTWD a crescer ainda mais.

Obrigado.

TAGS: , , , , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

0

Deixe o seu comentário!

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código