krouzek:animace_2023

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revize Předchozí verze
Následující verze		 Předchozí verze
krouzek:animace_2023 [2023/11/22 16:16] – adminkrouzek:animace_2023 [2023/11/22 17:50] (aktuální) – admin
Řádek 22: Řádek 22:
       top: 150px;       top: 150px;
       left: 200px;       left: 200px;
-      background-color:green+      background-color:green;
     }     }
     </style>     </style>
Řádek 46: Řádek 46:
 let top = 250 let top = 250
 let left = 100 let left = 100
 +</code>
 +
 +
 +=== Animace ===
 +<code html>
 +<!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>
 </code> </code>
  • krouzek/animace_2023.1700669800.txt.gz
  • Poslední úprava: 2023/11/22 16:16
  • autor: admin