Ajatuksena on luoda diaesityksen ulkonäkö ilman karusellia. Toisin sanoen teemme sarjan kuvia liukumalla vasemmalta oikealle ja toistamalla, kun kuvien loppu on saavutettu. Temppu on, että käytämme yhtä taustakuvaa CSS-animaatioiden kanssa (…)
Ajatuksena on luoda diaesityksen ulkonäkö ilman karusellia. Toisin sanoen teemme sarjan kuvia, jotka liukuvat vasemmalta oikealle ja toistetaan, kun kuvien loppu on saavutettu.
Temppu on, että käytämme yhtä taustakuvaa CSS-animaatioiden kanssa siirtämään sitä ruudun yli ja toistamaan, kun se on valmis. Tämä luo illuusion kuvagalleriasta, kun käytämme todella yhtä kuvaa.
HTML-koodin määrittäminen
Tässä on suunnitelma HTML: n rakenteen suhteen:
Työskentelemme kahdella elementillä: kutsumamme, .containerjoka sopii tarkalleen näkymän leveydelle, ja toinen, jota kutsumme, .sliding-backgroundjoka istuu takana ja täyttää .containersen. Pohjimmiltaan käytämme .containernaamiota piilottaaksemme koko leveyden, .sliding-backgroundkun se vierittää ruudun poikki.
Tämä tarkoittaa, että meidän on luotava vain kaksi elementtiä HTML-merkintöihin:
Elementtien sijoittaminen
Mennään eteenpäin ja lisätään CSS, joka sijoittaa kaksi elementtiämme oikein.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Meidän .containerkäyttötarkoituksia koskeva overflowominaisuus, joka piilottaa mitään, visuaalisesti sisälsi sen ulkopuolella. Ajattele sitä kuin valokuvan rajaus. Säiliön ulkopuolella voi olla ylimääräistä tavaraa, mutta kontti estää meitä näkemästä sitä.
Siellä meidän .sliding-backgroundtulee pelaamaan. Se on asetettu naurettavalle leveydelle, joka ylittää useimmat näkymät. Ja se on temppu: sen pitäisi olla jotain, joka ylittää säiliön. Tässä tapauksessa käytämme jonkin verran mielivaltaisesti valittua 5076pxleveyttä, jonka pitäisi ylittää useimmat selaimen näkymät.
Taustakuvan luominen
Tarvitsemme kuvan, jos luomme illuusion diaesitysgalleriasta, eikö? Se on seuraava käsittelyjärjestyksemme.
Muistatko, kuinka mainitsimme 5076pxliukuvan taustan hieman mielivaltaisesti valitun leveyden? No, se on mielivaltainen, mutta tarkoituksellinen siinä mielessä, että se on hienosti jaettavissa 3: lla, mikä sopii minuutin pituisen silmukan ajoitukseen, joka tulee esiin hieman myöhemmin. Tämä tarkoittaa, että taustakuvan kangas on 5076 / 3tai 1692px. Loppujen lopuksi taustamme toistuu yhteensä kolme kertaa yhdessä minuutissa äärettömässä silmukassa. Matematiikka voitolle!
500pxKorkeus on todella mielivaltainen. Se voi olla mitä haluat ja niin kauan kuin se on myös taustakuvatiedoston todellinen koko.
Tämän luvun alussa esitelmän taustakuvan luomiseen käytetty Photoshop-tiedosto on ladattavissa, jos etsit lähtökohtaa.
Kun kuva on tallennettu (ja optimoitu!), Sitä käytämme taustakuvana CSS: ssä:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Loistava! Tämä antaa meille ginormous-kuvan, joka ylittää säiliön ja jota voidaan nyt käyttää vierittämään ruudun läpi äärettömästi.
Animoida taustaa
Selvä, saatetaan tämä asia liikkumaan. Haluamme sen kulkevan vasemmalta oikealle silmukassa, joka toistuu yhä uudelleen ja luo saumattoman vaikutelman, että kuva jatkuu ikuisesti.
Määritellään ensin CSS-animaatio:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Sijoitamme transformominaisuutta vasemman kuvan säilön vasempaan reunaan, kun animaatio alkaa, kuten näin:
Animaation valmistuttua se on muuttanut sijainnin negatiivisesti (vasemmalta oikealle) määrällä, joka vastaa kuvan tarkkaa leveyttä. Ja koska se .sliding-backgroundon kolme kertaa todellisen kuvan leveys, kuva toistuu kolme kertaa välillä 0% - 100% ennen silmukointia uudelleen.
Huomaa: syy siihen, miksi käytämme lisäosaa
background-positionpääosassa transformliikettä, mikä on paljon suorituskykyisempi.
OK, täydennetään asioita kutsumalla slideanimaatiomme .sliding-backgroundluokalle:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationOminaisuus ohjaa .sliding-backgroundkäyttämään slideanimaation ja käyttää sitä yhden minuutin kerrallaan lineaarinen, päättymättömään silmukkaan.
Yhdistämällä kaikki yhdessä
.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); ) )