Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Následující verze | Předchozí verze | ||
krouzek:animace_2023 [2023/11/22 16:09] – vytvořeno admin | krouzek:animace_2023 [2023/11/22 17:50] (aktuální) – admin | ||
---|---|---|---|
Řádek 11: | Řádek 11: | ||
#ctverec { | #ctverec { | ||
position: absolute; | position: absolute; | ||
+ | /* rozmery ctverce: sirka(width) a vyska(height) */ | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | /* pozice leveho horniho rohu ctverce vuci parent elementu: | ||
+ | top = jak daleko od horni hrany | ||
+ | left = jak daleko od leve hrany | ||
+ | | ||
+ | right = jak daleko od prave hrany | ||
+ | */ | ||
top: 150px; | top: 150px; | ||
left: 200px; | left: 200px; | ||
- | background-color: | + | background-color: |
} | } | ||
</ | </ | ||
Řádek 19: | Řádek 28: | ||
< | < | ||
| | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Ú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 '' | ||
+ | * Zkuste takhle několikrát se čterečkem pohnout na různá místa | ||
+ | * Uvnitř '' | ||
+ | <code javascript> | ||
+ | let top = 250 | ||
+ | let left = 100 | ||
+ | </ | ||
+ | |||
+ | |||
+ | === Animace === | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | #ctverec { | ||
+ | position: absolute; | ||
+ | /* rozmery ctverce: sirka(width) a vyska(height) */ | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | /* pozice leveho horniho rohu ctverce vuci parent elementu: | ||
+ | top = jak daleko od horni hrany | ||
+ | left = jak daleko od leve hrany | ||
+ | | ||
+ | right = jak daleko od prave hrany | ||
+ | */ | ||
+ | top: 150px; | ||
+ | left: 150px; | ||
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | // vychozi hodnota | ||
+ | let poziceCtverce = 0 | ||
+ | |||
+ | | ||
+ | function(){ | ||
+ | poziceCtverce = poziceCtverce + 10 | ||
+ | document.getElementById(" | ||
+ | }, | ||
+ | 500 | ||
+ | ) | ||
</ | </ | ||
</ | </ |