Inhoud
- 01. Bereid je voor
- 02. Maak de HTML af
- 03. Onderzoek Sass-variabelen
- 04. Pas de styling van het lichaam aan
- 05. Stijl de sectietitels
- 06. Laat de CTA's opvallen
- 07. Stel de container achtergrond en schermen in
- 08. Voeg achtergrondafbeeldingen toe
- 09. Overgangen en zweefeffecten toevoegen
- 10. Ga naar JavaScript
- 11. Voeg een klasse toe en verwijder deze
- 12. Maak het responsief
Uw bestemmingspagina is een cruciaal element in de lay-out van uw website. Het is de eerste echte kans die u krijgt om uw bedrijf of het product dat u verkoopt te introduceren, dus het ontwerp is essentieel. Bestemmingspagina's zijn ontworpen met een enkel gericht doel dat bekend staat als een call-to-action (CTA). Het gebruik van kleuren en afbeeldingen als aanvulling op de oproepen tot actie en de gebruikerservaring is een must.
- Zie de werkende CodePen voor deze tutorial
In deze training laten we zien hoe u een boeiende bestemmingspagina kunt maken voor een fictief modemerk. Het wordt gecentreerd rond een ontwerp met een gesplitst scherm met grote afbeeldingen en geanimeerde overgangen die plaatsvinden tijdens het zweven.Deze pagina heeft twee duidelijke call-to-action-knoppen en we gebruiken HTML, Sass voor styling en een vleugje vanille JavaScript dat de ES6-syntaxis gebruikt (vergeet niet ervoor te zorgen dat uw webhosting geschikt is voor uw website-behoeften). Te ingewikkeld? Maak een website zonder code, probeer een eenvoudige websitebouwer.
01. Bereid je voor
Als u CodePen gebruikt, zorg er dan voor dat de CSS is ingesteld op ’SCSS’ in de instellingen van de pen. U kunt deze wijziging aanbrengen door op het tabblad instellingen te klikken, ’CSS’ te kiezen en de CSS Preprocessor te wijzigen in SCSS in de vervolgkeuzelijsten.
Dan kunnen we beginnen met het toevoegen van onze HTML. We gaan een sectie met de naam ‘links’ en een sectie met de naam ‘rechts’ in een containerklasse wikkelen, waarbij beide secties de klasse ’scherm’ krijgen.
div> sectie> / sectie> sectie> / sectie> / div>
02. Maak de HTML af
Om onze HTML af te ronden, zullen we voor elke sectie een titel toevoegen met een h1 label. Daaronder moeten we een knop toevoegen, die naar een andere pagina zou linken als dit een real-world project was. We zullen dit een klasse geven knop om dingen leuk en simpel te houden.
div> sectie> h1> Herenmode / h1> knop> a href = "#"> Meer informatie / a> / knop> / sectie> sectie> h1> Damesmode / h1> knop> a href = "#"> Leren Meer / a> / knop> / sectie>
03. Onderzoek Sass-variabelen
Het enige dat we allemaal leuk vinden aan Sass, is het gebruik van variabelen. Hoewel native CSS-variabelen meer ondersteuning krijgen, zullen we de zaken veilig houden door Sass te gebruiken. We zullen deze bovenaan onze .scss, en u kunt elke gewenste kleur kiezen, maar met rgba waarden geven ons meer flexibiliteit.
/ * * Variabelen * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ left-button-hover: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ rechterknop-hover: rgba (255, 140, 219, 0.7); $ hover-breedte: 75%; $ kleine breedte: 25%; $ animateSpeed: 1000 ms;
04. Pas de styling van het lichaam aan
Ten eerste zullen we alle standaard opvulling en marge naar het lichaam wissen en vervolgens de lettertypefamilie instellen op Open Sans. Dit heeft alleen invloed op de knop, dus het maakt niet zoveel uit welk lettertype we gebruiken. Vervolgens stellen we de breedte en hoogte in op 100% en zorg ervoor dat alles dat over de X-as stroomt, verborgen wordt.
html, body {padding: 0; marge: 0; font-family: ’Open Sans’, sans-serif; breedte: 100%; hoogte: 100%; overflow-x: verborgen; }
05. Stijl de sectietitels
Het is tijd om een Google-lettertype te kiezen voor de sectietitels - we hebben gekozen voor Playfair Display. Gebruik dan translateX we kunnen ervoor zorgen dat de sectietitels altijd gecentreerd zijn op de X-as.
h1 {font-size: 5rem; kleur: #fff; positie: absoluut; links: 50%; top: 20%; transform: translateX (-50%); witruimte: nowrap; font-family: ’Playfair Display’, serif; }
06. Laat de CTA's opvallen
Onze knoppen fungeren als onze call-to-action, dus deze moeten groot en vet zijn en zo worden geplaatst dat er gemakkelijk op kan worden geklikt. Beide knoppen hebben een witte rand en een interessant overgangseffect. De standaardstijlen voor beide knoppen zijn hetzelfde, maar we zullen hun kleuren wijzigen tijdens het zweven.
.button {display: block; positie: absoluut; links: 50%; boven: 50%; hoogte: 2.6rem; padding-top: 1.2rem; breedte: 15rem; text-align: center; kleur wit; border: 3px solid #fff; grensradius: 4px; lettertype-gewicht: 600; text-transform: hoofdletters; tekstversiering: geen; transform: translateX (-50%); overgang: alle .2s;
De hoofdknoppen hebben een mooi eenvoudig zweefeffect en we zullen de Sass-variabelen gebruiken die we voor de kleur hebben gespecificeerd, die een vergelijkbare kleur zullen hebben als de achtergrond van de pagina.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Stel de container achtergrond en schermen in
De containerklasse zal fungeren als onze paginawrapper en we zullen de positie hiervan op relatief zetten, simpelweg omdat we de schermen op absolute positionering willen plaatsen. We zullen de container een standaard achtergrondkleur geven, maar dit wordt natuurlijk niet gezien omdat we verschillende kleuren zullen instellen voor beide schermachtergronden.
.container {positie: relatief; breedte: 100%; hoogte: 100%; achtergrond: $ container-BgColor; .screen {positie: absoluut; breedte: 50%; hoogte: 100%; overloop verborgen; }}
08. Voeg achtergrondafbeeldingen toe
Zowel het linker- als het rechtergedeelte zal een afbeelding weergeven en u kunt royaltyvrije stockfoto's vinden van websites zoals Unsplash, Pixabay of Pexels (die ik in deze zelfstudie heb gebruikt). Om het gemakkelijker te maken, heb ik een gratis service voor het hosten en delen van afbeeldingen gebruikt, genaamd imgbb, waarnaar we kunnen linken in onze CSS.
.screen.left {left: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centrum centrum geen herhaling; achtergrondgrootte: omslag; &: voor {positie: absoluut; inhoud: ""; breedte: 100%; hoogte: 100%; achtergrond: $ left-bgColor; }}
Aan de rechterkant van de pagina wordt ook een achtergrondafbeelding weergegeven met imgbb, en we zullen de achtergrondkleur op roze zetten. Nogmaals, we stellen de achtergrondgrootte in op Hoes. Hierdoor kunnen we het hele bevattende element bedekken, wat in ons geval de .scherm klasse.
.screen.right {right: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centrum centrum geen herhaling; achtergrondgrootte: omslag; &: voor {positie: absoluut; inhoud: ""; breedte: 100%; hoogte: 100%; achtergrond: $ right-bgColor; }}
09. Overgangen en zweefeffecten toevoegen
De animatiesnelheid voor ons hover-effect op beide schermen wordt bepaald door een overgang die de waarde van onze variabele bevat $ animateSpeed, dat is 1000 ms (een seconde). Daarna eindigen we door de animatie wat lichter te maken, wat het in- en uitstappen helpt om de animatie vloeiender te maken.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed alle gemak-in-uit; }
Wat we nu willen gebeuren, is dat wanneer je de muisaanwijzer over het linkerscherm beweegt, er een klasse aan die sectie wordt toegevoegd met behulp van JavaScript (die we in een latere stap zullen schrijven). Wanneer deze klasse wordt toegevoegd, wordt dat scherm uitgerekt tot ongeacht de breedte van de variabele die we hebben gespecificeerd - wat 75% zal zijn, en dan wordt de rechterkant ingesteld op de kleinere breedtevariabele (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: voor {z-index: 2; }
Dit werkt precies hetzelfde als de linkerkant, waar een nieuwe klasse wordt toegevoegd door met de muis te zweven met JavaScript, en het rechterscherm zal dienovereenkomstig worden uitgerekt. We moeten er ook voor zorgen dat het z-index ingesteld op 2 zodat de CTA-knop prominenter wordt.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: voor {z-index: 2; }
10. Ga naar JavaScript
We zullen een vleugje vanille JavaScript gebruiken om ons te helpen CSS-klassen toe te voegen en te verwijderen, en we zullen ook enkele van de nieuwe ES6-functies gebruiken. Het eerste dat we moeten doen, is een aantal constante variabelen declareren.
Omdat we zullen gebruiken document meer dan eens zullen we een constante variabele instellen met de naam doc en sla het document daarin op, zodat we het woord ’document’ mooi kort kunnen houden.
const doc = document;
Nu moeten we nog drie constanten instellen die de .Rechtsaf, .links en .container kiezers. De reden dat we constanten gebruiken, is omdat we weten dat we de waarde hiervan niet willen veranderen, dus het is logisch om a constanten te gebruiken. Nu deze zijn ingesteld, kunnen we doorgaan en er enkele muisgebeurtenissen aan toevoegen.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
De ... gebruiken links constante variabele die we in de laatste stap hebben gedeclareerd, kunnen we er nu een gebeurtenislistener aan toevoegen. Dit evenement wordt de mouseenter gebeurtenis en in plaats van een callback-functie te gebruiken, zullen we een andere ES6-functie gebruiken met de naam Pijlfuncties ’(() =>).
// voegt een klasse toe aan het containerelement op hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Voeg een klasse toe en verwijder deze
In de laatste stap heeft onze gebeurtenisluisteraar een mouseenter event dat zich richt op de hoofdcontainerklasse en een nieuwe klasse toevoegt met de naam zweef links naar het linker sectie-element. Met dit genaamd toegevoegd, moeten we het nu verwijderen wanneer we eraf zweven. We doen dit met behulp van de muis verlaten evenement en de .verwijderen() methode.
// verwijdert de klasse die werd toegevoegd bij hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Tot nu toe hebben we alles op het linkerscherm gedaan. Nu zullen we het JavaScript afmaken en klassen toevoegen en verwijderen aan de juiste sectie-elementen. We hebben hier opnieuw de syntaxis van de pijlfunctie gebruikt om alles er netjes en opgeruimd uit te laten zien.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Maak het responsief
Geen enkel project - hoe groot of klein ook - mag voorkomen dat het responsief wordt gemaakt. In deze stap zullen we dus enkele mediaquery's aan onze CSS toevoegen en dit kleine project zo goed mogelijk aanpassen aan mobiele apparaten. Het is de moeite waard om de originele CodePen te bekijken om te zien hoe dit werkt.
@media (max-breedte: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
We hebben ervoor gezorgd dat wanneer de breedte van onze pagina daalt tot 800px, het lettertype en de knoppen kleiner worden. Om het af te maken, willen we ons ook op de hoogte richten en ervoor zorgen dat onze knoppen naar beneden op de pagina gaan als de paginahoogte onder de 700px komt.
@media (max-hoogte: 700px) {.button {top: 70%; }}
Wilt u uw pagina's opslaan? Exporteer ze als pdf's en sla ze op in veilige cloudopslag.
Webdesign evenement Genereer Londen keert terug op 19-21 september 2018, met een vol programma van toonaangevende sprekers, een volledige dag vol workshops en waardevolle netwerkmogelijkheden - mis het niet. Koop nu uw Generate-ticket.
Dit artikel is oorspronkelijk gepubliceerd in net magazine kwestie 305. Abonneer nu.
