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>Ondula</title> |
9 | <style> |
10 | .sprite { |
11 | position: fixed; |
12 | font-size: 3rem; |
13 | } |
14 | </style> |
15 | </head> |
16 | |
17 | <body> |
18 | <h1>Ondula</h1> |
19 | <output id="carita" |
20 | class="sprite"> |
21 | 😄 |
22 | </output> |
23 | <script> |
24 | const REFRESCO = 5 |
25 | const VELOCIDAD = 0.5 |
26 | const FRECUENCIA = 0.03 |
27 | let x = 0 |
28 | setInterval(avanza, REFRESCO) |
29 | |
30 | function avanza() { |
31 | const xMáxima = innerWidth |
32 | const amplitud = innerHeight / 3 |
33 | const yBase = innerHeight / 2 |
34 | y = yBase + |
35 | amplitud * |
36 | Math.sin(FRECUENCIA * x) |
37 | carita.style = |
38 | `left: ${x}px; bottom: ${y}px` |
39 | x = (x + VELOCIDAD) % xMáxima |
40 | } |
41 | </script> |
42 | </body> |
43 | |
44 | </html> |