Publicado em 5 de mar.

[Resolvido] Efeito de Transição

#javascript

Bom dia...

Como é feito esse efeito?

http://groupon.ndot.in/

Clique em Continue e veja...

Agradeço desde já!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

rodrigo I.O· 7 de mar.

Então, rodolfo..

efeitos de transição são geralmente feitos com uso de position absolute..

segue a regra..

uma div com "overflow: hidden" para esconder os demais "slides"

uma div (vou chamar de container) com a largura necessária para conter todos os slides - se tenho dois slides (o que é o caso) então esta div tem largura x 2. Os elementos dentro dela devem ter um "float: left" para flutuarem um do lado do outro..

e na hora de fazer a transição.. é o contaíner que se movimenta alterando seu atributo left..

eu uso jquery.. sendo que a função que faz animação é:

$('#id_do_container').animate({left: '-=400px'}, 1000);

é isso.. dúvidas.. diga aí.. :huh:

jquery animate

CiroClaw· 7 de mar.

Eu comecei a usar jquery recentemente e axei muito intereçante o exemplo do rodrigo I.O.

Então segui o que ele disse e ficou assim:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> Animate em slides </title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/logica_slides.js"></script>
</head>
<body>
<div id="esconde">
	<div id="container">
 <img src="imagens/a.jpg" alt="" />
 <img src="imagens/b.jpg" alt="" />
 <img src="imagens/c.jpg" alt="" />
 <img src="imagens/d.jpg" alt="" />
 <img src="imagens/e.jpg" alt="" />
 <img src="imagens/f.jpg" alt="" />
 <img src="imagens/g.jpg" alt="" />
 <img src="imagens/h.jpg" alt="" />
 <img src="imagens/i.jpg" alt="" />
	</div>
</div>
</body>
</html>

CSS:

*{ padding:0px; margin:0px; }
body{ background-color: #000; }

#esconde{
overflow: hidden;
width: 300px;
height: 300px;
}

#container{
width:2700px;
height: 300px;
}

#container img{

width: 300px;
height: 300px;
float: left;
}

JavaScript/JQuery:

$(document).ready(function(){

$('#container').animate({left: '-=300px'}, 1000);

});

Porem a animação não esta acontecendo :huh: .

Então se tiver como me dar umas dicas de como fazer a animação funcionar eu agradeço XD.

CiroClaw· 8 de mar.

Depois de algumas pesquisas consegui.

Bastou apenas adcionar algunas "posioton" no css. :joia:

Não tava movimentando porque por padrao o position era "static" e dessa forma

o a div container nao aceitava ser movimentada.

Ficou assim.

CSS:

#esconde{
overflow: hidden;
width: 300px;
height: 300px;
position: relative;
}

#container{
width:2700px;
height: 300px;
position: absolute;
}

Superwagtel· 29 de mar.

Onde consigo o script "logica slides.js" ?

Tentei baixa-lo pelo Google, mas não tem nenhum modelo disponível !