Plynulá změna obrázků

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).

Ř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

• Wrapping around Flickity for infinite looping – nekonečné vodorovné posouvání obsahu (GitHub)
• Cross-Fading Background Images – prolínání obrázků