Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

carlera

Copiando conteúdo de página

Por , em Desenvolvimento frontend

Recommended Posts

carlera    0

carlera
Postado

boa noite!

 

estou tentando copiar esse banner da esquerda, que ao passar o mouse ele expande

http://www.clickdogato.com/

 

achei várias maneiras de fazer-lo no Sr.Google, mas não obtive sucesso em nenhuma

porque eu sou uma anta, alguém pode me ajudar?

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Poste como fez código e/ou link.

 

Não tem segredo,

crie uma div com posição absoluta na tela e com jQuery utilize o slideToggle ou animate para realizar o efeito desejado.

 

Referências:

http://www.cssnolanche.com.br/diferenca-entre-position-static-relative-absolute-e-fixed/

http://api.jquery.com/slideToggle/

http://api.jquery.com/animate/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

O Bru_ce tem razão, como o efeito toogle é bem fácil de fazer, porém com CSS3 também é possível, embora o efeito fique um pouco "seco", porém muito próximo.

Primeiramente o que você tem que fazer é usar o fireworks ou o photoshop para criar o seu banner. Crie a parte que você quer que fique visível e abaixo a parte que você não quer que fique visível e deixe um pequeno espaço entre elas. Depois vamos para o código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Teste </title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  
  <div id="banner"> 
     <img src="seubannercriadoaqui.png" width="400" height="232" />
  
  
  </div>
 

</body>
</html>

Chame a imagem e depois vamos para o CSS onde acontece a mágica.

#banner {width: /*coloque aqui a largura da imagem */ 400px; 
              height: /*coloque aqui a altura DA PARTE QUE VOCÊ QUER QUE FIQUE VISÍVEL */ 100px ; 
              overflow:hidden /*eis o ponto chave, que vai esconder a parte invisível */;
             -webkit-transition: all 0.5s; 
             -moz-transition: all 0.5s;
             -o-transition: all 0.5s;
             -ms-transition: all 0.5s;
}
#banner:hover {height: /*coloque aqui a altura TOTAL DA IMAGEM */ 232px; 
                        -webkit-transition: all 0.5s; 
                         -moz-transition: all 0.5s;-
                         o-transition: all 0.5s;
                         -ms-transition: all 0.5s; /* e definimos o efeito de transição para ele rolar*/
 }

Explicação básica do código: eu defini que primeiramente o banner ficaria com 100px de altura e defini um hidden no overflow para ele esconder o que estiver abaixo dos 100px, depois utilizei o hover e defini nesse hover transições em css3 para que ele role suavemente. Pronto, temos o efeito desejado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito