Efecto Cortina o Telon para mover divs

Hoerth · #1 (**permalink**) 18/09/2012, 12:50

Tengo que simular en un sitio que se abre un telón desde el medio de la pantalla para luego mostrar un sitio, hasta ahora logre hacer algo asi pero no termina de ser lo que quiero [URL="http://abranpasoweb.com.ar/fulls.html"]http://abranpasoweb.com.ar/fulls.html[/URL] Como hago para que arranquen ambos divs a abrirse desde el medio? debajo pongo por las dudas todo el código, muchas gracias!

Código:

<head>
<style type="text/css">
body {
	margin:0px;
	background-color:#000;
	text-align:center;
	overflow:hidden;
}
#logo { 
	position: absolute;
	z-index:11;
	float:right;
	background-image: url(img/telon.jpg);
	height:100%;
	width:100%;
	background-color:#333;
}
#logo2 { 
	position: absolute;
	z-index:12;
	float:left;
	background-image:url(img/telon.jpg);
	height:100%;
	width:100%;
	background-color:#333;
}

</style>
</head>
<body>
<div id="logo"></div>

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
  $('#logo').animate({right:"+=1950"},4000);
});
</script>
<div id="logo2"></div>

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
  $('#logo2').animate({left:"+=1950"},4000);
});
</script>

</body>

flashmax · #2 (**permalink**) 18/09/2012, 13:33

Hola haber si te sirve este ejemplo:

Código HTML:

<!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>
<style type="text/css">
body {
	margin:0px;
	background-color:#000;
	text-align:center;
	overflow:hidden;
}
#logo { 
	position: absolute;
	right:0px;
	z-index:2;
	float:right;
	background-image: url(img/telon.jpg);
	height:100%;
	width:50%;
	background-color:#333;
}
#logo2 {
	position: absolute;
	left:0px;
	z-index:1;
	float:left;
	background-image:url(img/telon.jpg);
	height:100%;
	width:50%;
	background-color:#333;
}

</style>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
  $('#logo').animate({right:"-=1950"},4000);
  $('#logo2').animate({left:"-=1950"},4000);
});
</script>
</head>
<body>
<div id="logo"></div>
<div id="logo2"></div>
</body>