Myšlenkou je vytvořit vzhled prezentace bez karuselu. Jinými slovy, vytváříme řadu obrázků, které se posouvají zleva doprava a opakují se po dosažení konce obrázků. Trik spočívá v tom, že používáme jediný obrázek na pozadí s CSS animacemi k (…)
Myšlenkou je vytvořit vzhled prezentace bez karuselu. Jinými slovy, vytváříme řadu obrázků, které se posouvají zleva doprava a opakují se po dosažení konce obrázků.
Trik spočívá v tom, že používáme jeden obrázek na pozadí s animacemi CSS, abychom jej přesunuli po obrazovce a po dokončení jej opakovali. To vytváří iluzi galerie obrázků, když skutečně používáme jeden obrázek.
Nastavení HTML
Tady je ukázka toho, jak je nutné strukturovat naše HTML:
Pracujeme se dvěma prvky: ten, který voláme a .containerkterý odpovídá přesné šířce výřezu, a další, kterému voláme, .sliding-backgroundkterý sedí za .containera přetéká. V podstatě používáme .containermasku jako masku pro skrytí celé šířky, .sliding-backgroundjak se posouvá po obrazovce.
To znamená, že ve značce HTML musíme vytvořit pouze dva prvky:
Umístění prvků
Pojďme do toho a přidejme několik CSS, které správně umístí naše dva prvky.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Naše .containerpoužívá overflowvlastnost, která skryje vše, co je vizuálně obsaženo mimo ni. Představte si to jako plodinu na fotografii. Mimo kontejner mohou být další věci, ale kontejner nám brání v tom, abychom to viděli.
Tam .sliding-backgroundvstupuje do hry náš . Je nastavena na směšnou šířku, která by přetekla většinu výřezů. A to je ten trik: mělo by to být něco, co by přetékalo kontejnerem. V tomto případě používáme poněkud libovolně zvolenou 5076pxšířku, která by měla přetékat většinou výřezů prohlížeče.
Vytváření obrázku na pozadí
Potřebujeme obrázek, pokud vytváříme iluzi galerie prezentací, že? To je náš další úkol.
Vzpomínáte si, jak jsme zmínili poněkud libovolně zvolenou 5076pxšířku pro posuvné pozadí? Je to libovolné, ale úmyslné v tom smyslu, že je pěkně dělitelné třemi, což zapadá do načasování minutové smyčky, která přijde o něco později. To znamená, že plátno pro náš obrázek na pozadí je 5076 / 3nebo 1692px. Nakonec se naše pozadí bude opakovat celkem třikrát za minutu v nekonečné smyčce. Matematika pro výhru!
500pxVýška je opravdu libovolná. To může být cokoli chcete a pokud je to také skutečná velikost souboru obrázku na pozadí.
Soubor Photoshopu použitý k vytvoření obrázku na pozadí ukázky na začátku této kapitoly je k dispozici ke stažení, pokud hledáte výchozí bod.
Jakmile je obrázek uložen (a optimalizován!), Použijeme ho jako obrázek na pozadí v CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Skvělý! To nám dává úžasný obrázek, který přetéká kontejnerem a lze jej nyní použít k posouvání po obrazovce na nekonečno.
Animace pozadí
Dobře, nechme tuto věc pohnout. Chceme, aby to šlo zleva doprava ve smyčce, která se opakuje znovu a znovu, aby vytvořil plynulý efekt, že obraz bude navždy.
Nejprve definujeme animaci CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )transformVlastnost používáme k umístění levého obrázku na levém okraji kontejneru, když začíná animace, například:
V době, kdy bude animace dokončena, bude mít negativně transformovanou pozici (zleva doprava) o částku, která odpovídá přesné šířce našeho obrázku. A protože .sliding-backgroundje trojnásobek šířky skutečného obrazu, obraz se opakuje třikrát mezi 0% a 100%, než se znovu opakuje.
Poznámka: důvod, proč používáme další
background-positionna hlavní transformpohyb, který je mnohem výkonnější.
Dobře, pojďme to završit voláním naší slideanimace ve .sliding-backgroundtřídě:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationVlastnost pokyn .sliding-backgroundpoužít slideanimaci a jej spustit po dobu jedné minuty v době, v lineární, nekonečné smyčky.
Dáme to dohromady
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )