Tanken her er å skape et lysbildefremvisning uten karusellen. Med andre ord lager vi en serie bilder som lysbildet fra venstre til høyre gjentas når enden på bildene er nådd. Trikset er at vi bruker et enkelt bakgrunnsbilde med CSS-animasjoner til (...)
Tanken her er å skape et lysbildefremvisning uten karusellen. Med andre ord lager vi en serie bilder som lysbildet fra venstre til høyre gjentas når enden på bildene er nådd.
Trikset er at vi bruker et enkelt bakgrunnsbilde med CSS-animasjoner for å flytte det over skjermen og gjenta når det er gjort. Dette skaper illusjonen til et bildegalleri når vi virkelig bruker et enkelt bilde.
Sette opp HTML
Her er en tegning for hvordan HTML-en vår må struktureres:
Det er to elementer vi jobber med: det vi ringer .containersom passer til den nøyaktige bredden på visningsområdet og et annet vi ringer .sliding-backgroundsom sitter bak .containerog flyter over det. I hovedsak bruker vi den .containersom en maske for å skjule hele bredden av den .sliding-backgroundnår den ruller over skjermen.
Det betyr at vi bare trenger å lage to elementer i HTML-markeringen:
Posisjonering av elementene
La oss gå videre og legge til litt CSS som vil plassere de to elementene våre riktig.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Vår .containerbruker overfloweiendommen som vil skjule alt som er visuelt inneholdt utenfor det. Tenk på det som en avling på et fotografi. Det kan være ekstra ting utenfor containeren, men containeren hindrer oss i å se den.
Det er der vårt .sliding-backgroundkommer inn i bildet. Det er satt til en latterlig bredde som vil overflyte de fleste visningsfelt. Og det er trikset: det skal være noe som vil flyte over beholderen. I dette tilfellet bruker vi en noe vilkårlig valgt 5076pxbredde som skal flyte over de fleste nettleservisninger.
Opprette bakgrunnsbildet
Vi trenger et bilde hvis vi skaper en illusjon av et lysbildefremvisningsgalleri, ikke sant? Det er vår neste ordre.
Husk hvordan vi nevnte at den noe vilkårlig valgte 5076pxbredden for den glidende bakgrunnen? Vel, det er vilkårlig, men forsettlig i den forstand at det er pent delbart med 3, som passer inn i timingen for en minuttsløyfe, som kommer opp litt senere. Det betyr at lerretet for bakgrunnsbildet vårt er 5076 / 3eller 1692px. Til slutt vil bakgrunnen vår gjenta totalt tre ganger på ett minutt i en uendelig løkke. Matematikk for seier!
Den 500pxhøyden er virkelig tilfeldig. Det kan være hva du vil, og så lenge det også er den faktiske størrelsen på bakgrunnsbildefilen.
Photoshop-filen som ble brukt til å lage bakgrunnsbildet for demoen i begynnelsen av dette kapittelet, kan lastes ned hvis du leter etter et utgangspunkt.
Når bildet er lagret (og optimalisert!), Er det dette vi vil bruke som bakgrunnsbilde i CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Flott! Det gir oss det enorme bildet som flyter over beholderen, og som nå kan brukes til å bla over skjermen ad infinitum.
Animering av bakgrunnen
Ok, la oss få denne tingen til å bevege seg. Vi vil at det skal gå fra venstre til høyre i en løkke som gjentas om og om igjen for å skape en sømløs effekt som bildet fortsetter for alltid.
La oss først definere CSS-animasjonen:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Vi bruker transformegenskapen til å plassere venstre bilde i venstre kant av beholderen når animasjonen begynner, slik:
Når animasjonen er fullført, vil den ha forvandlet posisjonen negativt (fra venstre til høyre) med et beløp som samsvarer med den eksakte bredden på bildet vårt. Og siden det .sliding-backgrounder tre ganger bredden på det faktiske bildet, gjentas bildet tre ganger mellom 0% og 100% før det sløyfes igjen.
Merk: grunnen til at vi bruker en ekstra
background-positionpå hovedtemaet transformtil å gjøre bevegelsen, som er mye mer performant.
OK, la oss avrunde ting ved å kalle slideanimasjonen vår til .sliding-backgroundklassen:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Den animationeiendom instruerer .sliding-backgroundå bruke slideanimasjon og å kjøre den i ett minutt om gangen i en lineær, uendelig loop.
Sette alt sammen
.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); ) )