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> |