B. Desplazamiento horizontal

Salida

Ábrelo en otraw pestaña.

Revísalo en gilpgedit.

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