Moderne CSS heeft webontwikkeling opnieuw gedefinieerd met zijn krachtige functionaliteiten en buitengewone mogelijkheden. CSS is een universele tool die uitstekende opties biedt om webpagina's zeer interactief en aantrekkelijk te maken. Of het nu gaat om flexibiliteit in ontwerp, snelle aanpassing, uitstekende stylingopties of de geavanceerde gebruikersinterface (UI) — CSS biedt end-to-end oplossingen voor alle behoeften op het gebied van webontwikkeling en styling. Bovenal kunt u met CSS en HTML animaties en effecten toevoegen door slechts een paar regels code te schrijven, wat anders behoorlijk inspannend is met JavaScript.
In deze handleiding leiden we u door de stappen voor het maken van een parallax-scrolleffect met CSS in Chrome.
Vereisten
Om deze handleiding te volgen, moet u een basisbegrip hebben van HTML and CSS.
Stap 1: Maak een nieuw project aan
Laten we beginnen met het maken van een nieuwe projectmap en bestanden met behulp van de opdrachtregelinterface. Open uw terminal en typ de volgende opdracht om een nieuwe projectmap te maken:
|
1 |
mkdir css-parallax |
Gebruik de cd opdracht om de map te wijzigen naar de css-parallax map:
|
1 |
cd css-parallax |
Maak vervolgens een HTML-bestand in de css-parallax map waarin we alle HTML-codes zullen plaatsen. Noem het bestand index.html en open het met de nano opdracht:
|
1 |
nano index.html |
Zodra we ons index.html bestand klaar hebben, gaan we verder en structureren we de webpagina door de inleidende HTML codes toe te voegen.
Stap 2: Structuur van de basis-HTML
In deze stap ontwerpen we onze webpagina door de HTML codes toe te voegen. Voeg de volgende regels code toe aan het index.html bestand:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax-scrolleffect met with CSS</title> </head> <body></body> </html> |
Na het opzetten van de basisstructuur van onze webpagina's, maakt u drie sectieklassen aan – twee voor de achtergrondafbeeldingen en één voor de statische, effen achtergrond. Voeg vervolgens de volgende regels code toe aan de <body> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Vóór parallax-scrolleffectEffect</h1> </section> <section class="section static"> <h1>Welkom bij parallax-scrolling</h1> </section> <section class="section parallax bg2"> <h1>Na parallax-scrolleffectEffect</h1> </section> </main> ... </body> |
Het invoegen van de HTML-codes in de <body> tag voltooit de basisconfiguratie van ons html.-bestand. In de volgende stappen introduceren we CSS en definiëren we stylingopties voor elk.
Stap 3: Inleiding tot CSS
Laten we de website stylen door het CSS-bestand toe te voegen en het parallax-effect te maken. Maak eerst een CSS-bestand in de css-parallax map waarin we alle CSS-codes plaatsen die nodig zijn om het parallax-scrolleffect te creëren. Voeg daarna een styles.css-bestand in je css-parallax-map met het nano -commando:
|
1 |
nano styles.css |
We stylen onze webpagina te beginnen met de .wrapper class. De .wrapper class stelt de perspectief- en scrolleigenschappen in voor de hele pagina. Begin met de wrapper-class en geef de hoogte, overflow en perspectief op. Stel de hoogte van de wrapper in op een constante waarde om het parallax-scrolleffect te laten werken. In deze handleiding hebben we de viewport-waarde ingesteld met behulp van 100vh om de volledige hoogte van de viewport van het scherm te krijgen. Je kunt de vh-waarde aanpassen op basis van je projectbehoeften. Schakel vervolgens de horizontale schuifbalk van het scherm uit door de overflow-x-eigenschap in te stellen op hidden. Geef ook de perspective-eigenschapswaarde op als 3px. Laten we de volgende regels code toevoegen aan het styles.css -bestandsclass:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Stap 4: Stijl toevoegen voor de .section-class
Voeg naast de wrapper-class stijlen toe aan de .section class. De .section class definieert de grootte, weergave en teksteigenschappen voor de hoofdsecties. Stel de positie in op relative om een relatieve positionering van het kind-element .parallax::after en het ouder-element .section uit te lijnen. Houd de view-height(vh) op 100 om de volledige hoogte van de viewport van het scherm te krijgen. Voeg de andere parameters toe, wijzig ze en stijl ze naar eigen behoefte.
Voeg in je styles.css -bestand de volgende code toe naast de wrapper-class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Vervolgens voegen we een pseudo-element toe en stijlen we dit om het parallax-effect te creëren en in werking te stellen.
Stap 5: Stijlen toevoegen voor de .parallax-class
In deze stap voegen we een pseudo-element toe aan de .parallax. Dit pseudo-element is het laatste kind van het element en voegt een ::after pseudo-element toe aan de achtergrondafbeelding die verantwoordelijk is voor het initiëren van het parallax-effect. In de eerste helft van de code worden de basisweergavespecificatie en positionering van het pseudo-element ingesteld. In de volgende helft voegen we de transform-eigenschap toe met behulp van de translateZ() CSS-functie en houden we deze op (-1px). Voeg daarnaast een z-index toe om de verticale stapeling te regelen.
Voeg de volgende code toe onder de .section -class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; 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; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Stap 6: Afbeeldingen en achtergrond toevoegen voor elke sectie
Laten we de laatste CSS eigenschappen toevoegen aan de achtergrondafbeeldingen en achtergrondkleur van de statische sectie. Begin met het toevoegen van een effen achtergrondkleur aan de .static sectie. Stel de achtergrondkleur in op aqua en voeg de volgende code toe na de .parallax::after -class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
De .static class voegt een achtergrond toe aan de statische sectie die geen afbeelding heeft. De andere twee secties met de .parallax class hebben unieke classes die bedoeld zijn voor het bevatten van achtergrondafbeeldingen. Voeg de URL's van de achtergrondafbeeldingen toe in .bg1 en .bg2 classes respectievelijk.
In deze handleiding gebruiken we willekeurige afbeeldingen van Unsplash. Je kunt ook afbeeldingen van andere websites gebruiken, zoals Pixapay, Placekitten, en Pexels, om er een paar te noemen, en deze naar wens aanpassen. Voeg de volgende code toe aan de .static class:
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Stap 7: CSS verbinden met HTML
Nu we alle code voor het parallax-scrolleffect hebben toegevoegd, laten we het styles.css-bestand koppelen aan het index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax-scrolleffect Effect met CSS</title> </head> ... |
Open index.html dat we hebben gemaakt in Stap 2 en in de Chrome-browser:
Conclusie
In deze handleiding hebben we de stappen doorlopen om een functionerende webpagina op te zetten met een basisconfiguratie. Er zijn tal van andere interessante opties en aanpassingsmogelijkheden waarmee je kunt experimenteren. Je kunt proberen schaduweffecten toe te voegen, het scrollen van afbeeldingen aan te passen en andere wijzigingen aan te brengen om het leren leuk en boeiend te maken.
Om je verder te verdiepen in webontwikkeling, kun je deze bronnen van onze blog:
- Een handleiding voor het toevoegen van JavaScript aan HTML
- Werken met JavaScript: Wat zijn objecten
- Wat is jQuery en hoe kun je het gebruiken
Veel programmeerplezier!
Reacties
Nog geen reacties. Wees de eerste.