krouzek:animace

Výchozí stav: stránka se zobrazeným barevným čtvercem (div)

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Animace 2023</title>
 
    <style>
    #ctverec {
      position: absolute;
      /* rozmery ctverce: sirka(width) a vyska(height) */
      width: 200px;
      height: 200px;
      /* pozice leveho horniho rohu ctverce vuci parent elementu:display: 
       top = jak daleko od horni hrany
       left = jak daleko od leve hrany
       bottom = jak daleko od spodni hrany
       right = jak daleko od prave hrany
       */
      top: 150px;
      left: 200px;
      background-color:green;
    }
    </style>
 
    <script>
 
    </script>
</head>
 
<body>
 <div id="ctverec"></div>
</body>
</html>

Úkoly

Vytvořte svůj html soubor, uložte do něj obsah a zobrazte jej v prohlížeči. Měl by vám ukázat zelený čtverec
Změńte barvu čtverce na červenou (red) a někam ve výchozím stavu posuňte, například trochu doprava
V konzoli v nástrojích pro vývojáře document.getElementById('ctverec').style.top='210px'
- Zkuste takhle několikrát se čterečkem pohnout na různá místa
Uvnitř <script> tagu si vytvořte dvě proměnné:

let top = 250
let left = 100

Animace

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Animace 2023</title>
 
    <style>
    #ctverec {
      position: absolute;
      /* rozmery ctverce: sirka(width) a vyska(height) */
      width: 200px;
      height: 200px;
      /* pozice leveho horniho rohu ctverce vuci parent elementu:display: 
       top = jak daleko od horni hrany
       left = jak daleko od leve hrany
       bottom = jak daleko od spodni hrany
       right = jak daleko od prave hrany
       */
      top: 150px;
      left: 150px;
      background-color: green;
    }
    </style>
 
    <script>
    // vychozi hodnota
    let poziceCtverce = 0
 
     setInterval(
        function(){
            poziceCtverce = poziceCtverce + 10
            document.getElementById("ctverec").style.left = poziceCtverce + "px"
        },
        500
     )
    </script>
</head>
 
<body>
 <div id="ctverec"></div>
</body>
</html>