Introduksjon
Moderne CSS Er et kraftig verktøy du kan bruke til å lage mange avanserte Brukergrensesnitt (UI) funksjoner. Tidligere var Disse funksjonene avhengige Av JavaScript-biblioteker.
i denne guiden vil du sette opp NOEN CSS linjer for å lage en rulle parallax effekt på en webside. Du vil bruke bilder fra placekitten.com som plassholder bakgrunnsbilder.
Du vil ha en nettside med en ren CSS rulle parallax effekt når du har fullført opplæringen.
Advarsel: Denne artikkelen bruker eksperimentelle CSS-egenskaper som ikke fungerer på tvers av nettlesere. Dette prosjektet har blitt testet og fungerer På Chrome. denne teknikken fungerer ikke bra I Firefox, Safari og iOS på grunn av noen av nettleserens optimaliseringer.
Trinn 1-Opprette Et Nytt Prosjekt
i dette trinnet bruker du kommandolinjen til å sette opp en ny prosjektmappe og-filer. For å starte, åpne terminalen din og opprett en ny prosjektmappe.
Skriv inn følgende kommando for å opprette prosjektmappen:
- mkdir css-parallax
i dette tilfellet ringte du mappen css-parallax. Nå, endre til css-parallax mappe:
- cd css-parallax
neste, opprett en index.html fil i css-parallax mappe med nano kommando:
- nano index.html
du vil legge all html for prosjektet i denne filen.
i neste trinn vil du begynne å lage strukturen på nettsiden.
Trinn 2-Sette Opp Programstrukturen
i dette trinnet vil du legge TIL HTML som trengs for å lage strukturen i prosjektet.
Inne i dinindex.html fil legg til følgende kode:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>dette er den grunnleggende strukturen på de fleste nettsider som bruker HTML.
Legg til følgende kode inne i<body> tag:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>denne koden oppretter tre forskjellige seksjoner. To vil ha et bakgrunnsbilde, og en vil være en statisk, vanlig bakgrunn.
I de neste trinnene vil du legge til stilene for hver seksjon ved hjelp av klassene du la til i HTML.
Trinn 3-Opprette EN CSS-Fil og Legge Til INNLEDENDE CSS
i dette trinnet vil du opprette en CSS fil. Da vil du legge til i DEN første CSS som trengs for å style nettstedet og skape parallax-effekten.
opprett først en styles.css fil i css-parallax mappe med nano kommando:
- nano styles.css
dette er hvor DU vil sette ALLE CSS som trengs for å skape parallax scrolling effekt.
neste, start med .wrapper klassen. Inne i styles.css fil legg til følgende kode:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}klassen.wrapper angir perspektivegenskapene og rulleegenskapene for hele siden.
høyden på omslaget må settes til en fast verdi for at effekten skal fungere. Du kan bruke viewport-enheten vh sett til 100 for å få full høyde på skjermens viewport.
når du skalerer bildene, vil de legge til en horisontal rullefelt på skjermen, slik at du kan deaktivere den ved å legge til overflow-x: hidden;. Egenskapenperspective simulerer avstanden fra visningsporten til pseudo-elementene du vil opprette og transformere lenger ned i CSS.
i neste trinn vil du legge til MER CSS for å style websiden din.
Trinn 4-Legge Til Stiler for det .seksjon Klasse
i dette trinnet vil du legge til stiler i.section – klassen.
Inne i din styles.css fil legg til følgende kode under wrapper-klassen:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}.section klassen definerer egenskaper for størrelse, visning og tekst for hoveddelene.
Sett en posisjon av relativeslik at barnet,.parallax::after kan være absolutt plassert i forhold til foreldreelementet .section.
Hver seksjon har en view-height(vh) av 100 for å ta opp visningsportens fulle høyde. Denne verdien kan endres og settes til hvilken høyde du foretrekker for hver seksjon.
til slutt brukes resten CSS egenskaper til å formatere og legge til styling til teksten i hver seksjon. Den plasserer teksten i midten av hver seksjon og legger til en farge på white.
Deretter legger du til et pseudo-element og stiler det for å lage parallax-effekten på to av seksjonene i HTML.
Trinn 5-Legge Til Stiler for det .parallax Klasse
i dette trinnet vil du legge til stilene i.parallax klassen.
først vil du legge til et pseudo-element på .parallax – klassen som skal styles.
Merk: DU kan besøke MDN web docs for å lære mer OM CSS pseudo-elementer.
Legg til følgende kode under.section klasse:
....section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}.parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}....parallax klassen legger til et::after pseudo-element til bakgrunnsbildet og gir transformasjonene som trengs for parallax-effekten.
pseudo-elementet er det siste barnet i elementet med klassen .parallax.
den første halvdelen av koden viser og plasserer psuedo-elementet. Egenskapentransform flytter pseudo-elementet tilbake fra kameraet på z-index, og skalerer det deretter opp igjen for å fylle visningsporten.
fordi pseudo-elementet er lenger unna, ser det ut til å bevege seg sakte.
i neste trinn vil du legge til bakgrunnsbilder og statisk bakgrunnsstil.
Trinn 6-Legge Til Bilder Og Bakgrunn for Hver Seksjon
i dette trinnet vil du legge til den endelige CSS egenskaper for å legge til i bakgrunnsbildene og bakgrunnsfargen til den statiske delen.
først legger du til en solid bakgrunnsfarge i .static-delen med følgende kode etter .parallax::after klasse:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}....static – klassen legger til en bakgrunn i den statiske delen som ikke har et bilde.
de to seksjonene med.parallax – klassen har også en ekstra klasse som er forskjellig for hver. Bruk .bg1 og .bg2 klassene for å legge Til Kattunge bakgrunnsbilder.
Legg til følgende kode i.static klasse:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}....bg1, .bg2 klassene legger til de respektive bakgrunnsbildene for hver seksjon.
bildene er fra placekitten nettsiden. Det er en tjeneste for å få bilder av kattunger til bruk som plassholdere.
Nå som all koden for parallax scrolling effekten er lagt til, kan du koble til din styles.css fil i index.html.
Trinn 7-Knytte stiler.css Og Åpningsindeks.html I Nettleseren din
i dette trinnet vil du koble din styles.css fil og åpne prosjektet i nettleseren din for å se parallax scrolling effekt.
først legger du til følgende kode i<head> taggen iindex.html fil:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...nå kan du åpneindex.html fil i nettleseren din:
Med det har du satt opp en fungerende nettside med en rulleeffekt. Sjekk Ut Dette GitHub-depotet for å se hele koden.
Konklusjon
i denne artikkelen setter du opp et prosjekt med en index.htmlog styles.css fil og har nå en funksjonell nettside. Du har lagt til i strukturen på websiden og opprettet stiler for de ulike delene på området.
det er mulig å sette bildene du bruker eller parallax-effekten lenger unna, slik at de beveger seg sakte. Du må endre pikselbeløpet påperspective ogtransform egenskaper. Hvis du ikke vil at et bakgrunnsbilde skal rulle i det hele tatt, bruk background-attachment: fixed; i stedet for perspective/translate/scale.