| 1 | <!DOCTYPE html> | 
  | 2 | <html lang="es"> | 
  | 3 |  | 
  | 4 | <head> | 
  | 5 | <meta charset="UTF-8"> | 
  | 6 | <meta name="viewport" | 
  | 7 | content="width=device-width"> | 
  | 8 | <title> | 
  | 9 | Animación horizontal | 
  | 10 | </title> | 
  | 11 | <style> | 
  | 12 | .sprite { | 
  | 13 | position: fixed; | 
  | 14 | font-size: 3rem; | 
  | 15 | } | 
  | 16 | </style> | 
  | 17 | </head> | 
  | 18 |  | 
  | 19 | <body> | 
  | 20 | <h1>Animación horizontal</h1> | 
  | 21 | <output id="carita" | 
  | 22 | class="sprite"> | 
  | 23 | 😄 | 
  | 24 | </output> | 
  | 25 | <script> | 
  | 26 | const REFRESCO = 5 | 
  | 27 | const VELOCIDAD = 0.5 | 
  | 28 | let x = 0 | 
  | 29 | setInterval(avanza, REFRESCO) | 
  | 30 |  | 
  | 31 | function avanza() { | 
  | 32 | const y = innerHeight / 2 | 
  | 33 | const xMáxima = innerWidth | 
  | 34 | carita.style = | 
  | 35 | `left: ${x}px; bottom: ${y}px` | 
  | 36 | x = (x + VELOCIDAD) % xMáxima | 
  | 37 | } | 
  | 38 | </script> | 
  | 39 | </body> | 
  | 40 |  | 
  | 41 | </html> |