animacion.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>AnimaciĆ³n</title>
  5. let imagen;
  6. let y = 0;
  7.  
  8. function iniciar() {
  9. imagen = document.querySelector('#personaje');
  10. setInterval(animar, 25);
  11. }
  12.  
  13. function animar() {
  14. imagen.style.top = y + 'px';
  15. y = y + 10;
  16. if (y >= 500) y = -128;
  17. }
  18.  
  19. </script>
  20. #agujero {
  21. position: relative;
  22. width: 200px;
  23. height: 500px;
  24. background-color:black;
  25. overflow: hidden;
  26. }
  27. #personaje {
  28. position:absolute;
  29. width: 128px;
  30. height: 128px;
  31. top: 0px;
  32. left: 36px;
  33. }
  34. </style>
  35. </head>
  36. <body onload="iniciar()">
  37. <h1>AnimaciĆ³n</h1>
  38.  
  39. <div id="agujero">
  40. <img id="personaje" src="pato.png">
  41. </div>
  42.  
  43.  
  44.  
  45. </body>
  46. </html>

Proinf.net