Vizuální části

MVOP3 WBI

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

K čemu bychom potřebovali zvuk na webu?

Zvuk

různé prohlížeče podporují různé formáty
nejčastěji MP3, WAV a OGG
co vlastně ve zvukových souborech ukládáme?

`audio`

atributy: controls, muted, autoplay, loop
události: pause, play, ended, seeked
DOM metody: load, play, pause, canPlayType

Zvuk může být otravný, co bychom měli dělat, aby byli uživatelé spokojeni?

Můžeme audio stylovat pomocí CSS?

Lze přehrát zvuk jen pomocí JS?

Zvuk v JS

Velmi podobně funguje i video (video), které si však neukážeme.

Stejně jako obrázky, písma a barvy, ovlivnují chování uživatele i videa a hudba.

Opakování animací

Jaké typy animací používáme na webových stránkách?
Co vkládáme uvnitř pravidla @keyframes?
Můžeme definovat rámec na 44.2039169420% v pravé animaci?
Co můžeme volat (dělat) na animaci v JS?
K čemu slouží animation-play-state?

K čemu animace používáme na webových stránkách?

Jaké znáte přechodové funkce? K čemu slouží? Co je to interpolace?

Obrázkové animace

na webu často potřebujeme pokročilejší pohyb
GIF — proč se často nevyužívá?
SVG animace pomocí CSS
videa

Jak funguje SVG? Co je uvnitř SVG?

SVG

(zejména) vektrová grafika pro webové stránky
různé matematické rovnice
neomezené rozlišení → lze zmenšovat a zvětšovat bez ztráty kvality
formát XML

SVG

Práce

Najděte nějaký SVG soubor a podívejte se na jeho obsah. Poté se podívejte, zda a případně jak lze SVG animovat.

Knihovny pro animace

LottieFiles (SVG, malé)
Greensock [GSAP] (SVG, canvas, ...)
p5.js (canvas)
three.js (canvas)

Děkuji za pozornost!

matej.cajthaml@ssps.cz
https://ssps.cajthaml.eu/