Ideen her er at skabe et diasshow uden karrusellen. Med andre ord laver vi en række billeder dias fra venstre mod højre og gentager, når slutningen af billederne er nået. Tricket er, at vi bruger et enkelt baggrundsbillede med CSS-animationer til (...)
Ideen her er at skabe et diasshow uden karrusellen. Med andre ord laver vi en række billeder dias fra venstre mod højre og gentager, når slutningen af billederne er nået.
Tricket er, at vi bruger et enkelt baggrundsbillede med CSS-animationer til at flytte det over skærmen og gentage, når det er gjort. Dette skaber illusionen af et billedgalleri, når vi virkelig bruger et enkelt billede.
Opsætning af HTML
Her er en plan for, hvordan vores HTML skal struktureres:
Der er to elementer, vi arbejder med: det vi kalder på, .containerder passer til den nøjagtige bredde på visningen, og et andet vi ringer til, .sliding-backgroundder sidder bag .containerog overløber det. I det væsentlige bruger vi den .containersom en maske til at skjule den fulde bredde af den, .sliding-backgroundnår den ruller over skærmen.
Det betyder, at vi kun behøver at oprette to elementer i HTML-markeringen:
Placering af elementerne
Lad os gå videre og tilføje nogle CSS, der placerer vores to elementer korrekt.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Vores .containerbruger overflowejendommen, der skjuler alt, der er visuelt indeholdt uden for det. Tænk på det som en afgrøde på et fotografi. Der kan være ekstra ting uden for containeren, men containeren forhindrer os i at se det.
Det er her vores .sliding-backgroundspiller ind. Det er indstillet til en latterlig bredde, der ville oversvømme de fleste visningsport. Og det er tricket: det skulle være noget, der ville løbe over containeren. I dette tilfælde bruger vi en noget vilkårligt valgt 5076pxbredde, der skal overløbe de fleste browservisningsport.
Oprettelse af baggrundsbillede
Vi har brug for et billede, hvis vi skaber illusionen om et lysbilledshowgalleri, ikke? Det er vores næste forretningsorden.
Husk, hvordan vi nævnte, at den noget vilkårligt valgte 5076pxbredde til den glidende baggrund? Nå, det er vilkårligt, men forsætligt i den forstand, at det er pænt deleligt med 3, som passer ind i timingen for en minut-lang løkke, som kommer op lidt senere. Det betyder, at lærredet til vores baggrundsbillede er 5076 / 3eller 1692px. I sidste ende gentager vores baggrund i alt tre gange på et minut i en uendelig løkke. Matematik for sejren!
Den 500pxHøjden er virkelig vilkårlig. Det kan være hvad du vil, og så længe det også er den faktiske størrelse på baggrundsbilledfilen.
Photoshop-filen, der bruges til at oprette baggrundsbilledet til demoen i starten af dette kapitel, kan downloades, hvis du leder efter et udgangspunkt.
Når billedet er blevet gemt (og optimeret!), Er det, hvad vi bruger som baggrundsbillede i CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Store! Det giver os det ginorme billede, der flyder over containeren og nu kan bruges til at rulle over skærmen ad infinitum.
Animering af baggrunden
Okay, lad os få denne ting til at flytte. Vi ønsker, at det skal gå fra venstre til højre i en løkke, der gentages igen og igen for at skabe en problemfri effekt, som billedet fortsætter for evigt.
Lad os først definere CSS-animationen:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Vi bruger transformegenskaben til at placere det venstre billede ved containerens venstre kant, når animationen begynder som sådan:
Når animationen er afsluttet, vil den have transformeret positionen negativt (fra venstre mod højre) med et beløb, der svarer til den nøjagtige bredde på vores billede. Og da det .sliding-backgrounder tre gange bredden af det faktiske billede, gentages billedet tre gange mellem 0% og 100%, inden det løber igen.
Bemærk: grunden til, at vi bruger en ekstra
background-positionpå main transformtil at udføre bevægelsen, som er meget mere performant.
OK, lad os afrunde ting ved at kalde vores slideanimation på .sliding-backgroundklassen:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Den animationegenskab instruerer .sliding-backgroundat bruge slideanimation og at køre det i et minut ad gangen i en lineær, uendelig løkke.
Samler det hele
.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); ) )