Tema: Animación bloquea cajas.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/07/2013, 07:27
Avatar de Iballa
Iballa
 
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 1 mes
Puntos: 6
Animación bloquea cajas.
Hola,

He hecho una animación para una de las cajas de mi página que consiste en otra caja
que va bajando y dejando ver la caja de abajo, a modo de cortina que baja (valga las redundancias).

El caso es que cuando la "caja-cortina" llega abajo, al final, me bloquea toda la caja que ha dejado ver...me desactiva los links del menú, y no me deja utilizar el scroll derecho.

He estado mirando en varios sitios, pero no encuentro nada que sea parecido a "animación que bloquea al funcionamiento de otra caja" y como ahora mismo no encuentro otra explicación que la que haya un duende verde dentro de la pantalla que se esté riendo de mi, lo pongo aquí a ver si alguien tiene otra explicación más racional :)

Aquí dejo el código por si alguien lo sabe. Gracias

HTML
Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <head>
  3.   <meta charset="utf-8"/>
  4.  <link rel="stylesheet" type="text/css" href="css/estilos.css"/>
  5. </head>
  6. <body>
  7.     <div id="wrapper">
  8.        <section id="side-fixed"></section>
  9.        <nav id="nav1">
  10.           <ul>
  11.             <li><a href="">home</a></li>
  12.             <li><a href="">home</a></li>
  13.           </ul>
  14.        </nav>
  15.        <section id="principal">
  16.           <header>
  17.               <article>                
  18.              </article>
  19.           </header>
  20.           <section id="main-dos">
  21.             <section class="format-box">
  22.               <ul>
  23.                  <a href="http://www.google.es/" ><li>enlaces</li></a>
  24.                  <a href=""><li>link</li></a>
  25.                  <a href=""><li>link</li></a>
  26.                  <a href=""><li>link</li></a>
  27.               </ul>
  28.                <article class="sub-article">
  29.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  30.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  31.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  32.                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  33.                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  34.                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  35.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  36.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  37.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  38.                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  39.                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  40.                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  41.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  42.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  43.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  44.                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  45.                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  46.                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  47.               </article>
  48.               <article class="sub-photo">
  49.                               FOTO
  50.               </article>
  51.             </section><!--fin formatbox-->
  52.                <div id="caja-cortina"></div>
  53.        </section><!--fin main-dos-->
  54.        </section><!--fin principal-->
  55.     </div><!--fin wrapper-->
  56. </body>
  57. </html>
Código CSS: 
Ver original
  1. body {
  2.     background: #FAD6D6;
  3.   font-family: verdana;
  4.     font-size: 0.75em;
  5. }
  6. a {
  7.   text-decoration: none;
  8. }
  9. ul {
  10.   list-style: none;
  11. }
  12. /*-------------------PRINCIPAL-------------------------------------------*/
  13. #nav1 {
  14.   background: #FFADAD;
  15.   height: 100%;
  16.   width: 15%;
  17. }
  18. #principal {
  19.   height: 100%;
  20.   width: 60%;
  21. }
  22.   #wrapper {
  23.   background: pink;
  24.   height: 47.5em;
  25.   margin: 10px auto;
  26.   width: 77.5em;
  27. }
  28. #side-fixed {
  29.   height: 100%;
  30.   width: 25%;
  31. }
  32. #nav1,#principal,#side-fixed {
  33.   float: left;
  34. }
  35. header {
  36.   height: 18%;
  37. }
  38. /*-------------------------------NAVEGADOR PRINCIPAL--------------------*/
  39. #nav1 li {
  40.   text-align: right;
  41.   font-family: arial;
  42.   font-size: 12.7px;
  43. }
  44. #nav1 ul li a {
  45.   background: #124A63;
  46.   color: #ffffff;
  47.   display: inline-block;
  48.   padding: 0.4em 0.8em 0.4em 1.3em;
  49.   margin: 0.2em 3em 0.3em auto;   
  50. }
  51. #nav1 ul li a:hover {
  52.   background: crimson;
  53.   color: #124A63;
  54. }
  55. /*----------------------------------------------dos------------------------------*/
  56. #main-dos {
  57.   background: #BBCED9;
  58.   height: 82%;
  59.   overflow: hidden;
  60. }
  61. .format-box{
  62.   color: #394A58;
  63.   font-size: 0.96em;
  64.   height: 90%;
  65.   margin: 1.9em auto;
  66.   text-align: justify;
  67.   width: 88%;
  68.   overflow: hidden;
  69.   position: relative;
  70.   z-index: 1;
  71. }
  72. .format-box ul a li {
  73.   background: #ffffff;
  74.   border: 2px solid white;
  75.   float: left;
  76.   font-family: arial;
  77.   font-size: 12px;
  78.   font-weight: bold;
  79.   margin-right: 3.5px;
  80.   padding: 2px;
  81. }
  82. .format-box ul a li:hover {
  83.   background: #124A63;
  84.   color: white;
  85. }
  86. .sub-article {
  87.    height: 50%;
  88.    overflow-y: scroll;
  89.    width: 98%;
  90. }
  91. .sub-photo {
  92.   border: 1px solid black;
  93.    height: 30%;
  94.    width: 80%;
  95. }
  96. #caja-cortina {
  97.     position: absolute;
  98.     left: 575px;
  99.     top: 134px;
  100.     height: 422px;
  101.     width: 490px;
  102.     z-index: 5;
  103.     animation:cortina-bajando 3s;
  104.     -webkit-animation:cortina-bajando 3s;
  105.     -moz-animation:cortina-bajando 3s;
  106.     -o-animation:cortina-bajando 3s;
  107. }
  108. @keyframes cortina-bajando {
  109.             from {
  110.              background:#E4EFF2;
  111.               height: 450px;
  112.               top: 120px;
  113.               }
  114.               
  115.               to {
  116.                 background:#BBCED9;
  117.                 height: 0px;
  118.                 top: 560px;
  119.                 }
  120.          } 
  121.  
  122.  
  123.    @-webkit-keyframes cortina-bajando {
  124.             from {
  125.              background:#E4EFF2;
  126.               height: 450px;
  127.               top: 120px;
  128.               }
  129.               
  130.               to {
  131.                 background:#BBCED9;
  132.                 height: 0px;
  133.                 top: 560px;
  134.                 }
  135.          } 
  136.  
  137.   @-moz-keyframes cortina-bajando {
  138.             from {
  139.              background:#E4EFF2;
  140.               height: 450px;
  141.               top: 120px;
  142.               }
  143.               
  144.               to {
  145.                 background:#BBCED9;
  146.                 height: 0px;
  147.                 top: 560px;
  148.                 }
  149.          } 
  150.     @-o-keyframes cortina-bajando {
  151.             from {
  152.              background:#E4EFF2;
  153.               height: 450px;
  154.               top: 120px;
  155.               }
  156.               
  157.               to {
  158.                 background:#BBCED9;
  159.                 height: 0px;
  160.                 top: 560px;
  161.                 }
  162.          }