Innhold
- 01. Sett deg opp
- 02. Fullfør HTML
- 03. Utforsk Sass-variabler
- 04. Juster kroppsstil
- 05. Stil seksjonstitlene
- 06. Få CTA-ene til å skille seg ut
- 07. Still containerbakgrunnen og skjermbildene
- 08. Legg til bakgrunnsbilder
- 09. Legg til overganger og sveveeffekter
- 10. Gå inn i JavaScript
- 11. Legg til og fjern en klasse
- 12. Gjør det responsivt
Landingssiden din er et viktig element i nettstedsoppsettet. Det er den første virkelige muligheten du har til å introdusere virksomheten din, eller produktet du selger, så designen er nøkkelen. Landingssider er utformet med et enkelt fokusert mål, kjent som en oppfordring til handling (CTA). Bruk av farger og bilder for å utfylle oppfordringene til handling og brukeropplevelsen er et must.
- Se den fungerende CodePen for denne opplæringen
I denne veiledningen går vi gjennom hvordan du bygger en engasjerende destinasjonsside for et fiktivt motemerke. Det vil være sentrert rundt et delt skjermdesign med store bilder og animerte overganger som skjer på svev.Denne siden har to tydelige oppfordringsknapper, og vi bruker HTML, Sass for styling og et snev av vanilje JavaScript som bruker ES6-syntaksen (husk å sørge for at webhotellet ditt passer til nettstedsbehovet ditt). For komplisert? Opprett et nettsted uten behov for kode, prøv en enkel nettstedbygger.
01. Sett deg opp
Hvis du bruker CodePen, må du sørge for at CSS er satt til 'SCSS' i penninnstillingene. Du kan gjøre denne endringen ved å klikke på innstillingsfanen, velge 'CSS' og endre CSS Preprocessor til SCSS i rullegardinmenyene.
Så kan vi begynne å legge til i HTML-en. Vi skal pakke inn en seksjon kalt 'venstre' og en seksjon kalt 'høyre' i en containerklasse, med begge seksjoner gitt en klasse med 'skjerm'.
div> seksjon> / seksjon> seksjon> / seksjon> / div>
02. Fullfør HTML
For å fullføre HTML-en vår, legger vi til en tittel for hver seksjon ved hjelp av en h1 stikkord. Under det må vi legge til en knapp som vil lenke til en annen side hvis dette var et reelt prosjekt. Vi vil gi dette en klasse av knapp for å holde ting fine og enkle.
div> seksjon> h1> Herre mote / h1> knapp> a href = "#"> Lær mer / a> / knapp> / seksjon> seksjon> h1> Damemote / h1> knapp> a href = "#"> Lær Mer / a> / knapp> / seksjon>
03. Utforsk Sass-variabler
Den eneste tingen vi alle elsker ved Sass er bruken av variabler. Selv om innfødte CSS-variabler får mer støtte, vil vi holde ting trygt ved å bruke Sass. Vi vil sette disse på toppen av vår .scss, og du kan velge hvilke farger du vil, men bruke rgba verdier vil gi oss mer fleksibilitet.
/ * * Variabler * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ venstre-knapp-svever: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ høyre-knapp-svever: rgba (255, 140, 219, 0.7); $ svevebredde: 75%; $ liten bredde: 25%; $ animateSpeed: 1000ms;
04. Juster kroppsstil
For det første vil vi fjerne all standard polstring og margin til kroppen og deretter sette fontfamilien til Open Sans. Dette vil bare påvirke knappen, så det betyr ikke noe for mye hvilken skrift vi bruker. Deretter vil vi sette bredden og høyden til 100% og sørg for at alt som renner over X-aksen blir skjult.
html, kropp {polstring: 0; margin: 0; font-family: ’Open Sans’, sans-serif; bredde: 100%; høyde: 100%; overflow-x: skjult; }
05. Stil seksjonstitlene
Det er på tide å velge en Google-font for seksjonstitlene - vi har valgt Playfair Display. Bruk deretter translateX vi kan sørge for at seksjonstitlene alltid er sentrert på X-aksen.
h1 {font-size: 5rem; farge: #fff; posisjon: absolutt; venstre: 50%; topp: 20%; transform: translateX (-50%); white-space: nowrap; font-family: ‘Playfair Display’, serif; }
06. Få CTA-ene til å skille seg ut
Knappene våre fungerer som våre oppfordringer til handling, så disse må være store, dristige og plassert der de er enkle å klikke. Begge knappene vil ha en hvit kant og en interessant overgangseffekt. Standardstiler for begge knappene vil være de samme, men vi vil endre fargene deres når du holder markøren.
.knapp {display: block; posisjon: absolutt; venstre: 50%; topp: 50%; høyde: 2.6rem; polstring-topp: 1.2rem; bredde: 15rem; tekstjustering: sentrum; farge: hvit; kant: 3px solid #fff; border-radius: 4px; skriftvekt: 600; tekst-transform: store bokstaver; tekstdekorasjon: ingen; transform: translateX (-50%); overgang: alle .2s;
Hovedknappene vil ha en fin enkel sveveeffekt, og vi vil bruke Sass-variablene vi spesifiserte for fargen, som vil ha en lignende farge som bakgrunnen på siden.
.screen.left .button: hover {bakgrunnsfarge: $ left-button-hover; border-color: $ venstre-knapp-svever; } .screen.right .button: hover {bakgrunnsfarge: $ right-button-hover; border-color: $ høyre-knapp-svever;
07. Still containerbakgrunnen og skjermbildene
Containerklassen vil fungere som vår sideinnpakning, og vi vil sette posisjonen til denne til relativt, bare fordi vi vil plassere skjermene til absolutt posisjonering. Vi vil gi beholderen en standard bakgrunnsfarge, men dette blir selvfølgelig ikke sett fordi vi vil sette forskjellige farger på begge skjermbakgrunnene.
.container {posisjon: relativ; bredde: 100%; høyde: 100%; bakgrunn: $ container-BgColor; .screen {posisjon: absolutt; bredde: 50%; høyde: 100%; overløp: skjult; }}
08. Legg til bakgrunnsbilder
Både venstre og høyre del viser et bilde, og du kan finne royaltyfrie arkivbilder fra nettsteder som Unsplash, Pixabay eller Pexels (som jeg har brukt i denne opplæringen). For å gjøre ting enklere, har jeg brukt en gratis tjeneste for bildebehandling og deling kalt imgbb som vi kan koble til i CSS.
.screen.left {venstre: 0; bakgrunn: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center no-repeat; bakgrunnsstørrelse: omslag; &: før {posisjon: absolutt; innhold: ""; bredde: 100%; høyde: 100%; bakgrunn: $ left-bgColor; }}
På høyre side av siden vises også et bakgrunnsbilde ved hjelp av imgbb, og vi vil sette bakgrunnsfargen til rosa. Igjen setter vi bakgrunnsstørrelsen til dekke. Dette vil tillate oss å dekke hele inneholdende element, som i vårt tilfelle er .skjerm klasse.
.screen.right {høyre: 0; bakgrunn: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center no-repeat; bakgrunnsstørrelse: omslag; &: før {posisjon: absolutt; innhold: ""; bredde: 100%; høyde: 100%; bakgrunn: $ right-bgColor; }}
09. Legg til overganger og sveveeffekter
Animasjonshastigheten for vår sveveeffekt på begge skjermene vil bli styrt av en overgang som holder verdien av variabelen vår $ animateSpeed, som er 1000 ms (ett sekund). Så avslutter vi med å gi animasjonen litt lettelser, noe som er en letthet inn og ut som vil bidra til å gi oss en jevnere animasjon.
.screen.left, .screen.right, .screen.right: før, .screen.left: før {overgang: $ animateSpeed all let-in-out; }
Det vi ønsker å skje nå er at når du holder markøren over venstre skjerm, vil det bli lagt til en klasse i den delen ved hjelp av JavaScript (som vi vil skrive i et senere trinn). Når denne klassen er lagt til, vil den skjermen strekke seg til uansett bredden på variabelen vi spesifiserte - som vil være 75%, og deretter blir høyre side satt til den mindre breddevariabelen (25%).
.hover-left .left {width: $ hover-width; } .hover-venstre .høyre {bredde: $ liten bredde; } .hover-venstre .høyre: før {z-indeks: 2; }
Dette fungerer nøyaktig det samme som venstre side, der en ny klasse vil bli lagt til på musen med JavaScript, og høyre skjerm vil strekke seg deretter. Vi må også sørge for at z-indeks er satt til 2 slik at CTA-knappen blir mer fremtredende.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-høyre .left: før {z-indeks: 2; }
10. Gå inn i JavaScript
Vi bruker et snev av vanilje JavaScript for å hjelpe oss å legge til og fjerne CSS-klasser, og vi vil også bruke noen av de nye ES6-funksjonene. Det første vi må gjøre er å erklære noen konstante variabler.
Fordi vi skal bruke dokument mer enn en gang vil vi sette en konstant variabel kalt dok og lagre dokumentet i det slik at vi kan holde ordet ’dokument’ fint og kort.
const doc = dokument;
Nå må vi stille inn tre konstanter til som skal lagre .Ikke sant, .venstre og .container velgerne. Grunnen til at vi bruker konstanter er fordi vi vet at vi ikke vil endre verdien på disse, så det er fornuftig å bruke konstanter. Med disse nå satt, kan vi fortsette og legge til noen mushendelser til dem.
const right = doc.querySelector (". right"); const left = doc.querySelector (". venstre"); const container = doc.querySelector (". container");
Bruker venstre konstant variabel vi erklærte i det siste trinnet, kan vi nå legge til en hendelseslytter til den. Denne hendelsen vil være musesenter hendelse og i stedet for å bruke en tilbakeringingsfunksjon, vil vi bruke en annen ES6-funksjon som heter Pilfunksjoner ’(() =>).
// legger til en klasse i containerelementet på hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Legg til og fjern en klasse
I det siste trinnet la lytteren vår til a musesenter hendelse som er målrettet mot hovedcontainerklassen og legger til en ny klasse kalt sveve-venstre til venstre seksjonselement. Når dette kalles lagt til, må vi nå fjerne det når vi holder markøren over det. Vi gjør dette ved å bruke mouseleave hendelse og .fjerne() metode.
// fjerner klassen som ble lagt til på hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Inntil nå har vi gjort alt på venstre skjerm. Nå vil vi fullføre JavaScript og legge til og fjerne klasser på høyre seksjonselementer. Igjen har vi brukt syntaksen for pilfunksjonen her for å holde alt pent og ryddig.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Gjør det responsivt
Intet prosjekt - uansett hvor stort eller lite - skal unngå å bli responsivt. Så i dette trinnet vil vi legge til noen mediespørsmål i CSS-en vår, og gjøre dette lille prosjektet så tilpasset mobile enheter så godt vi kan. Det er verdt å sjekke ut den originale CodePen for å se hvordan dette fungerer.
@media (maks-bredde: 800 px) {h1 {skriftstørrelse: 2rem; } .knapp {bredde: 12rem; }
Vi har sørget for at skriftstørrelsen og knappene vil reduseres når bredden på siden vår blir ned til 800 px. Så for å fullføre ting, vil vi også målrette høyden og sørge for at knappene våre beveger seg nedover siden når sidehøyden blir under 700 px.
@media (maks høyde: 700 px) {.knapp {øverst: 70%; }}
Vil du lagre sidene dine? Eksporter dem som PDF-filer og lagre dem i sikker skylagring.
Webdesign hendelse Generer London kommer tilbake 19. til 21. september 2018, og tilbyr en fullpakket oversikt over bransjeledende foredragsholdere, en hel dag med workshops og verdifulle nettverksmuligheter - ikke gå glipp av det. Få din Generate-billett nå.
Denne artikkelen ble opprinnelig publisert i nettmagasinet utgave 305. Abonner nå.
