introduktion
Modern CSS är ett kraftfullt verktyg som du kan använda för att skapa många avancerade användargränssnitt (UI) funktioner. Tidigare förlitade sig dessa funktioner på JavaScript-bibliotek.
i den här guiden ställer du in några CSS-rader för att skapa en rullningsparallaxeffekt på en webbsida. Du kommer att använda bilder från placekitten.com som platshållare bakgrundsbilder.
Du kommer att ha en webbsida med en ren CSS-rullning parallax effekt när du har slutfört handledningen.
Varning: Den här artikeln använder experimentella CSS-egenskaper som inte fungerar över webbläsare. Detta projekt har testats och fungerar på Chrome.
denna teknik fungerar inte bra i Firefox, Safari och iOS på grund av några av dessa webbläsares optimeringar.
Steg 1 — Skapa ett nytt projekt
i det här steget använder du kommandoraden för att skapa en ny projektmapp och filer. För att starta, öppna din terminal och skapa en ny projektmapp.
Skriv följande kommando för att skapa projektmappen:
- mkdir css-parallax
i det här fallet kallade du mappen css-parallax. Ändra nu tillcss-parallax mapp:
- cd css-parallax
skapa sedan enindex.html fil i dincss-parallax mapp mednano kommando:
- nano index.html
du lägger all html för projektet i den här filen.
i nästa steg börjar du skapa strukturen på webbsidan.
steg 2 — Ställa in Applikationsstrukturen
i det här steget lägger du till HTML som behövs för att skapa projektets struktur.
inuti din index.html fil Lägg till följande kod:
<!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>detta är grundstrukturen för de flesta webbsidor som använder HTML.
Lägg till följande kod i<body> tagg:
<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>denna kod skapar tre olika avsnitt. Två kommer att ha en bakgrundsbild, och en kommer att vara en statisk, vanlig bakgrund.
i de närmaste stegen lägger du till stilar för varje avsnitt med de klasser du lagt till i HTML.
steg 3-Skapa en CSS-fil och lägga till Initial CSS
i det här steget skapar du en CSS fil. Då lägger du till den ursprungliga CSS som behövs för att utforma webbplatsen och skapa parallaxeffekten.
Skapa först en styles.css fil i css-parallax mapp mednano kommando:
- nano styles.css
här lägger du all CSS som behövs för att skapa parallaxrullningseffekten.
börja sedan med.wrapper – klassen. Inuti din styles.css fil Lägg till följande kod:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrapper klassen anger perspektivet och rullningsegenskaperna för hela sidan.
höjden på omslaget måste ställas in till ett fast värde för att effekten ska fungera. Du kan använda visningsenheten vh inställd på 100 för att få full höjd på skärmens visningsport.
När du skalar bilderna lägger de till en horisontell rullningsfält på skärmen så att du kan inaktivera den genom att lägga till overflow-x: hidden;. Egenskapen perspective simulerar avståndet från visningsområdet till de pseudoelement som du kommer att skapa och omvandla längre ner i CSS.
i nästa steg lägger du till mer CSS för att utforma din webbsida.
steg 4-lägga stilar för .avsnitt klass
i det här steget lägger du till stilar till .section klass.
inuti din styles.css fil Lägg till följande kod 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 definierar storlek, visning och textegenskaper för huvudavsnitten.
Ställ in en position på relative så att barnet, .parallax::after kan placeras absolut i förhållande till moderelementet .section.
varje sektion har ett view-height(vh) av 100 för att ta upp visningsportens fulla höjd. Detta värde kan ändras och ställas in till vilken höjd du föredrar för varje avsnitt.
slutligen används restenCSS egenskaper för att formatera och lägga till styling till texten i varje avsnitt. Den placerar texten i mitten av varje avsnitt och lägger till en färg på white.
därefter lägger du till ett pseudoelement och utformar det för att skapa parallaxeffekten på två av sektionerna i dittHTML.
Steg 5-lägga stilar för .parallax Class
i det här steget lägger du till stilarna i .parallax – klassen.
först lägger du till ett pseudoelement på .parallax-klassen som ska utformas.
Obs: Du kan besöka MDN web docs för att lära dig mer om CSS pseudo-element.
Lägg till följande kod under.section klass:
....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 lägger till ett::after pseudoelement till bakgrundsbilden och ger de transformationer som behövs för parallaxeffekten.
pseudoelementet är elementets sista barn med klassen .parallax.
den första halvan av koden visar och placerar psuedo-elementet. Egenskapentransform flyttar pseudoelementet tillbaka från kameran påz-index och skalar sedan upp det igen för att fylla visningsområdet.
eftersom pseudoelementet är längre bort verkar det röra sig långsammare.
i nästa steg lägger du till bakgrundsbilder och statisk bakgrundsstil.
steg 6 — lägga till bilder och bakgrund för varje avsnitt
i detta steg lägger du till den slutligaCSS egenskaper för att lägga till i bakgrundsbilder och bakgrundsfärg i den statiska sektionen.
lägg först till en solid bakgrundsfärg till.static med följande kod efter.parallax::after klass:
....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 lägger till en bakgrund till det statiska avsnittet som inte har en bild.
de två avsnitten med klassen.parallax har också en extra klass som är olika för var och en. Använd klasserna .bg1 och .bg2 för att lägga till bakgrundsbilderna för kattunge.
Lägg till följande kod till.static klass:
....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 lägger till respektive bakgrundsbilder för varje avsnitt.
bilderna är från placekitten webbplats. Det är en tjänst för att få bilder av kattungar för användning som platshållare.nu när all kod för parallax rullningseffekten läggs till kan du länka till din styles.css fil i din index.html.
Steg 7 — länka stilar.css och Öppningsindex.html i din webbläsare
i det här steget länkar du din styles.css – fil och öppnar projektet i din webbläsare för att se parallax rullningseffekten.
lägg först till följande kod till<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>...Nu kan du öppna din index.html fil i din webbläsare:
med det har du skapat en fungerande webbsida med en rullningseffekt. Kolla in detta GitHub-arkiv för att se hela koden.
slutsats
i den här artikeln skapar du ett projekt med en index.html och styles.css – fil och har nu en funktionell webbsida. Du lade till i strukturen på din webbsida och skapade stilar för de olika sektionerna på webbplatsen.
det är möjligt att sätta bilderna du använder eller parallaxeffekten längre bort så att de rör sig långsammare. Du måste ändra pixelbeloppet påperspective ochtransform egenskaper. Om du inte vill att en bakgrundsbild ska rulla alls, Använd background-attachment: fixed; istället för perspective/translate/scale.