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).
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’.
<!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:
- Para ver una animación sencilla de un gusanito en CSS clic aquí.
- Animación en CSS de un muñequito que sonríe.
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.
