Rozdíly

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

--- krouzek:animace_2023 [2023/11/22 16:14] – admin
+++ krouzek:animace_2023 [2023/11/22 17:50] (aktuální) – admin
@@ Řádek 22: / Řádek 22: @@
       top: 150px;
       left: 200px;
-      background-color:green
+      background-color:green;
     }
     </style>
@@ Řádek 40: / Řádek 40: @@
    * 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 nástrojích pro vývojáře ''%%document.getElementById('ctverec').style.top='210px'%%''
+   * 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é:
+<code javascript>
+let top = 250
+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"
+        },
+
+     )
+    </script>
+</head>
+<body>
+ <div id="ctverec"></div>
+</body>
+</html>
+</code>