Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Efeito CSS “Dinossauro”

Publicado em: 2013-08-5 — 15.379 visualizacoes         

dinossauro

Ultimamente recebi vários emails de meus leitores perguntando com criar o efeito que existe no existia no design anterior do site do Maujor que faz com que apareça um dinossauro, ao lado dos itens do menu de navegação, sempre que o usuário coloca o mouse sobre o link.

Trata-se de um efeito bem simples que no caso do meu site foi criado com jQuery, pois uso essa biblioteca para obter vários efeitos no site.

Por outro lado, suponho que os emails foram enviados por leitores que não têm intimidade com jQuery ou que buscam uma solução sem uso da biblioteca.
Assim, resolvi escrever essa matéria com a finalidade de orientar os leitores apresentando uma solução, entre as inúmeras possíveis, que ainda que não seja a melhor poderá servir de incentivo para a busca de outras.

A página que ilustra esse tutorial possui uma estilização semelhante à do site e pode ser visitada neste link (abre em outra janela). Visite a página e passe o mouse sobre os itens do menu de navegação.

Não vou entrar em detalhes de estilização da página, pois se você for usar esse efeito irá adaptá-lo ao seu layout.

HTML e CSS

Na marcação HTML do seu menu de navegação insira a imagem que irá aparecer ao lado dos links dentro de um elemento container dos links.
Na maioria dos casos o elemento-pai container dos links é o elemento ul ou, em alguns poucos casos o elemento ol, contudo inserir um elemento img como elemento-filho daqueles elementos é inválido segundo a sintaxe HTML. Assim, insira o elemento img dentro do elemento-pai de ul ou ol.

Observe o exemplo a seguir:

<nav id="menu">
<h2>Navegação</h2>
<h3>Fundamentos CSS</h3>    
    <ul>
        <li><a href="#">Introdução às CSS</a></li>
        <li><a href="#"> Sintaxe CSS</a></li>
        
        <li><a href="#">A propriedade CSS background</a></li>
    </ul>
<img id="dino" src="dinossauro.png" alt="dinossauro">
</nav>

Criando a marcação desta forma, facilitaremos a tarefa de posicionar de forma absoluta a imagem, tomando como base (ou contexto) o próprio container do widget da navegação definindo para ele posição relativa.

Observe as regras de estilo para posicionar a imagem:

#menu {
	position: relative; /* cria o contexto de posicionamento */
	/* mais declarações */
}
#dino {
	display: none; /* esconde a imagem */
	position: absolute;
	left: 102%; /* posiciona a imagem 2% (margem direita) após o container do menu */ 
	/* mais declarações */;
}

Nota: Omitimos as declarações de estilo não envolvidas diretamente no efeito.

A marcação HTML e a estilização mostradas anteriormente quando inseridas na página de exemplo produzem a renderização que pode ser vista neste link (abre em outra janela).

Não aplicamos display: none na página que foi visualizada, mas deverá ser aplicado para obtenção do efeito final.

JavaScript

Agora precisamos projetar o comportamento para obter o efeito, ou seja, fazer com que ao ser colocado o ponteiro do mouse sobre um item da navegação a imagem apareça ao seu lado. Lembre que ela, imagem, já está à 2% à direita dos itens e escondida. Falta fazê-la aparecer e “caminhar” na vertical. E, também fazê-la desaparecer quando o usuário retira o ponteiro do mouse dos itens da navegação.

As declarações JavaScript que fazem a mágica são mostradas a seguir:

<script type="text/javascript">
var dino = document.getElementById('dino'); 
var menu = document.getElementById('menu');
var itensMenu = menu.getElementsByTagName('li');
var j = itensMenu.length;

for (var i=0; i<j; i++) {
	itensMenu[i].onmouseover = function() {
		coordenadaY = this.offsetTop;
		dino.style.display = 'block';	
		dino.style.top = coordenadaY + 'px';	
	}
}

menu.onmouseout = function() {
	dino.style.display = 'none';	
}
</script>

Para mais detalhes consulte o código fonte das páginas exemplo.

O script é bem simples e usa as funcionalidades JavaScript previstas para o DOM1. Assim, o script é suportado por navegadores mais antigos. Testei no IE8.

Se você não entender o script ou tiver qualquer outra observação a respeito desta matéria poste sua dúvida ou ideia nos comentários.

Atualizações:

  1. Solução com CSS

    Os questionamentos que recebi apontavam para a solução do efeito com uso de JavaScript, contudo existe uma solução, bem mais simples, com CSS. O João Victor (abre em nova janela) criou e hospedou a solução com CSS neste link (abre em nova janela). Obrigado João Victor!

  2. Efeito suave na transição:

    O leitor Maycon no comentário #2 solicita uma solução com efeito suave para aparecimento do dinossauro. Desenvolvi a solução para o efeito suave usando a funcionalidade para transições das CSS3 aplicada no exemplo do JV (comentário #1). O exemplo encontra-se em http://jsbin.com/ipuGeCA/2/edit (abre em outra janela).

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2013-08-5 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2013/08/05/efeito-css-dinossauro/trackback no seu site.

8 comentários na matéria: “Efeito CSS “Dinossauro””

  1. TheTails Labs - Agencia de marketing digital e criação de sites em BHNo Gravatar disse:

    Óbrigado pelo post, vou guardar o código, posso usá-lo em algum projeto.

  2. thiago sousaNo Gravatar disse:

    Oi,major,excelente explicação,,queria saber como vc fez o menu do seu site,,que ao passar o mouse na area lateral o menu se expande,,gostaria que vc publica-se um tutorial explicado como vc fez ficaria grato,pela explicação,,obrigado

  3. GianNo Gravatar disse:

    Interessante, muito legal

  4. Marcia FazerNo Gravatar disse:

    Show! Só gostaria que fosse mais suave a transição. Eu não entendo muito de CSS/JS. Poderia me dizer como deixar mais “suave” nao sei bem a palavra. Obrigada!

  5. MarcelaNo Gravatar disse:

    Nossa , muito interessante ja havia um tempo que eu me perguntava como voçe fazia esse efeito . Ps amei o novo tem do site

  6. MaujorNo Gravatar disse:

    @Maycon
    Aplique transição CSS com mudança de opacidade para obter o efeito fade.
    Tutorial transições: http://www.maujor.com/tutorial/css3-modulo-transition.php

    Em http://jsbin.com/ipuGeCA/2/edit alterei a solução CSS do JV (comentário 1) para obter o efeito que você procura.

  7. MayconNo Gravatar disse:

    Interessante o efeito!
    Entretanto, gostaria de aplicar algum “transition” nesse dinossauro, pra ele aparecer com mais suavidade. É possível?

  8. JVNo Gravatar disse:

    Sempre pensei que fosse com CSS este efeito.

    Tentei reproduzir: http://jsbin.com/igowax/3/edit
    ———————————————
    Maujor disse:
    Obrigado João Victor. Sua solução foi citada e lincada na matéria.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo