Enlace Patrocinado

¿Cuál es una pantalla de cargado falsa en un videojuego?

Enlace Patrocinado
La verdad es que no sabría decirte alguno en específico, de los que se me vienen a la cabeza pienso en el DBZ budokai tenkaichi 3 y espero haberlo escrito de forma correcta.
En la pantalla de carga veías alguno de los personajes comiendo fideos o haciendo flexiones. Mientras mas veces presionabas el botón X mas flexiones o bocados se comía, muy divertido por cierto.
Este es un recurso muy útil y mas sencillo aun para implementarlo. Hace poco se me ocurrió hacer esto en un sitio que desarrollo.
Te comento, estoy desarrollando una tienda virtual, comprimo las imágenes de una forma determinada, lo que provoca en algunos navegadores que las imágenes se vean por un segundo en blanco y negro (1.17s exactamente). Para añadir, el sitio tiene un tiempo de carga muy bueno, por debajo de 3s (a Google le gusta esto).
¿Cual fue la solución a este inconveniente? Cree una caja loader que ocupa el 100% de la pantalla. Dentro dos más una para la imagen pic y otro para el texto.



  1. <div id="loader"> 





  2.     <div id="pic"></div> 





  3.     <span>Cargando</span> 





  4. </div> 



Con algunas propiedades de CSS hacemos que loader ocupe toda la pantalla



  1. html,body{ 





  2.     margin:0px; 





  3.     height:100%; 





  4. } 





  5.  





  6. #loader { 





  7.     height:100%; 





  8.  position:absolute; 





  9.     z-index:100; 





  10. } 



Manipulamos a pic para que parezca una rosquilla mordida



  1. #pic { 





  2.  /* Borde verde */ 





  3.  border: 3px solid #20CE88; 





  4.     /* redondeamos para que sea un circulo */ 





  5.     border-radius: 50%; 





  6.     /* Cambiamos el color del borde superior (mordida en la rosquilla) */ 





  7.     border-top: 4px solid white; 





  8.  /* ancho y alto de la "imagen" */     





  9.     width: 120px; 





  10.     height: 120px; 





  11.     /* Animamos para que gire sin fin */ 





  12.     animation: spin .6s cubic-bezier(0.88, 0.32, 1, 1) infinite; 





  13. } 



Activamos la animación con la propiedad deseada (giro)



  1. @keyframes spin { 





  2.     0% { 





  3.         transform: rotate(0deg); 





  4.     } 





  5.     100% { 





  6.         transform: rotate(360deg); 





  7.     } 





  8.  } 




Si! puro CSS nada de imágenes que descargar.


Listo, ahora solo resta preguntarle a Javascript cuando termino de cargar todo, podemos usar windwo.onload(). Cuando tenga todo listo, removemos el elemento loader usando remove() por ejemplo.


ATENCION!! Jugar con la opacidad le da un muy buen resultado cuando se remueve.


Me gustaba mucho la pantalla de carga del DBZ por que te preparaba para lo que se venia luego, apretar el cuadrado con mucha destreza durante 10 minutos. Ah! que tiempos aquellos.


Saludos!

Scroll al inicio