Selle idee on luua slaidiseansi välimus ilma karussellita. Teisisõnu, me teeme rea pilte libistades vasakult paremale ja kordame, kui piltide lõpp on kätte jõudnud. Trikk seisneb selles, et (…) kasutame CSS-i animatsioonidega ühte taustpilti
Selle idee on luua slaidiseansi välimus ilma karussellita. Teisisõnu, me teeme rea pilte libistades vasakult paremale ja kordame, kui piltide lõpp on kätte jõudnud.
Trikk on see, et me kasutame CSS-i animatsioonidega ühte taustapilti, et seda ekraanil liigutada ja korrata, kui see on tehtud. See loob illusiooni pildigaleriist, kui me tõesti kasutame ühte pilti.
HTML-i seadistamine
Siin on plaan, kuidas meie HTML tuleb üles ehitada:
Me töötame koos kahe elemendiga: üks, millele helistame .container, sobib täpselt vaateava laiusega, ja teine, millele helistame .sliding-background, asub selle taga .containerja ajab selle üle. Sisuliselt kasutame .containermaski, et varjata .sliding-backgroundkogu ekraani kerimisel kogu laiust .
See tähendab, et peame HTML-märgistuses looma ainult kaks elementi:
Elementide positsioneerimine
Lähme edasi ja lisage mõni CSS, mis paigutab meie kaks elementi õigesti.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Meie .containerkasutab overflowvara, mis peidab kõik, mis väljaspool seda visuaalselt sisaldub. Mõelge sellele nagu foto kärpimisele. Konteineri taga võib olla lisakraami, kuid konteiner takistab meil seda näha.
Seal .sliding-backgroundtuleb meie mängu. See on seatud mõnele naeruväärsele laiusele, mis ajab suurema osa vaateavadest üle. Ja see on trikk: see peaks olema midagi, mis konteineri üle voolaks. Sellisel juhul kasutame mõnevõrra meelevaldselt valitud 5076pxlaiust, mis peaks enamiku brauseri vaateavadest üle ajama.
Taustpildi loomine
Kui loome slaidiseansi galerii illusiooni, on meil vaja pilti, eks? See on meie järgmine töökord.
Kas mäletate, kuidas mainisime 5076pxlibiseva tausta mõnevõrra meelevaldselt valitud laiust? Noh, see on meelevaldne, kuid selles mõttes taotluslik, et see jagub kenasti 3-ga, mis sobib minutipikkuse tsükli ajastusse, mis tuleb ette veidi hiljem. See tähendab, et meie taustpildi lõuend on 5076 / 3või 1692px. Lõpuks kordub meie taust lõpmatus silmus ühe minuti jooksul kokku kolm korda. Matemaatika võidu jaoks!
500pxKõrgus on tõeliselt meelevaldne. See võib olla mis iganes soovite ja kui see on ka taustpildifaili tegelik suurus.
Selle peatüki alguses demo taustpildi loomiseks kasutatud Photoshopi fail on allalaadimiseks saadaval, kui otsite lähtepunkti.
Kui pilt on salvestatud (ja optimeeritud!), Kasutame seda CSS-is taustpildina:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Suurepärane! See annab meile hiiglasliku pildi, mis mahutist üle voolab ja mida saab nüüd kasutada ekraanil lõpmatuseni sirvimiseks.
Tausta animeerimine
Hästi, paneme selle asja liikuma. Soovime, et see liiguks järjest ja korduvalt silmusest vasakule paremale, et luua sujuv efekt, et pilt kestab igavesti.
Kõigepealt määratleme CSS-i animatsioon:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Atribuudi abil transformpaigutame animatsiooni alustades vasaku pildi konteineri vasakusse serva, näiteks:
Animatsiooni valmimise ajaks muudab see positsiooni negatiivselt (vasakult paremale) summa võrra, mis vastab meie pildi täpsele laiusele. Ja kuna see .sliding-backgroundon tegeliku pildi kolmekordne laius, kordub pilt enne uuesti loopimist kolm korda vahemikus 0% kuni 100%.
Märkus: põhjus, miks me täiendavat kasutame
background-positionpeamiste transformliikumise jaoks kasutada animeeritud , mis on palju toimivam.
OK, lõpetame asjad, kutsudes klassi slideanimatsiooni .sliding-background:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationVara juhendab .sliding-backgroundkasutada slideanimatsiooni ja käivitada see üks minut korraga lineaarne, lõputu silmuse.
Kõike kokku panema
.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); ) )