Publicidad

Introducción:

Para empezar mi conocimiento de CSS y HTML son mínimos, esa es la verdad; pero al pensar en un fondo animado si tenia algo claro.
Quería que fuera como el Tetris, con figuras cayendo desde la parte superior de forma aleatoria y sobre todo con colores bonitos; porque si no es Cuki (lindo, bonito) no tiene sentido (al menos para mi).

CSS tetris animation, CSS arcade animation, Retro background css animation, Animación css de fondo retro, code animation css, código de animación css, HTML animation

Mientras pensaba en el fondo animado mi cerebro se ilumino por una tontería:

«Cada figura del Tetris esta formada por 4 cuadraditos«.

Si es muy obvio y lo eh visto muchas veces pero solo en ese momento llegue a notarlo y pensé ¡Wooow!…

Fondo animado de Tetris

Código HTML
Empece creando la estructura en el HTML donde el div ‘class = Contenedor’ tendrá todos los otros div y en cada div ‘class = Col’  habrá una figura creada por varios div ‘class = Cuadradito’.

Por otro lado el div ‘class = Figura‘ tiene características comunes de alineación para todos los div ‘class= Cuadradito’.

Publicidad
<!DOCTYPE html>
<html lang="en-ES">
    <head>
        <meta charset="UTF-8">
	<title>Fondo animado Tetris</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="Contendor">
	    <div class="Col">
	        <div id="Linea" class="Figura">
		    <div class="Cuadradito" ></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
	        </div>	
	    </div>
	    <div class="Col">
	        <div id="Cuadrado" class="Figura">
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
	        </div>
	    </div>
	    <div class="Col">
		<div id="Te" class="Figura">
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		</div>
	    </div>
	    <div class="Col">
	        <div id="Silla" class="Figura">
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		    <div class="Cuadradito"></div>
	        </div>
	    </div>
	    <div class="Col">
	        <div id="Ele" class="Figura">
		    <div class="Cuadradito" ></div>
		    <div class="Cuadradito"></div>
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		    <div class="Cuadradito"></div>
		    <div class="CuadraditoInvisible"></div>
		</div>
	    </div>
        </div>
	<button name="button"id="Music" class="ButtonStyle" onclick='Sonido()'>
	    <img id="IconMusic1" src="../icono/No_Music.svg">		
	</button>
	<script src="codigo.js"></script>
    </body>
</html>

Código CSS

Mientras iba haciendo el HTML también iba haciendo el CSS; pero deje para el final la animación, por que no podia hacer responsive el fondo animado.

body{
  background: black;
  margin: 0px;
}
#IconMusic1{
  height: 35px;
  width: 35px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}
/*****************************************************************************/
.Contendor{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  margin: 0px;
  font-size: 0px;
  padding: 0px;
}

.ButtonStyle{
  background-color: transparent;
  border: transparent;
}

@keyframes slidein{
  from {
    top: -20vh;
  }
  to {
    top: 120vh;
  }
}

.Col{	
  display: inline-block;
  width: 20%;
}

/****************/

.Figura{
  margin: 0 auto;
  position: relative;
  top: -100vh;
}

#Linea{
  width: 56px;
  background-color: #f4cf06c7;
  animation: slidein 18s linear infinite;
  animation-delay: 5s;
}

#Cuadrado{
  width: 112px;
  background-color: #ff5cdebf;
  animation: slidein 12s linear infinite;
  /*animation-delay: 6s;*/
}

#Te{
  width: 112px;
  background-color: #5ad017c2;
  animation: slidein 12s linear infinite;
  animation-delay: 21s;
}

#Silla{
  width: 112px;
  background-color: #ff7f33c4;
  animation: slidein 16s linear infinite;
  animation-delay: 12s;
}

#Ele{
  width: 112px;
  background-color: #06c7f4c4;
  animation: slidein 15s linear infinite;
  animation-delay: 6s;
}

.Cuadradito{
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  margin: 0px;
}

.CuadraditoInvisible{
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid black!important;
  background-color: black!important;
  /*background-color: transparent!important;*/
  /*No funciona porque #Te es verde de base y si
  transparento y pongo !important, trasparenta hasta ver el anterior color que queremos ocultar*/
  margin: 0px;
}

Código JavasCript

Cuando termine el código decidí añadir música al Tetris y escribí el código en JavasCript, donde al presionar un icono de volumen la melodía empieza a sonar,  y luego tuve problemas con el formato del audio y lo cambie a .wav, para eso use el programa Audacity.

//window.onclick = Sonido;
let sound = false
let audio  = document.createElement('audio');

function Sonido(){
    if (sound){
        audio.pause();
        document.getElementById('IconMusic1').src = "../icono/No_Music.svg";
    }else{
  	audio.loop 			          = true;
	audio.volume 		                  = 0.3;
	audio.autoplay 	                          = true;
	audio.src 			          = "../Sonido/Tetris_Soundtrack.wav";
	audio.play();
	document.getElementById('IconMusic1').src = "../icono/Si_Music.svg";
    }
    sound = !sound;
}

Nota: Para ver el código funcionando clic aquí y para ver los archivos del código clic aquí.

Extra:

Conclusión:

Cree el fondo animado con CSS y HTML para animarme a aprender más sin que sea aburrido y también por que hace mucho vi un fondo animado que me llamo la atención y creí que era difícil de crear.

También, puede que haya mejores forma de hacer esta animación; pero esta fue la manera en la que yo la hice desde cero y con pocos conocimientos y buscando en google.

Publicidad