Ideja je ovdje stvoriti izgled prezentacije bez vrtuljka. Drugim riječima, izrađujemo niz slika klizajući slijeva udesno i ponavljamo ih nakon što se dosegne kraj slika. Trik je u tome što koristimo jednu pozadinsku sliku sa CSS animacijama da bismo (...)
Ideja je ovdje stvoriti izgled prezentacije bez vrtuljka. Drugim riječima, izrađujemo niz slika klizajući slijeva udesno i ponavljamo ih nakon što stignemo na kraj slika.
Trik je u tome što koristimo jednu pozadinsku sliku s CSS animacijama da bismo je premjestili preko zaslona i ponovili kad je to gotovo. To stvara iluziju galerije slika kada stvarno koristimo jednu sliku.
Postavljanje HTML-a
Evo plana za strukturiranje našeg HTML-a:
Postoje dva elementa s kojima radimo: onaj koji zovemo .containerodgovara točnoj širini okvira za prikaz i drugi koji zovemo .sliding-backgroundnalazi se iza .containeri prelijeva ga. U osnovi koristimo .containermasku kao da bismo sakrili cijelu širinu slike .sliding-backgrounddok se pomiče po zaslonu.
To znači da trebamo stvoriti samo dva elementa u HTML oznaci:
Pozicioniranje elemenata
Idemo naprijed i dodajte neki CSS koji će ispravno postaviti naša dva elementa.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Mi .containerkoristimo overflowsvojstvo koje će sakriti sve što je vizualno sadržano izvan njega. Zamislite to kao usjev na fotografiji. Možda ima dodatnih stvari izvan spremnika, ali spremnik nas sprečava da to vidimo.
Tu .sliding-backgroundnastupaju naši . Postavljena je na smiješnu širinu koja bi prelila većinu okvira za prikaz. I u tome je trik: trebalo bi biti nešto što bi preplavilo spremnik. U ovom slučaju koristimo donekle proizvoljno odabranu 5076pxširinu koja bi trebala preplaviti većinu prikaza preglednika.
Stvaranje pozadinske slike
Slika nam treba ako stvaramo iluziju galerije slajdova, zar ne? To je naš sljedeći redoslijed poslovanja.
Sjećate se kako smo spomenuli da je pomalo proizvoljno odabrana 5076pxširina za kliznu pozadinu? Pa, proizvoljno je, ali namjerno u smislu da se lijepo dijeli s 3, što se uklapa u vremensko određivanje minutne petlje koja će se pojaviti malo kasnije. To znači da je platno za našu pozadinsku sliku 5076 / 3ili 1692px. Na kraju, naša će se pozadina ponoviti ukupno tri puta u jednoj minuti u beskonačnoj petlji. Matematika za pobjedu!
500pxVisina je zaista proizvoljna. To može biti sve što želite i dok god je to i stvarna veličina datoteke pozadinske slike.
Datoteka Photoshop koja se koristi za stvaranje pozadinske slike za demonstraciju na početku ovog poglavlja dostupna je za preuzimanje ako tražite polaznu točku.
Nakon što je slika spremljena (i optimizirana!), Ovo ćemo koristiti kao pozadinsku sliku u CSS-u:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Sjajno! To nam daje sjajnu sliku koja prelijeva spremnik i sada se može koristiti za nesmetano pomicanje po zaslonu.
Animiranje pozadine
U redu, pomaknimo ovu stvar. Želimo da ide s lijeva na desno u petlji koja se ponavlja iznova i iznova kako bi se stvorio besprijekoran efekt da slika traje zauvijek.
Prvo definirajmo CSS animaciju:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )transformSvojstvo koristimo za postavljanje lijeve slike na lijevi rub spremnika kada započne animacija, i to na sljedeći način:
Dok se animacija završi, položaj će transformirati negativno (slijeva udesno) za iznos koji odgovara točnoj širini naše slike. A budući da .sliding-backgroundje tri puta veća širina od stvarne slike, slika se ponavlja tri puta između 0% i 100% prije ponovnog ponavljanja.
Napomena: razlog zbog kojeg koristimo dodatni
background-positionna glavnom transformpokret za izvedbu, što je puno učinkovitije.
OK, zaokružimo stvari pozivom naše slideanimacije na .sliding-backgroundpredavanju:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationSvojstvo upućuje .sliding-backgroundkoristiti slideanimacije i da ga kandidira za jednu minutu na vrijeme u linearnom, beskonačnu petlju.
Sve to zajedno
.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); ) )