Ir para conteúdo

Arquivado

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

rodolfo v.

[Resolvido] Efeito de Transição

Por , em Javascript

Recommended Posts

rodrigo I.O    0

rodrigo I.O
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

CiroClaw    0

CiroClaw
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CiroClaw    0

CiroClaw
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Superwagtel    1

Superwagtel
Postado

Onde consigo o script "logica slides.js" ?

 

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

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