Autor Zpráva
FrodoZNK
Profil
Zdravím,
vytvořil jsem si jednoduchou slideshow s 5 obrázkama přes keyframes.
Všechno funguje, jak má, až na jedinou věc a to je to, že se mi obrázky při přepínání klepají.. Myslel jsem, že je to velikostí, ale i když jsem obrázky zmenšil o polovinu, kdy měly velikost okolo 300px na 100px, klepali se stejně.
A další otázka je, proč mi slideshow funguje jen ve Chromu a v Opeře?
Mám tam keyframes s prefixem -webkit- pro Chrome, Operu a Safari a pro Firefox s Explorer bez prefixu. Nechápu. :D

ŽIVÁ UKÁZKA ZDE

Díky moc za rady. :-)
Bubák
Profil
Podle CSS3 specifikace background-image nepatří mezi animovatelné vlastnosti., webkitové prohlížeče jako jediné background-image animují.
Obrázky, které jsi použil, mají každý jiný rozměr a ty chceš po prohlížeči, aby animoval i background-size na velikost cover, vypadá to, že prohlížeč zaokrouhlí rozměr obrázku nahoru nebo dolů, ale oku to nelahodí.
Nejjednodušší bude naštosovat obrázky na sebe a měnit opacity.
FrodoZNK
Profil
Ořízl jsem všechny obrázky na velikost 1200px x 500px, což je 2x tolik, co mám blok, ve kterém je animaci. No a s background-size: cover; to funguje. :-) Obrázky sice musím ořezávat, ale aspoň to jde i s větším rozlišením.

Bubák: S tím background-image a animací máš pravdu, dík za radu. :-)

KLIK

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: