mostrar capa oculta con efecto cortina vertical

pithon · #1 (**permalink**) 08/02/2014, 19:11

Intento crear un efecto cortina para mostrar una capa oculta pero apesar de buscar en internet no encontre nada que este echo solo con javascript, muestro lo que tengo echo por si alguien me quiere dar una ayudita con javascript.

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
#panel{
    background:red;
    cursor:pointer;
    height:200px;
    text-align:center;
}
#contenido{
    width:100px;
    height:0;
    background:yellow;
    overflow:hidden;
    
}
</style>
<script type="text/javascript">
 
 
function mostrarCapa(){
    var div=document.getElementById("contenido");
    for(i=0;i<100;i++){
    div.style.height="+"+i+"%";
    }
}
</script>
</head>
 
<body>
<div id="panel" onClick="aparecer()">
  <div id="contenido">contenido capa</div>
</div>
 
</body>
</html>

igual esto no me sirve ya que seria lo mismo que mostrar un display:none, si alguien me dice los pasos para conseguir ese efecto cortina.
saludos.

djaevi · #2 (**permalink**) 08/02/2014, 19:29

Algo asi te sirve? Pegalo en un html vacio y proba si es lo que te sirve:

Código HTML:

Ver original<!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> Cortina </title>
 
<style>
 
    #container {
        
        position:absolute;
        top:100px;
        left:300px;
        width:500px;
        height:350px;
        border:dashed black 1px;
        
    }
    
    #capa {     
        position:absolute;
        width:100%;
        height:100%;
        background-color:red;   
        z-index:0;
    }
    
    #cortina {
        position:absolute;      
        width:100%;
        height:100%;
        background-color:blue;  
        z-index:1;
    }
 
</style>
 
<script type="text/javascript">
    
    function abrir() {
    
        if (step > 0) {
        
            step += step_size;
            
            cortina.style.height = step + "%";
            
            cron = setTimeout('abrir()',100);
            
        }else{
        
            clearTimeout(cron);
            
        }
            
    }
    
    function init() {
 
        cron = null;
    
        step = 100;
    
        step_size = -5;
        
        cortina = document.getElementById("cortina");
        
    }
 
</script>
 
</head>
 
<body onload="init();">
 
    <div id="container">
    
        <div id="capa"></div>
        <div id="cortina"></div>
    
    </div>
    
    <input type="button" onclick="abrir();" value="abrir" />
 
</body>
</html>

Saludos!

pithon · #3 (**permalink**) 10/02/2014, 04:26

Hola djaevi, gracias tu funcion me sirvio para entender como hay que hacerlo ahora veo muchas alternativas no conocia esas funciones javascript, saludos.