Cieľom je vytvoriť vzhľad prezentácie bez karuselu. Inými slovami, robíme sériu obrázkov, ktoré sa posúvajú zľava doprava a opakujú sa, keď už dôjde na koniec obrázkov. Trik je v tom, že používame jeden obrázok na pozadí s CSS animáciami na (...)
Cieľom je vytvoriť vzhľad prezentácie bez karuselu. Inými slovami, robíme sériu obrázkov, ktoré sa posúvajú zľava doprava a opakujú sa, keď už dôjde na koniec obrázkov.
Trik spočíva v tom, že pomocou jedného obrázka na pozadí s animáciami CSS ho posúvame po obrazovke a po dokončení opakujeme. To vytvára ilúziu obrazovej galérie, keď skutočne používame jeden obrázok.
Nastavenie HTML
Tu je príklad toho, ako je potrebné štruktúrovať naše HTML:
Pracujeme s dvoma prvkami: s jedným, ktorý voláme .container, zodpovedá presnej šírke výrezu a s druhým, ktorý voláme .sliding-background, je za .containera preteká ním. V podstate používame .containermasku ako masku na skrytie celej šírky masky, ktorá .sliding-backgroundsa posúva po obrazovke.
To znamená, že v označení HTML musíme vytvoriť iba dva prvky:
Umiestnenie prvkov
Poďme do toho a pridajme nejaké CSS, ktoré správne umiestnia naše dva prvky.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Naše .containerpoužíva overflowvlastníctvo, ktoré skryje všetko, čo je mimo neho vizuálne obsiahnuté. Predstavte si to ako plodinu na fotografii. Mimo kontajnera môžu byť ďalšie veci, ale kontajner nám bráni v tom, aby sme ich videli.
Tam .sliding-backgroundvstupuje do hry náš . Je nastavená na nejakú smiešnu šírku, ktorá by pretiekla väčšinu výrezov. A to je ten trik: malo by to byť niečo, čo by pretečie kontajnerom. V tomto prípade používame trochu ľubovoľne zvolenú 5076pxšírku, ktorá by mala pretekať nad väčšinou výrezov prehliadača.
Vytváranie obrázka na pozadí
Potrebujeme obrázok, ak vytvárame ilúziu galérie prezentácií, že? To je naša ďalšia zákazka.
Pamätáte si, ako sme spomínali, že trochu ľubovoľne zvolená 5076pxšírka pre posuvné pozadie? Je to ľubovoľné, ale zámerné v tom zmysle, že je pekne deliteľné číslom 3, čo zapadá do načasovania minútovej slučky, ktorá sa objaví o niečo neskôr. To znamená, že plátno pre náš obrázok na pozadí je 5076 / 3alebo 1692px. Nakoniec sa naše pozadie bude opakovať celkovo trikrát za minútu v nekonečnej slučke. Matematika pre výhru!
500pxVýška je naozaj ľubovoľná. To môže byť čokoľvek chcete a ak je to tiež skutočná veľkosť súboru obrázka na pozadí.
Súbor Photoshopu použitý na vytvorenie obrázka na pozadí ukážky na začiatku tejto kapitoly je k dispozícii na stiahnutie, ak hľadáte východiskový bod.
Po uložení (a optimalizácii) obrázka použijeme ako obrázok na pozadí v CSS toto:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Skvelé! To nám dáva úžasný obraz, ktorý preteká kontajnerom a teraz ho môžeme použiť na nekonečné posúvanie po obrazovke.
Animácia pozadia
Dobre, poďme túto vec rozhýbať. Chceme, aby to šlo zľava doprava v slučke, ktorá sa opakuje stále dokola, aby vytvoril plynulý efekt, že obraz bude pokračovať navždy.
Najskôr definujeme animáciu CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )transformVlastnosť používame na umiestnenie ľavého obrázka na ľavom okraji kontajnera, keď sa začína animácia, napríklad takto:
Keď bude animácia dokončená, bude mať negatívnu transformáciu polohy (zľava doprava) o veľkosť, ktorá zodpovedá presnej šírke nášho obrázka. A keďže .sliding-backgroundje trojnásobok šírky skutočného obrázka, obraz sa opakuje trikrát medzi 0% a 100% pred opätovným cyklovaním.
Poznámka: dôvod, prečo používame ďalšie
background-positionna hlavnej transformpohyb pomocou animácie , ktorá je oveľa výkonnejšia.
Dobre, poďme to zavŕšiť zavolaním našej slideanimácie v .sliding-backgroundtriede:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationVlastnosť pokyn .sliding-backgroundpoužiť slideanimáciu a ho spustiť po dobu jednej minúty v dobe, v lineárne, nekonečnej slučky.
Dávať to všetko dokopy
.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); ) )