Idėja yra sukurti skaidrių demonstravimo išvaizdą be karuselės. Kitaip tariant, mes darome nuotraukų seriją skaidrę iš kairės į dešinę ir pakartojame, kai tik pasiekiama vaizdų pabaiga. Apgaulė yra ta, kad mes naudojame vieną fono paveikslėlį su CSS animacijomis (…)
Idėja yra sukurti skaidrių demonstravimo išvaizdą be karuselės. Kitaip tariant, mes darome nuotraukų seriją skaidrę iš kairės į dešinę ir pakartojame, kai tik pasiekiama vaizdų pabaiga.
Apgaulė yra ta, kad mes naudojame vieną fono paveikslėlį su CSS animacijomis, kad perkeltume jį per ekraną ir pakartotume, kai tai bus padaryta. Tai sukuria vaizdų galerijos iliuziją, kai iš tikrųjų naudojame vieną vaizdą.
HTML nustatymas
Štai koks yra mūsų HTML struktūros planas:
Yra du elementai, su kuriais dirbame: vienas, kuriam mes skambiname .container, tinka tiksliai peržiūros srities plotui, ir kitas, kurį mes vadiname, .sliding-backgroundkuris yra už .containerir perpildytas. Iš esmės mes naudojame .containerkaukę .sliding-backgroundslėpdami visą ekrano plotį .
Tai reiškia, kad HTML žymėjime turime sukurti tik du elementus:
Elementų išdėstymas
Eikime į priekį ir pridėkime keletą CSS, kurie teisingai išdėstys mūsų du elementus.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Mes .containernaudojame overflownuosavybę, kuri paslėps viską, kas vizualiai yra už jos ribų. Pagalvokite apie tai kaip apie nuotrauką. Talpykloje gali būti papildomų daiktų, tačiau konteineris neleidžia mums jų matyti.
Štai kur mūsų .sliding-backgroundžaidimas. Jis nustatytas kažkokio juokingo pločio, kuris perpildytų daugumą peržiūros srities. Ir tai yra triukas: tai turėtų būti kažkas, kas perpildytų konteinerį. Šiuo atveju mes naudojame šiek tiek savavališkai pasirinktą 5076pxplotį, kuris turėtų perpildyti daugumą naršyklės peržiūros sričių.
Foninio vaizdo kūrimas
Mums reikia vaizdo, jei kuriame skaidrių demonstravimo galerijos iliuziją, tiesa? Tai yra kita mūsų darbo tvarka.
Pamenate, kaip mes minėjome, kad šiek tiek savavališkai pasirinktas 5076pxslydimo fono plotis? Na, jis yra savavališkas, bet tyčinis ta prasme, kad gražiai dalijasi iš 3, kuris telpa į minutės trukmės ciklo laiką, kuris pasirodys šiek tiek vėliau. Tai reiškia, kad mūsų fono paveikslėlio drobė yra 5076 / 3arba 1692px. Galų gale mūsų fonas kartosis iš viso tris kartus per vieną minutę begaline kilpa. Matematika už pergalę!
500pxAukštis yra tikrai savavališkai. Tai gali būti viskas, ko norite, ir tol, kol tai yra tikrasis fono paveikslėlio failo dydis.
„Photoshop“ failą, naudojamą kuriant fono paveikslėlį demonstracijai šio skyriaus pradžioje, galima atsisiųsti, jei ieškote pradinio taško.
Kai vaizdas bus išsaugotas (ir optimizuotas!), Tai mes naudosime kaip fono paveikslėlį CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Puiku! Tai suteikia mums milžinišką vaizdą, kuris perpildo konteinerį ir kurį dabar galima naudoti norint slinkti per ekraną be galo.
Animuoti foną
Gerai, leiskime šiam dalykui pajudėti. Mes norime, kad jis eitų iš kairės į dešinę, kartodamasis vis iš naujo, kad būtų sukurtas vientisas efektas, kad vaizdas tęsiasi amžinai.
Pirmiausia apibrėžkime CSS animaciją:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Mes naudojame transformypatybę, kad kairysis vaizdas būtų rodomas kairiajame konteinerio krašte, kai prasideda animacija, pavyzdžiui:
Kol animacija bus baigta, ji neigiamai pakeis poziciją (iš kairės į dešinę) suma, atitinkančia tikslų mūsų vaizdo plotį. Kadangi tai .sliding-backgroundyra tris kartus didesnis už faktinio vaizdo plotį, vaizdas pakartojamas tris kartus nuo 0% iki 100%, prieš vėl sukant ciklą.
Pastaba: priežastis, kodėl naudojame papildomą
background-positionant pagrindinio transformkad judesiui atlikti galėtume naudoti animaciją , kuri yra daug efektyvesnė.
Gerai, apibendrinkime dalykus, pasikviesdami savo slideanimaciją į .sliding-backgroundklasę:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationNuosavybė paveda .sliding-backgroundnaudoti slideanimaciją ir paleisti jį vieną minutę vienu metu linijiniu, begalinis ciklas.
Sudėjus viską kartu
.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); ) )