Ir para conteúdo

POWERED BY:

Arquivado

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

alexandroferreira

Efeito Javascript

Por , em Javascript

Recommended Posts

alexandroferreira    0

alexandroferreira
Postado

Pessoal,

 

Estou tentando achar conteúdo sobre esse efeito Javascript para estudar. Vejam o exemplo no seguinte site: www.sullivannyc.com/people/ ao clicar em um dos nomes surgirá um efeito de movimentação das divs. Alguém sabe onde eu posso encontrar um assunto para estudar esse efeito?

 

Grato desde já,

 

Alexandro Ferreira

Compartilhar este post

Link para o post
Compartilhar em outros sites

retrolink    0

retrolink
Postado

Este exemplo é muito simples, veja o code abaixo e teste ai.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("div.pai").hover(
	function(){
		$("div div.interna").stop();
		$("div div.interna").animate({marginTop: "-60px", opacity: 0.7}, 400 );
	},function () {
		$("div div.interna").stop();
		$("div div.interna").animate({marginTop: "0px", opacity: 0.3}, 600 );
	}
);
});
</script>
<style>
*{
font-family: "Bookman Old Style";
position: relative;
}

div.pai{
height: 220px;
overflow: hidden;
width: 638px;
}

div.pai div.interna{
background-color: black;
color: white;
font-size: 30px;
font-style: italic;
letter-spacing: -2px;
padding: 10px;
text-align: right;
width: 618px;
}

div{
height: 220px;
overflow: hidden;
width: 638px;
}
</style>
<title>retrolink</title>
</head>
<body>
<div class="pai">
	<div><img src="http://img525.imageshack.us/img525/5392/normaltm0.jpg"></div>
	<div class="interna">
	teste
	</div>
</div>
</body>
</html>

Compartilhar este post

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

Informação importante

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

  Aceito