<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>C O R R E D O R</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body { background-color: black;
}
#Pause { position: fixed;
margin-left: 125px;
margin-top: 10px;
width: 90px;
height: 35px;
background-color: black;
color: antiquewhite;
border: 1px solid #ddd;
}
#Play { position: fixed;
margin-left: 15px;
margin-top: 10px;
width: 90px;
height: 35px;
background-color: black;
color: antiquewhite;
border: 1px solid #ddd;
}
#dance { position: fixed;
margin-left: 15px;
margin-top: 60px;
width: 90px;
height: 35px;
background-color: black;
color: antiquewhite;
border: 1px solid #ddd;
}
#reset { position: fixed;
margin-left: 15px;
margin-top: 60px;
width: 90px;
height: 35px;
background-color: black;
color: antiquewhite;
border: 1px solid #ddd;
visibility: hidden;
display: none;
}
#Velocidad { text-align: center;
background-color: black;
position: fixed;
margin-top: 8px;
margin-left: 235px;
width: 180px;
height: 70px;
border: 1px solid #ddd;
}
#label_Max_Min, #label_HD, #label_AD, #label_HI, #label_AI, #label_MD, #label_TD, #label_MI, #label_TI { font-size: 14px;
color: chartreuse;
}
#Max_Min ,#HD, #AD, #HI, #AI, #MD, #TD, #MI, #TI { margin:calc(5%);
}
#Displaydance { text-align: center;
background-color: transparent;
position: fixed;
margin-top: 90px;
margin-left: 235px;
width: 180px;
height: 440px;
border: 1px solid #ddd;
visibility: hidden;
display: none;
}
#humero_der { background-color: blue;
width: 22px;
height: 90px;
border-radius: 20px;
border: 5px solid red;
position: fixed;
margin-top: 180px;
margin-left: 200px;
transform-origin: 50% 0%; /*transform-origin: 50% 20%; CENTRADO*/
transform: rotate(0deg);
z-index: -1;
}
#antebrazo_der { background-color: blue;
width: 22px;
height: 60px;
border-radius: 20px;
border: 5px solid red;
position: relative;
margin-top: 77px;
margin-left: 0px;
transform-origin: 50% 0%;
transform: rotate(0deg);
z-index: -1;
}
#humero_izq { background-color: chartreuse;
width: 22px;
height: 90px;
border-radius: 20px;
border: 5px solid red;
position: fixed;
margin-top: 180px;
margin-left: 200px;
transform-origin: 50% 0%; /*transform-origin: 50% 20%; CENTRADO*/
transform: rotate(0deg);
}
#antebrazo_izq { background-color: chartreuse;
width: 22px;
height: 60px;
border-radius: 20px;
border: 5px solid red;
position: fixed;
margin-top: 77px;
margin-left: 0px;
transform-origin: 50% 0%;
transform: rotate(0deg);
z-index: 1;
}
#muslo_der { background-color: blue;
width: 30px;
height: 110px;
border-radius: 20px;
border: 5px solid red;
position: fixed;
margin-top: 300px;
margin-left: 200px;
transform-origin: 50% 5%; /*transform-origin: 50% 20%; CENTRADO*/
transform: rotate(0deg);
z-index: -1;
}
#muslo_izq { background-color: chartreuse;
width: 30px;
height: 110px;
border-radius: 20px;
border: 5px solid red;
position: fixed;
margin-top: 300px;
margin-left: 200px;
transform-origin: 50% 5%; /*transform-origin: 50% 20%; CENTRADO*/
transform: rotate(0deg);
z-index: -1;
}
#tibia_der { background-color: blue;
width: 25px;
height: 110px;
border-radius: 20px;
border: 5px solid red;
position: relative;
margin-top: 100px;
margin-left: -6px;
transform-origin: 50% 0%; /*transform-origin: 50% 20%; CENTRADO*/
transform: rotate(0deg);
}
#tibia_izq { background-color: chartreuse;
width: 25px;
height: 110px;
border-radius: 20px;
border: 5px solid red;
position: relative;
margin-top: 100px;
margin-left: -6px;
transform-origin: 50% 0%;
transform: rotate(0deg);
}
#pie_der { background-color: blue;
width: 20px;
height: 65px;
border-radius: 15px;
border: 5px solid red;
position: relative;
margin-top: 100px;
margin-left: 16px;
transform-origin: 50% 0%;
transform: rotate(90deg);
}
#pie_izq { background-color: chartreuse;
width: 20px;
height: 65px;
border-radius: 15px;
border: 5px solid red;
position: relative;
margin-top: 100px;
margin-left: 16px;
transform-origin: 50% 0%;
transform: rotate(90deg);
}
#mano_der { background-color: blue;
width: 20px;
height: 35px;
border-radius: 15px;
border: 5px solid red;
position: relative;
margin-top: 40px;
margin-left: 5px;
transform-origin: 50% 0%;
transform: rotate(30deg);
}
#mano_izq { background-color: chartreuse;
width: 20px;
height: 35px;
border-radius: 15px;
border: 5px solid red;
position: relative;
margin-top: 40px;
margin-left: 5px;
transform-origin: 50% 0%;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div id="humero_der">
<div id="antebrazo_der">
<div id="mano_der"></div>
</div>
</div>
<div id="humero_izq">
<div id="antebrazo_izq">
<div id="mano_izq"></div>
</div>
</div>
<div id="muslo_der">
<div id="tibia_der">
<div id="pie_der"></div>
</div>
</div>
<div id="muslo_izq">
<div id="tibia_izq">
<div id="pie_izq"></div>
</div>
</div>
<button type="button" id="Play" onclick="corredor()"> Play </button>
<button type="button" id="Pause" onclick="pause()"> Pause </button>
<button type="button" id="dance" onclick="dance()"> Dance </button>
<button type="button" id="reset" onclick="reset()"> Reset </button>
<div id="Velocidad">
<br>
<label id="label_Max_Min">Mas / Menos ( Velocidad )</label>
<input type="range" value="1" id="Max_Min" max="2" min="0" step="0.1" onchange="DisplayChange()">
</div>
<div id="Displaydance">
<br>
<label id="label_HD">Humero Der</label>
<input type="range" value="1" id="HD" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_AD">Antebrazo Der</label>
<input type="range" value="1" id="AD" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_HI">Humero Izq</label>
<input type="range" value="1" id="HI" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_AI">Antebrazo Izq</label>
<input type="range" value="1" id="AI" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_MD">Muslo Der</label>
<input type="range" value="1" id="MD" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_TD">Tibia Der</label>
<input type="range" value="1" id="TD" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_MI">Muslo Izq</label>
<input type="range" value="1" id="MI" max="2" min="0" step="0.1" onchange="corredor()">
<label id="label_TI">Tibia Izq</label>
<input type="range" value="1" id="TI" max="2" min="0" step="0.1" onchange="corredor()">
</div>
<script>
//PLAY BOTON
function corredor() {
document.getElementById('dance').style.display = 'block' document.getElementById('dance').style.visibility = 'visible'
var H_D = document.getElementById('HD').value * 1000; var A_D = document.getElementById('AD').value * 1000; var H_I = document.getElementById('HI').value * 1000; var A_I = document.getElementById('AI').value * 1000; var M_D = document.getElementById('MD').value * 1000; var T_D = document.getElementById('TD').value * 1000; var M_I = document.getElementById('MI').value * 1000; var T_I = document.getElementById('TI').value * 1000;
var HD = document.getElementById('humero_der') var AD = document.getElementById('antebrazo_der') var HI = document.getElementById('humero_izq') var AI = document.getElementById('antebrazo_izq') var MD = document.getElementById('muslo_der') var TD = document.getElementById('tibia_der') var MI = document.getElementById('muslo_izq') var TI = document.getElementById('tibia_izq')
document.getElementById('Max_Min').value = 1;
// HUMERO DERECHO 0
HD.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(-60deg)' }, { transform: 'rotate(0deg)' }, { transform: 'rotate(50deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: H_D, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// ANTEBRAZO DERECHO 1
AD.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(70deg)' }, { transform: 'rotate(90deg)' }, { transform: 'rotate(40deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: A_D, iterations: 'Infinity', easing: 'linear', fill: 'forwards' }); //, direction: 'alternate'
// HUMERO IZQUIERDO 2
HI.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(60deg)' }, { transform: 'rotate(0deg)' }, { transform: 'rotate(-50deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: H_I, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// ANTEBRAZO IZQUIERDO 3
AI.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(70deg)' }, { transform: 'rotate(90deg)' }, { transform: 'rotate(40deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: A_I, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// MUSLO DERECHO 4
MD.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(50deg)' }, { transform: 'rotate(20deg)' }, { transform: 'rotate(-40deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: M_D, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// TIBIA DERECHO 5
TD.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(-30deg)' }, { transform: 'rotate(-60deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: T_D, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// MUSLO IZQUIERDO 6
MI.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(-40deg)' }, { transform: 'rotate(20deg)' }, { transform: 'rotate(50deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: M_I, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });
// TIBIA IZQUIERDO 7
TI.animate([
{ transform: 'rotate(0deg)' }, { transform: 'rotate(-60deg)' }, { transform: 'rotate(-30deg)' }, { transform: 'rotate(0deg)' } ],
{ duration: T_I, iterations: 'Infinity', easing: 'linear', fill: 'forwards' });}
//PAUSE BOTON
function pause() { var x = document.getAnimations();
var i;
for (i = 0; i < x.length; i++) { x[i].pause(); }}
//VELOCIDAD RANGE
function DisplayChange() { var x = document.getAnimations();
var c = document.getElementById('Max_Min'); var i;
for (i = 0; i < x.length; i++) { x[i].playbackRate = c.value; }}
function reset() {
document.getElementById('Displaydance').style.display = 'none' document.getElementById('Displaydance').style.visibility = 'hidden'
document.getElementById('reset').style.display = 'none' document.getElementById('reset').style.visibility = 'hidden'
document.getElementById('HD').value = 1; document.getElementById('AD').value = 1; document.getElementById('HI').value = 1; document.getElementById('AI').value = 1; document.getElementById('MD').value = 1; document.getElementById('TD').value = 1; document.getElementById('MI').value = 1; document.getElementById('TI').value = 1;
corredor();
}
function dance() {
document.getElementById('Displaydance').style.display = 'block' document.getElementById('Displaydance').style.visibility = 'visible'
document.getElementById('dance').style.display = 'none' document.getElementById('dance').style.visibility = 'hidden'
document.getElementById('reset').style.display = 'block' document.getElementById('reset').style.visibility = 'visible'}
</script>
</body>
</html>
Se basa en la aplicación de la API de animaciones de javascript API ANIMATE.
En este caso se trata de un muñeco, Corredor lo llamo, que hace eso, correr.
Pero ademas puedes interactuar con el con una serie de inputs range, para darle mas o menos velocidad a cada parte de su cuerpo, y hasta lo puedes hacer como bailar.
Y eso es todo, espero que aprendáis como yo aprendo de vosotros gracias a vuestras colaboraciones.
Por que yo digo que yo se lo que se, gracias a todos vosotros y a paginas como LWP.