Ideja je ustvariti videz diaprojekcije brez vrtiljaka. Z drugimi besedami, naredimo vrsto slik, ki jih drsimo od leve proti desni in ponovimo, ko dosežemo konec slik. Trik je v tem, da uporabljamo eno sliko v ozadju z animacijami CSS za (...)
Ideja je ustvariti videz diaprojekcije brez vrtiljaka. Z drugimi besedami, naredimo vrsto slik, ki jih drsimo od leve proti desni in ponovimo, ko dosežemo konec slik.
Trik je v tem, da uporabljamo eno sliko v ozadju z animacijami CSS, da jo premaknemo po zaslonu in ponovimo, ko je končana. To ustvarja iluzijo galerije slik, ko v resnici uporabljamo eno sliko.
Nastavitev HTML-ja
Tu je načrt, kako mora biti naš HTML strukturiran:
Delamo z dvema elementoma: tisti, ki ga pokličemo, .containerki ustreza natančni širini vidnega polja, in drugi, ki ga pokličemo, .sliding-backgroundki sedi za .containerin ga preliva. V bistvu uporabljamo .containermasko kot masko, da skrijemo celotno širino .sliding-backgroundslike, ko se pomika po zaslonu.
To pomeni, da moramo v oznaki HTML ustvariti samo dva elementa:
Pozicioniranje elementov
Pojdimo naprej in dodajte nekaj CSS, ki bo pravilno postavil naša dva elementa.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Naš .containeruporablja overflowlastnost, ki bo skrila vse, kar je vizualno v njej. Pomislite na to kot na pridelek na fotografiji. Zunaj posode so lahko dodatne stvari, vendar nam zabojnik preprečuje, da bi jih videli.
Tu nastopijo naši .sliding-background. Nastavljena je na neko smešno širino, ki bi preplavila večino ogledov. In to je trik: to bi moralo biti nekaj, kar bi preplavilo posodo. V tem primeru uporabljamo nekoliko poljubno izbrano 5076pxširino, ki bi morala presegati večino ogledov brskalnika.
Ustvarjanje slike v ozadju
Če ustvarjamo iluzijo diaprojekcije, potrebujemo sliko, kajne? To je naš naslednji vrstni red.
Se spomnite, kako smo omenili nekoliko poljubno izbrano 5076pxširino drsnega ozadja? No, to je poljubno, a namerno v smislu, da je lepo deljivo s 3, kar ustreza časovni uri minutne zanke, ki se bo pojavila malo kasneje. To pomeni, da je platno za našo sliko v ozadju 5076 / 3oz 1692px. Na koncu se bo naše ozadje v neskončni zanki v eni minuti skupaj ponovilo trikrat. Matematika za zmago!
500pxVišina je resnično samovoljno. To je lahko karkoli želite in če je to tudi dejanska velikost slikovne datoteke v ozadju.
Datoteka Photoshop, ki je bila uporabljena za ustvarjanje slike ozadja za predstavitev na začetku tega poglavja, je na voljo za prenos, če iščete izhodišče.
Ko je slika shranjena (in optimizirana!), Bomo to uporabili kot sliko za ozadje v CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Super! Tako dobimo gromozansko sliko, ki prelije vsebnik in jo zdaj lahko uporabljamo za neskončno drsenje po zaslonu.
Animiranje ozadja
V redu, naj se ta stvar premakne. Želimo, da gre od leve proti desni v zanki, ki se ponavlja znova in znova, da ustvari brezhiben učinek, da slika traja večno.
Najprej določimo animacijo CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Z transformlastnostjo uporabimo levo sliko na levem robu vsebnika, ko se začne animacija, takole:
Ko bo animacija končana, bo položaj negativno (od leve proti desni) spremenil za količino, ki ustreza natančni širini naše slike. In ker .sliding-backgroundje trikrat večja od širine dejanske slike, se slika pred ponovnim ciklom ponovi med 0% in 100%.
Opomba: razlog, zakaj uporabljamo dodatno
background-positionna glavnem transformgibanje, kar je veliko bolj učinkovito.
V redu, zaokrožimo stvari, tako da pokličemo našo slideanimacijo na .sliding-backgroundpredavanju:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationLastnina naroča .sliding-backgrounduporabljati slideanimacijo in jo vodijo za eno minuto v času, v linearno, neskončno zanko.
Vse skupaj
.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); ) )