Indhold
- 01. Kom i gang
- 02. Afslut HTML
- 03. Udforsk Sass-variabler
- 04. Juster kropsstil
- 05. Stil sektionens titler
- 06. Få CTA'erne til at skille sig ud
- 07. Indstil containerbaggrund og -skærme
- 08. Tilføj baggrundsbilleder
- 09. Tilføj overgange og svæveeffekter
- 10. Gå ind i JavaScript
- 11. Tilføj og fjern en klasse
- 12. Gør det lydhørt
Din destinationsside er et afgørende element i dit webstedslayout. Det er den første rigtige mulighed, du har for at introducere din virksomhed eller det produkt, du sælger, så dens design er nøglen. Landingssider er designet med et enkelt fokuseret mål kendt som en opfordring til handling (CTA). Brug af farver og billeder som et supplement til opfordring til handling og brugeroplevelse er et must.
- Se den fungerende CodePen for denne vejledning
I denne vejledning gennemgår vi, hvordan man opbygger en engagerende destinationsside for et fiktivt modemærke. Det vil være centreret omkring et split-screen design med store billeder og animerede overgange, der sker på svævningen.Denne side har to klare opfordringsknapper, og vi bruger HTML, Sass til styling og et strejf af vanille-JavaScript, der bruger ES6-syntaksen (husk at sørge for, at din webhosting passer til dit websteds behov). For kompleks? Opret et websted uden behov for kode, prøv en simpel webstedsbygger.
01. Kom i gang
Hvis du bruger CodePen, skal du sørge for, at CSS er indstillet til 'SCSS' i penindstillingerne. Du kan foretage denne ændring ved at klikke på fanen Indstillinger, vælge 'CSS' og ændre CSS Preprocessor til SCSS i rullemenuerne.
Så kan vi begynde at tilføje i vores HTML. Vi skal pakke en sektion kaldet 'venstre' og en sektion kaldet 'højre' i en containerklasse, hvor begge sektioner får en klasse af 'skærm'.
div> sektion> / sektion> sektion> / sektion> / div>
02. Afslut HTML
For at færdiggøre vores HTML tilføjer vi en titel til hver sektion ved hjælp af en h1 tag. Nedenfor bliver vi nødt til at tilføje en knap, der vil linke til en anden side, hvis dette var et virkeligt projekt. Vi vil give dette en klasse af knap for at holde tingene pæne og enkle.
div> sektion> h1> Herretøj / h1> knap> a href = "#"> Lær mere / a> / knap> / sektion> sektion> h1> Damemode / h1> knap> a href = "#"> Lær Mere / a> / knap> / sektion>
03. Udforsk Sass-variabler
Den eneste ting, vi alle elsker ved Sass, er brugen af variabler. Selvom native CSS-variabler får mere support, holder vi tingene sikre ved at bruge Sass. Vi sætter disse øverst på vores .scss, og du kan vælge de farver, du vil, men bruge rgba værdier giver os større fleksibilitet.
/ * * Variabler * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ venstre-knap-svæver: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ højre-knap-svæver: rgba (255, 140, 219, 0.7); $ svævebredde: 75%; $ lille bredde: 25%; $ animateSpeed: 1000 ms;
04. Juster kropsstil
For det første vil vi rydde al standardpolstring og margen til kroppen og derefter indstille skrifttypefamilien til Open Sans. Dette påvirker kun knappen, så det betyder ikke noget for meget, hvilken skrifttype vi bruger. Derefter indstiller vi bredden og højden til 100% og sørg for, at alt, der flyder over på X-aksen, bliver skjult.
html, body {polstring: 0; margen: 0; font-family: 'Open Sans', sans-serif; bredde: 100%; højde: 100%; overflow-x: skjult; }
05. Stil sektionens titler
Det er tid til at vælge en Google-skrifttype til sektionstitlerne - vi har valgt Playfair Display. Brug derefter translateX vi kan sikre, at sektionstitlerne altid er centreret på X-aksen.
h1 {skriftstørrelse: 5rem; farve: #fff; position: absolut; venstre: 50%; top: 20%; transform: translateX (-50%); hvid-plads: nowrap; font-family: 'Playfair Display', serif; }
06. Få CTA'erne til at skille sig ud
Vores knapper fungerer som vores opfordringer til handling, så disse skal være store, dristige og placeret, hvor de er lette at klikke. Begge knapper har en hvid kant og en interessant overgangseffekt. Standardstilarterne for begge knapper er de samme, men vi ændrer deres farver, når de holder markøren.
.knap {display: blok; position: absolut; venstre: 50%; top: 50%; højde: 2.6rem; polstring-top: 1.2rem; bredde: 15rem; tekstjustering: center; farve: hvid; kant: 3 px solid #fff; border-radius: 4px; fontvægt: 600; tekst-transformation: store bogstaver; tekst-dekoration: ingen; transform: translateX (-50%); overgang: alle .2s;
Hovedknapperne har en dejlig simpel svæveeffekt, og vi bruger de Sass-variabler, vi har angivet for farven, som vil have en lignende farve som baggrunden på siden.
.screen.left .button: svæver {baggrundsfarve: $ venstre-knap-svæver; border-color: $ venstre-knap-svæver; } .screen.right .button: svæver {baggrundsfarve: $ højre-knap-svæver; border-color: $ højre-knap-svæver;
07. Indstil containerbaggrund og -skærme
Containerklassen fungerer som vores sideindpakning, og vi indstiller positionen for denne til relativ, simpelthen fordi vi vil placere skærmene til absolut positionering. Vi giver beholderen en standard baggrundsfarve, men dette ses naturligvis ikke, fordi vi indstiller forskellige farver til begge skærmbaggrunde.
.container {position: relative; bredde: 100%; højde: 100%; baggrund: $ container-BgColor; .screen {position: absolut; bredde: 50%; højde: 100%; overløb: skjult; }}
08. Tilføj baggrundsbilleder
Både venstre og højre sektion viser et billede, og du kan finde royaltyfrie stockbilleder fra websteder som Unsplash, Pixabay eller Pexels (som jeg har brugt i denne vejledning). For at gøre tingene lettere har jeg brugt en gratis billedhosting- og delingstjeneste kaldet imgbb, som vi kan linke til i vores CSS.
.screen.left {venstre: 0; baggrund: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centercenter ikke gentages; baggrundsstørrelse: omslag; &: før {position: absolut; indhold: ""; bredde: 100%; højde: 100%; baggrund: $ left-bgColor; }}
Højre side af siden viser også et baggrundsbillede ved hjælp af imgbb, og vi sætter baggrundsfarven til lyserød. Igen indstiller vi baggrundsstørrelsen til dække over. Dette giver os mulighed for at dække hele det indeholdende element, som i vores tilfælde er det .skærm klasse.
.screen.right {højre: 0; baggrund: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centercenter ikke gentages; baggrundsstørrelse: omslag; &: før {position: absolut; indhold: ""; bredde: 100%; højde: 100%; baggrund: $ right-bgColor; }}
09. Tilføj overgange og svæveeffekter
Animationshastigheden for vores svæveeffekt på begge skærme styres af en overgang, der holder værdien af vores variabel $ animateSpeed, hvilket er 1000 ms (et sekund). Derefter slutter vi med at give animationen lidt lempelse, hvilket er en lethed ind og ud, der hjælper med at give os en jævnere animation.
.screen.left, .screen.right, .screen.right: før, .screen.left: før {overgang: $ animateSpeed all eas-in-out; }
Hvad vi ønsker at ske nu er, at når du svæver over venstre skærm, vil der blive tilføjet en klasse til dette afsnit ved hjælp af JavaScript (som vi skriver i et senere trin). Når denne klasse tilføjes, strækker skærmen sig uanset bredden på den variabel, vi specificerede - som vil være 75%, og derefter indstilles højre side til den mindre bredde (25%).
.hover-left .left {width: $ hover-width; } .over-venstre. højre {bredde: $ lille-bredde; } .over-venstre. højre: før {z-indeks: 2; }
Dette fungerer nøjagtigt det samme som venstre side, hvor en ny klasse tilføjes på musen svæver ved hjælp af JavaScript, og den højre skærm strækker sig i overensstemmelse hermed. Vi er også nødt til at sikre, at z-indeks er indstillet til 2 så CTA-knappen bliver mere fremtrædende.
.hover-højre .right {width: $ hover-width; } .hover-højre. venstre {bredde: $ lille bredde; }. over-højre. venstre: før {z-indeks: 2; }
10. Gå ind i JavaScript
Vi bruger et strejf af vanille JavaScript til at hjælpe os med at tilføje og fjerne CSS-klasser, og vi vil også bruge nogle af de nye ES6-funktioner. Den første ting, vi skal gøre, er at erklære nogle konstante variabler.
Fordi vi bruger dokument mere end én gang vil vi indstille en konstant variabel kaldet dok og opbevar dokumentet inden for det, så vi kan holde ordet 'dokument' pænt og kort.
const doc = dokument;
Nu skal vi indstille yderligere tre konstanter, der gemmer .ret, .venstre og .beholder vælgere. Årsagen til, at vi bruger konstanter, er, fordi vi ved, at vi ikke vil ændre værdien af disse, så det er fornuftigt at bruge konstanter. Med disse nu indstillede kan vi fortsætte og tilføje nogle musebegivenheder til dem.
const right = doc.querySelector (". højre"); const left = doc.querySelector (". venstre"); const container = doc.querySelector (". container");
Bruger venstre konstant variabel, vi erklærede i det sidste trin, kan vi nu tilføje en begivenhedslytter til den. Denne begivenhed bliver den musen begivenhed og i stedet for at bruge en tilbagekaldsfunktion, bruger vi en anden ES6-funktion kaldet Pilefunktioner ’(() =>).
// tilføjer en klasse til containerelementet på hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Tilføj og fjern en klasse
I det sidste trin tilføjede vores begivenhedslytter en musen begivenhed, der er målrettet mod hovedcontainerklassen og tilføjer en ny klasse kaldet svæver-venstre til venstre sektionselement. Med dette kaldet tilføjet skal vi nu fjerne det, når vi holder markøren over det. Vi gør dette ved at bruge museløv begivenhed og .fjerne() metode.
// fjerner klassen, der blev tilføjet på hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Indtil nu har vi gjort alt på venstre skærm. Nu afslutter vi JavaScript og tilføjer og fjerner klasser på de rigtige sektionselementer. Igen har vi brugt pilfunktionens syntaks her for at holde alt ser pænt og pænt ud.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Gør det lydhørt
Intet projekt - uanset hvor stort eller lille - bør undgå at blive lydhør. Så i dette trin vil vi tilføje nogle medieforespørgsler til vores CSS og gøre dette lille projekt så tilpasningsdygtigt til mobile enheder så godt vi kan. Det er værd at tjekke den originale CodePen for at se, hvordan dette fungerer.
@media (maks. bredde: 800 px) {h1 {skriftstørrelse: 2rem; } .knap {bredde: 12rem; }
Vi har sørget for, at når bredden på vores side kommer ned til 800 px, bliver skrifttypen og knapperne mindre. Så for at afslutte tingene ønsker vi også at målrette højden og sørge for, at vores knapper bevæger sig ned på siden, når sidehøjden kommer under 700 px.
@media (maks. højde: 700 pixel) {.knapp {øverst: 70%; }}
Vil du gemme dine sider? Eksporter dem som PDF-filer, og gem dem i sikker skyopbevaring.
Webdesign begivenhed Generer London vender tilbage den 19.-21. september 2018 og tilbyder en fyldt tidsplan med brancheførende højttalere, en hel dag med workshops og værdifulde netværksmuligheder - gå ikke glip af det. Få din Generate-billet nu.
Denne artikel blev oprindeligt offentliggjort i netmagasinet udgave 305. Tilmeld nu.
