Inleiding
Modern CSS is een krachtige tool die u kunt gebruiken om veel geavanceerde gebruikersinterface (UI) functies te creëren. In het verleden vertrouwden deze functies op JavaScript-bibliotheken.
in deze gids stelt u een paar CSS-regels in om een scrollend parallax-effect op een webpagina te creëren. U zult afbeeldingen van placekitten.com gebruiken als achtergrondafbeeldingen.
u krijgt een webpagina met een zuiver CSS scrolling parallax effect als u de tutorial hebt voltooid.
waarschuwing: Dit artikel maakt gebruik van experimentele CSS-eigenschappen die niet werken tussen browsers. Dit project is getest en werkt op Chrome.
deze techniek werkt niet goed in Firefox, Safari en iOS als gevolg van sommige van die browsers’ optimalisaties.
Stap 1-Een nieuw Project aanmaken
in deze stap gebruikt u de opdrachtregel om een nieuwe projectmap en bestanden op te zetten. Om te starten opent u uw terminal en maakt u een nieuwe projectmap aan.
Typ het volgende commando om de projectmap aan te maken:
- mkdir css-parallax
In dit geval noemde u de map css-parallax. Ga nu naar de css-parallax Map:
- cd css-parallax
maak vervolgens een index.html bestand in uw css-parallax map met de nano opdracht:
- nano index.html
u plaatst alle HTML voor het project in dit bestand.
In de volgende stap begint u met het maken van de structuur van de webpagina.
Stap 2 – De Toepassingsstructuur instellen
in deze stap voegt u de HTML toe die nodig is om de structuur van het project aan te maken.
binnen uw index.html bestand voeg de volgende code toe:
<!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>Dit is de basisstructuur van de meeste webpagina ‘ s die HTMLgebruiken.
voeg de volgende code toe in de <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>deze code maakt drie verschillende secties aan. Twee zullen een achtergrondafbeelding hebben, en één zal een statische, vlakke achtergrond zijn.
in de volgende stappen zult u de stijlen voor elke sectie toevoegen met behulp van de klassen die u hebt toegevoegd in de HTML.
Stap 3-Een CSS-bestand aanmaken en initiële CSS
toevoegen In deze stap, zult u een CSS bestand aanmaken. Vervolgens voegt u de eerste CSS toe die nodig is om de website te stylen en het parallax-effect te creëren.
maak eerst een styles.css bestand in uw css-parallax map met hetnano Commando:
- nano styles.css
hier plaatst u ALLE CSS die nodig is om het parallax scrolling effect te creëren.
begin vervolgens met de.wrapper klasse. Voeg in uw styles.css bestand de volgende code toe:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}De .wrapper klasse stelt het perspectief en scroll eigenschappen voor de hele pagina.
de hoogte van de wrapper moet worden ingesteld op een vaste waarde om het effect te laten werken. U kunt de viewport unit vh instellen op 100 om de volledige hoogte van de viewport van het scherm te krijgen.
wanneer u de afbeeldingen schaalt, zullen ze een horizontale schuifbalk aan het scherm toevoegen, zodat u deze kunt uitschakelen door overflow-x: hidden;toe te voegen. De eigenschap perspective simuleert de afstand van de viewport tot de pseudo-elementen die u zult maken en verder naar beneden transformeren in de CSS.
in de volgende stap voegt u meer CSS toe om uw webpagina op te stylen.
Stap 4-stijlen toevoegen voor de .sectieklasse
In deze stap voegt u stijlen toe aan de .section klasse.
binnen uw styles.css bestand voeg de volgende code toe onder de wrapper klasse:
.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;}de .section klasse definieert de grootte, weergave en tekst eigenschappen voor de belangrijkste secties.
Stel een positie in van relative zodat de dochter, .parallax::after absoluut ten opzichte van het bovenliggende element kan worden gepositioneerd .section.
elke sectie heeft een view-height(vh) van 100 om de volledige hoogte van de viewport op te nemen. Deze waarde kan worden gewijzigd en ingesteld op elke gewenste hoogte voor elke sectie.
ten slotte worden de overige CSS eigenschappen gebruikt om de tekst in elke sectie te formatteren en op te stylen. Het plaatst de tekst in het midden van elke sectie en voegt een kleur toe van white.
vervolgens voegt u een pseudo-element toe en style het om het parallax-effect te creëren op twee van de secties in uw HTML.
Stap 5-stijlen toevoegen voor de .parallax Klasse
in deze stap voegt u de stijlen toe aan de .parallax klasse.
eerst voegt u een pseudo-element toe aan de .parallax klasse die moet worden opgemaakt.
Opmerking: U kunt MDN web docs bezoeken om meer te weten te komen over CSS pseudo-elementen.
voeg de volgende code toe onder de .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;}...de.parallax klasse voegt een ::after pseudo-element toe aan de achtergrondafbeelding en levert de transformaties die nodig zijn voor het parallax-effect.
het pseudo-element is het laatste kind van het element met de klasse .parallax.
de eerste helft van de code toont en positioneert het psuedo-element. De eigenschap transform verplaatst het pseudo-element terug van de camera op de z-index, en schaalt het vervolgens terug om de viewport te vullen.
omdat het pseudo-element verder weg is, lijkt het langzamer te bewegen.
in de volgende stap voegt u achtergrondafbeeldingen en statische achtergrondstijl toe.
Stap 6 – Het toevoegen van afbeeldingen en achtergrond voor elke sectie
In deze stap voegt u de uiteindelijke CSS eigenschappen toe om toe te voegen aan de achtergrondafbeeldingen en achtergrondkleur van de statische sectie.
voeg eerst een vaste achtergrondkleur toe aan de .static sectie met de volgende code na de .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;}...De .static klasse voegt een achtergrond toe aan de statische sectie die geen afbeelding heeft.
de twee secties met de .parallax klasse hebben ook een extra klasse die voor elke klasse anders is. Gebruik de klassen .bg1 en .bg2 om de achtergrondafbeeldingen van het Kitten toe te voegen.
voeg de volgende code toe aan de .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');}...de .bg1, .bg2 klassen voegen de respectieve achtergrondafbeeldingen voor elke sectie toe.
de afbeeldingen zijn afkomstig van de website van placekitten. Het is een service voor het krijgen van foto ‘ s van kittens voor gebruik als plaatsaanduidingen.
nu alle code voor het parallax scrolling effect is toegevoegd, kunt u linken naar uw styles.css bestand in uw index.html.
Stap 7-Koppelingsstijlen.css en Opening index.html in uw Browser
in deze stap koppelt u uw styles.css bestand en opent u het project in uw browser om het parallax scrolling effect te zien.
voeg eerst de volgende code toe aan de <head> tag in de index.html bestand:
...<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 kunt u uw index.html bestand openen in uw browser:
Hiermee hebt u een functionerende webpagina met een scrolling effect ingesteld. Bekijk deze GitHub repository om de volledige code te zien.
conclusie
In dit artikel zet u een project op met een index.html en styles.css bestand en heeft u nu een functionele webpagina. U hebt de structuur van uw webpagina toegevoegd en stijlen gemaakt voor de verschillende secties op de site.
Het is mogelijk om de afbeeldingen die u gebruikt of het parallax-effect verder weg te zetten zodat ze langzamer bewegen. U moet de hoeveelheid pixels wijzigen op perspective en de transform eigenschappen. Als u helemaal niet wilt dat een achtergrondafbeelding scrolt, gebruik dan background-attachment: fixed; in plaats van perspective/translate/scale.