Tvorba klientských aplikací v JavaScriptu

CSS transitions, animations, efekty, CSS Custom Properties - cvičení

• Webová interaktivní prezentace
• "?" zobrazí krátkou nápovědu
• Tisk jako obvykle
• Pro pokračování stiskněte mezerník

Obsah

1. Transitions
2. Animations
3. Efekty
4. CSS Custom Properties

Transitions + animations

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Úkol: Menu

• Úkol: Otevřete zadani.html a vyzkoušejte si na připraveném boxíku css vlastnosti transform a transition
• Úkol: Udělejte boční menu co výjíždí z pravé strany
• zadani.html

Úkol: Animace pomocí sprite

• Úkol: Vyzkoušejte si na testovacím boxíku jak fungují animace
• Úkol: Vyrobte pomocí sprite, chodícího panáčka
• http://seznam.github.io/CVUT/KAJ/cviceni/08/sprite.png
• 

Úkol: Modal window

• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• Úkol: Vyrobte modalní okno, jehož zobrazení bude animované (zoom), a na zbytek stránky aplikujte animovaný filtr rozostření

Úkol: CSS Custom Properties

1. Vytvořte stránku, která používá dvě custom properties:
   1. Barvu (textu a rámečku)
   2. Velikost (mezery, tloušťka rámečku)
2. Upravte tyto hodnoty v rámci media query
3. Upravte tyto hodnoty skriptem pomocí style.setProperty()
4. Upravujte tyto hodnoty skriptem dynamicky v rámci interakce s ovládacími prvky (input color, input range)

Flex game

Řešení

• reseni.html
• reseni-custom.html