2

Haciendo pruebas para un proyecto, he desarrollado un dado sólo con HTML y CSS (sin JavaScript u otra tecnología). El sistema es sencillo: una serie de radio buttons y labels que simulan la tirada de un dado al intercambiar posiciones y cada vez que se pulsan dan un valor "aleatorio".

Aquí se puede ver una versión mínima del código:

@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}

@-webkit-keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 1.2s infinite;
}

label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.2s; }
label:nth-of-type(3) { animation-delay: -0.4s; }
label:nth-of-type(4) { animation-delay: -0.6s; }
label:nth-of-type(5) { animation-delay: -0.8s; }
label:nth-of-type(6) { animation-delay: -1.0s; }
<input type="radio" name="cb" id="cb1" value="1"/>
<input type="radio" name="cb" id="cb2" value="2"/>
<input type="radio" name="cb" id="cb3" value="3"/>
<input type="radio" name="cb" id="cb4" value="4"/>
<input type="radio" name="cb" id="cb5" value="5"/>
<input type="radio" name="cb" id="cb6" value="6"/>
<label for="cb1">1</label>
<label for="cb2">2</label>
<label for="cb3">3</label>
<label for="cb4">4</label>
<label for="cb5">5</label>
<label for="cb6">6</label>

El problema es que, aunque visualmente se ve el dado rotando, no siempre que se pulsa en el label se activa el checkbox asociado en el for. Unas veces sí se marca y otras no. Lo que me hace pensar que el problema puede ser por la animación usada (he jugado con los tiempos para ver si eso solucionaba el problema, pero más o menos parece mantenerse igual).

¿Por qué puede ocurrir esto? ¿Cómo puedo solucionarlo?

4
  • Alvaro, probando con los tiempo de animación *10 animation: changeOrder 12s infinite; y el de los labels tambien *10 no tuve problemas Commented el 20 jul. 2018 a las 17:50
  • @LucianoMontañez pero entonces es aún menos aleatorio, ¿no?
    – Alvaro Montoro
    Commented el 20 jul. 2018 a las 20:07
  • Por lo que he probado parece que es por la velocidad de la animación, y es verdad que pierde aleatoriedad pero por como lo tienes tampoco creo que sea por azar, si la animación es siempre igual se podría pulsar el número que se quiera aunque vaya rápido. Lo suyo sería conseguir que los números vayan cambiando sin un orden claro, pero solo con css no se me ocurre nada ahora mismo. Commented el 21 jul. 2018 a las 11:53
  • Efectivamente el sistema es pseudo-aleatorio, pero el objetivo no es que sea 100% aleatorio, esa nunca es mi intención y no creo que se pueda hacer con CSS... Sin embargo, si hago que los números cambien los suficientemente rápido (p.e. cada pocas milésimas) las probabilidades de que una persona acierte a pulsar el número que quiere bajaría. Y si creo varias animaciones con diferentes ordenes, aún bajaría más porque la persona "no sabría" cuál es la que está activa (porque los usuarios no-personas siempre sabrían).
    – Alvaro Montoro
    Commented el 21 jul. 2018 a las 12:14

1 respuesta 1

2

Esto es una traducción de la respuesta de Temani Afif en un cross-post del sitio en inglés

Como ya notaste, el problema se debe a la velocidad de la animación. Los cambios son más rápidos que el click, porque el click son dos acciones: mousedown y mouseup y ambas deben realizarse sobre el mismo elemento.

Aquí dejo un ejemplo mejor del problema en el que NUNCA puedes hacer que el input se active pulsando en los label:

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
}

label:active {
  background:red;
  z-index:-1;
}
<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<label for="cb1">1</label>
<label for="cb2">2</label>

Cuando pulsas, el elemento se esconderá y el mouseup ya no ocurrirá en el mismo elemento por lo tanto el evento click no ocurre. Lo mismo pasa con tu ejemplo en algunos casos.


Una idea para solucionar esto sería permitir que el click termine haciendo que el elemento en el que se pulsó se quede en lo alto hasta el final del evento click.

Aquí dejo una opción en la que me baso en un pseudo-elemento con un z-index grande para hacer que el evento click se mantenga en el mismo elemento. ¡Así puedes hacer la animación más rápida!

.container {
 position:relative;
}
label {
  display:block;
  position: absolute;
  top:0;
  left:0;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 0.6s infinite;
}
@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}
label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.1s; }
label:nth-of-type(3) { animation-delay: -0.2s; }
label:nth-of-type(4) { animation-delay: -0.3s; }
label:nth-of-type(5) { animation-delay: -0.4s; }
label:nth-of-type(6) { animation-delay: -0.5s; }

label:active {
  /* Obligatorio para romper el orden de stack de los elementos y
   permitir que el pseudo-elemento queden encima de los demás */
  position:static; 
  /* Para demostración */
  margin-left: 50px;
  background:red;
}

label:active::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:10;
}
<input type="radio" name="cb" id="cb1" value="1">
<input type="radio" name="cb" id="cb2" value="2">
<input type="radio" name="cb" id="cb3" value="3">
<input type="radio" name="cb" id="cb4" value="4">
<input type="radio" name="cb" id="cb5" value="5">
<input type="radio" name="cb" id="cb6" value="6">
<div class="container"> 
 <label for="cb1">1</label>
 <label for="cb2">2</label>
 <label for="cb3">3</label>
 <label for="cb4">4</label>
 <label for="cb5">5</label>
 <label for="cb6">6</label>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.