introduktion
moderne CSS er et kraftfuldt værktøj, du kan bruge til at oprette mange avancerede brugergrænsefladefunktioner (UI). Tidligere var disse funktioner afhængige af JavaScript-biblioteker.
i denne vejledning vil du oprette et par CSS-linjer for at oprette en rulleparallakseffekt på en hjemmeside. Du vil bruge billeder fra placekitten.com som pladsholder baggrundsbilleder.
du vil have en hjemmeside med en ren CSS scrolling parallakse effekt, når du har afsluttet tutorial.
advarsel: Denne artikel bruger eksperimentelle CSS-egenskaber, der ikke fungerer på tværs af bro.sere. Dette projekt er blevet testet og fungerer på Chrome.
denne teknik fungerer ikke godt i Safari og iOS på grund af nogle af disse optimeringer.
Trin 1 — Oprettelse af et nyt projekt
i dette trin skal du bruge kommandolinjen til at oprette en ny projektmappe og filer. For at starte skal du åbne din terminal og oprette en ny projektmappe.
Skriv følgende kommando for at oprette projektmappen:
- mkdir css-parallax
i dette tilfælde kaldte du mappencss-parallax. Skift nu tilcss-parallax mappe:
- cd css-parallax
Opret derefter enindex.html fil i dincss-parallax mappe mednano kommando:
- nano index.html
du lægger al HTML til projektet i denne fil.
i næste trin begynder du at oprette strukturen på hjemmesiden.
Trin 2 — Opsætning af Applikationsstrukturen
i dette trin tilføjer du den HTML, der er nødvendig for at oprette projektets struktur.
inde i din index.html fil tilføj 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 grundlæggende struktur for de fleste hjemmesider, der brugerHTML.
tilføj følgende kode inde 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 kode opretter tre forskellige sektioner. To vil have et baggrundsbillede, og en vil være en statisk, almindelig baggrund.
i de næste par trin tilføjer du stilarterne for hvert afsnit ved hjælp af de klasser, du tilføjede iHTML.
Trin 3 — Oprettelse af en CSS-fil og tilføjelse af indledende CSS
i dette trin opretter du enCSS fil. Derefter tilføjer du den oprindelige CSS, der er nødvendig for at style hjemmesiden og oprette parallakseffekten.
Opret først enstyles.css fil i dincss-parallax mappe mednano kommando:
- nano styles.css
det er her, du vil lægge alle de CSS, der er nødvendige for at oprette parallaksrulleeffekten.
start derefter med.wrapper klasse. Inde i din styles.css fil tilføj følgende kode:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrapper klasse indstiller perspektivegenskaber og rulleegenskaber for hele siden.
indpakningens højde skal indstilles til en fast værdi for at effekten kan fungere. Du kan bruge visningsenheden vhIndstil til100 for at få den fulde højde på skærmens visning.
når du skalerer billederne, tilføjer de en vandret rullebjælke til skærmen, så du kan deaktivere den ved at tilføje overflow-x: hidden;. Egenskabenperspective simulerer afstanden fra visningen til de pseudoelementer, du vil oprette og transformere længere nede iCSS.
i næste trin vil du tilføje mere CSS for at style din hjemmeside.
Trin 4-Tilføjelse stilarter for .sektionsklasse
i dette trin tilføjer du stilarter til.section klassen.
inde i dinstyles.css fil tilføj følgende kode under indpakningsklassen:
.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 klasse definerer størrelse, display og tekstegenskaber for hovedafsnittene.
Indstil en position afrelative så barnet,.parallax::after kan placeres absolut i forhold til forældreelementet.section.
hvert afsnit har en view-height(vh)af 100 for at optage visningens fulde højde. Denne værdi kan ændres og indstilles til den højde, du foretrækker for hver sektion.
endelig bruges restenCSS egenskaber til at formatere og tilføje styling til teksten inde i hvert afsnit. Den placerer teksten i midten af hvert afsnit og tilføjer en farve på white.
Dernæst vil du tilføje et pseudoelement og style det for at oprette parallakseffekten på to af sektionerne i dinHTML.
Trin 5-Tilføjelse stilarter for .parallaksklasse
i dette trin tilføjer du stilarterne til .parallax klassen.
først vil du tilføje et pseudoelement på.parallax klassen, der skal styles.Bemærk: Du kan besøge MDN-dokumenter for at lære mere om CSS-pseudoelementer.
tilføj 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 tilføjer et::after pseudo-element til baggrundsbilledet og giver de transformationer, der er nødvendige for parallakseffekten.
pseudoelementet er elementets sidste barn med klassen.parallax.
den første halvdel af koden viser og placerer psuedo-elementet. Egenskabentransform flytter pseudoelementet tilbage fra kameraet påz-index og skalerer det derefter op igen for at udfylde visningen.
fordi pseudoelementet er længere væk, ser det ud til at bevæge sig langsommere.
i det næste trin, vil du tilføje i baggrundsbilleder og statisk baggrund stil.
Trin 6 — tilføjelse af billeder og baggrund for hvert afsnit
i dette trin tilføjer du de endeligeCSS egenskaber, der skal tilføjes i baggrundsbillederne og baggrundsfarven på det statiske afsnit.
Tilføj først en solid baggrundsfarve til.static sektionen med følgende kode efter.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 klasse tilføjer en baggrund til det statiske afsnit, der ikke har et billede.
de to sektioner med.parallax klassen har også en ekstra klasse, der er forskellig for hver. Brug .bg1 og .bg2 klasser for at tilføje killingens baggrundsbilleder.
tilføj følgende kode til .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 klasser tilføj de respektive baggrundsbilleder for hvert afsnit.
billederne er fra placekitten hjemmeside. Det er en service til at få billeder af killinger til brug som pladsholdere.
nu hvor al koden til parallaksrulleeffekten er tilføjet, kan du linke til din styles.cssfil i din index.html.
Trin 7-Sammenkædning stilarter.CSS og åbning indeks.
i dette trin linker du dinstyles.css fil og åbner projektet i din bro.ser for at se parallaksrulleeffekten.
Tilføj først følgende kode til<head> tagget 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>...nu Kan du åbne din index.html fil i din bro.ser:
med det har du oprettet en fungerende hjemmeside med en rulleeffekt. Tjek denne GitHub repository for at se den fulde kode.
konklusion
i denne artikel opretter du et projekt med en index.html og styles.css fil og har nu en funktionel hjemmeside. Du tilføjede strukturen på din hjemmeside og oprettede stilarter til de forskellige sektioner på siden.
det er muligt at placere de billeder, du bruger, eller parallakseffekten længere væk, så de bevæger sig langsommere. Du bliver nødt til at ændre billedbeløbet på perspective og transform egenskaber. Hvis du slet ikke vil have et baggrundsbillede til at rulle, skal du bruge background-attachment: fixed; i stedet for perspective/translate/scale.