Moderní tvorba webových aplikací

O webu

Plynulá změna obrázků

Jak na stránce automaticky plynule měnit obrázky.

4 minuty

Ozvláštnit webovou stránku je možné obrázkovou galerií, kde se budou automaticky v určitém časovém intervalu prohazovat jednotlivé obrázky.

Rozhodně postup automatické změny nelze doporučit pro vytváření populárních prvků v hlavičkách stránek, kde se střídá důležitý obsah, na který má uživatel kliknout – tzv. kolotoč (carousel).

Měl bych použít kolotoč

Řešení

Cílem je tedy vytvořit box, kde se budou střídat jednotlivé obrázky s nějakou plynulou animací.

Pro lepší použitelnost se hodí přidat následující dvě funkce:

  • zastavit přehrávání při najetí na obrázek,
  • přeskočit na další při kliknutí

Plynulá změna

Asi nejsnazší způsob, jak dosáhnout plynulého přechodu, bude změna průhlednosti. Všechny obrázky se dají do společného <div>u a absolutně se naposicují přes sebe.

Všechny kromě aktivního obrázku budou 100% průhledné (opacity: 0). Aktivní bude naopak neprůhledný (opacity: 1). Přidáním transition pro průhlednost potom dosáhneme efektu prolnutí.

Živá ukázka

Responsivní

Trochu komplikovanější bude vytvořit celou věc, aby byla responsivní. Nabízí se třeba pro první obrázek (selektor :first-child) použít relativní/statickou posici, aby roztáhl obal.

Samostatná živá ukázka

Možné problémy

Kvůli tomu, že se jednotlivé obrázky překrývají, není možné si snadno přes pravé tlačítko myši aktuální obrázek uložit. Ukázka tomu přechází zvýšením z-indexu při najetí.

V IE 9 a starších nebude přechod plynulý kvůli nepodpoře transition.

Všechny obrázky se začnou načítat spolu se stránkou, ne až v momentě, kdy se mají zobrazit.

Odkazy jinam

Související články

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

V jakém programu upravovat obrázky

Jaký program zvolit pro rychlou úpravu obrázků.

2 minuty

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025