Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Animación bloquea cajas.

 Estas en el tema de Animación bloquea cajas. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/07/2013, 07:27
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 9 meses
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.          }
  #2 (permalink)  
Antiguo 29/07/2013, 08:33
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 5 meses
Puntos: 2114
Respuesta: Animación bloquea cajas.
Esos duendes viven en más de un ordenador.

Pues con ese código no ocurre lo que dices, o no entiendo bien lo que quieres decir por bloquear o realmente no sé qué es lo que se bloquea.

http://jsfiddle.net/H866z
  #3 (permalink)  
Antiguo 29/07/2013, 11:07
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 9 meses
Puntos: 6
Respuesta: Animación bloquea cajas.
Cita:
Iniciado por pzin Ver Mensaje
Esos duendes viven en más de un ordenador.

Pues con ese código no ocurre lo que dices, o no entiendo bien lo que quieres decir por bloquear o realmente no sé qué es lo que se bloquea.

http://jsfiddle.net/H866z
Hola pzin.

He desplazado la animación un poco a la izquierda. en el jsfiddle la desplaza, no me quedan los márgenes iguales. Dejo el enlace aquí.

http://jsfiddle.net/iballa/PhtF8/2/

Creo que ahora podrás ver que, cuando se termina del todo la animación, desaparece la manita del link y no se puede mover el scroll. Parece ser que lo que bloquea es lo que la animación pilla por encima suyo, por eso la he desplazado, mi idea es que quede justo encima de lo azul, pero me lo va a bloquear.
  #4 (permalink)  
Antiguo 29/07/2013, 11:55
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 5 meses
Puntos: 2114
Respuesta: Animación bloquea cajas.
Ahora si entendí y vi.

El problema es que al terminar la animación, el elemento vuelve a su posición original. Supongo que habrás puesto opacidad o algo así para que no se viera. Pero sigue quedando por encima y evita que puedas interactuar con cualquier cosa que haya detrás. Ahí puedes usar forwards para que cuando termine la animación se quede en ese estado:

Código CSS: 
Ver original
  1. animation: nombre_animacion 1s forwards;

Adicionalmente, podrías indicar en la animación un porcentaje en lugar de pixeles, así si cambia el contenido no tienes que volver a cambiar la animación. Podría indicar por ejemplo que se moviera un 100% de arriba:

Código CSS: 
Ver original
  1. from {
  2.   top: 0;
  3. }
  4.  
  5. to {
  6.   top: 100%;
  7. }
  #5 (permalink)  
Antiguo 30/07/2013, 11:40
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 9 meses
Puntos: 6
Respuesta: Animación bloquea cajas.
Creo que no se veia porque no tiene color, no le puse transparente ni nada, pero cuando le pongo color se ve como esa caja vuelve a sus valores y se queda encima...

Muchas gracias¡¡

Etiquetas: animacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:59.