En este ejercicio vamos a desplazar mediante javascript un gif de un lado a otro de un contenedor.
Para ello haremos uso del posicionamiento absoluto y relativo css de cajas y modificaremos la posición de una caja dinámicamente.
Las siguientes lecturas te ayudaran a repasar los conceptos indispensables.
Vamos al ejercicio.
Enunciado
Combina html, css y javascript para crear un documento web en el que se muestre un pokemon que se desplace de un lado a otro de un contenedor de 600px de ancho.
Los recursos usados en el ejercicio son:
[vc_raw_html]JTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkElN0JtYXJnaW4lM0EwJTNCcGFkZGluZyUzQTAlM0Jib3gtc2l6aW5nJTNBYm9yZGVyLWJveCUzQiU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5jb250ZW5lZG9yJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbWFyZ2luJTNBYXV0byUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpZHRoJTNBNjAwcHglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBoZWlnaHQlM0EzMDBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBcmVsYXRpdmUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBib3JkZXIlM0ExcHglMjBzb2xpZCUyMCUyMzAwMCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQlM0F1cmwlMjhodHRwcyUzQSUyRiUyRmZyYW5jZXNjcmljYXJ0LmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAxOCUyRjExJTJGcnVubmVyLmpwZyUyOSUyMG5vLXJlcGVhdCUyMDAlMjAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwLmNvcnJlZG9yJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2lkdGglM0E2MHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaGVpZ2h0JTNBNjBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQlM0F1cmwlMjglMjdodHRwcyUzQSUyRiUyRmZyYW5jZXNjcmljYXJ0LmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAxOCUyRjExJTJGY2hhcm1hbmRlci5naWYlMjclMjklMjBuby1yZXBlYXQlMjAwJTIwMCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBYWJzb2x1dGUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBib3R0b20lM0EwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmNvbnRlbmVkb3IlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmNvcnJlZG9yJTIyJTNFJTNDJTJGZGl2JTNFJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc2NyaXB0JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2luZG93Lm9ubG9hZCUzRGluaXQlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBmdW5jdGlvbiUyMGluaXQlMjglMjklN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzZXRJbnRlcnZhbCUyOG1vdmVyJTJDMTAlMjklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpenF1aWVyZGElMjAlMjAlM0QlMjAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZnVuY3Rpb24lMjBtb3ZlciUyOCUyOSU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGl6cXVpZXJkYSUyQiUyQiUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGlmJTIwJTI4aXpxdWllcmRhJTNDNTUwJTI5JTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZG9jdW1lbnQucXVlcnlTZWxlY3RvciUyOCUyMi5jb3JyZWRvciUyMiUyOS5zdHlsZS5sZWZ0JTIwJTNEJTIwaXpxdWllcmRhJTIwJTJCJTIwJTI3cHglMjclM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0RlbHNlJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaXpxdWllcmRhJTIwJTNEJTIwMCUzQiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_html]
Solución del ejercicio
Para solucionar el ejercicio encerramos un div dentro de otro.
El primero es el contenedor que servirá de fondo y que tendrá posicionamiento relativo.
El segundo será una caja cuyo fondo será la imagen del gif y que tendrá posicionamiento absoluto con referencia su elemento contenedor.
Mediante setInterval modificamos cada 10 misilegundo la propiedad left del pokemon. Al extremo volvemos a inicializar a 0 la posición.[vc_custom_heading text=»Código html y css» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio en el que se desplaza un corredor de punto a punto">
<meta name="author" content="Francesc Ricart">
<title>Pokemon corredor</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
.contenedor{
margin:auto;
width:600px;
height:300px;
position:relative;
border:1px solid #000;
background:url(runner.jpg) no-repeat 0 0;
}
.corredor{
width:60px;
height:60px;
background:url('charmander.gif') no-repeat 0 0;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="corredor"></div>
</div>
<script>
</script>
</body>
</html>
[vc_custom_heading text=»Código javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
<script>
window.onload=init;
function init(){
setInterval(mover,10);
izquierda = 0;
}
function mover(){
izquierda++;
if (izquierda<550){
document.querySelector(".corredor").style.left = izquierda + 'px';
}else{
izquierda = 0;
}
}
</script>
Si juntamos todas las piezas resolvemos el ejercicio.¡Hola!
Querido lector,
¿Te animas a hacer una pelota que sube y que baja? ¿Te atreves a hacerlo programando el efecto gravedad?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta