Bygg en animert split-skjerm destinasjonsside

Din destinasjonsside er et viktig element i din Nettstedslayout . Det er den første reelle muligheten du må introdusere virksomheten din, eller produktet du selger, så designen er nøkkelen. Landingssider er designet med et enkelt fokusert mål kjent som et anrop til handling (CTA). Bruk av farger og bilder for å utfylle anropene til handling og Brukererfaring er en nødvendighet.

• Se arbeidskoden for denne opplæringen

I denne opplæringen går vi gjennom hvordan man bygger en engasjerende destinasjonsside for et fiktivt motemerke. Det vil være sentrert rundt en delt skjermdesign med store bilder og animerte overganger som skjer på svinger. Denne siden vil ha to klare tiltaksknapper, og vi bruker HTML, Sass for styling og et snev av vanilje javascript som bruker ES6-syntaksen (husk å sørge for at du Web Hosting. er egnet til nettstedets behov). For komplisert? Opprett et nettsted uten behov for kode, prøv en enkel Nettstedbygger .

01. Få satt opp

Hvis du bruker kodepen, må du kontrollere at CSS er satt til 'SCSS' i penninnstillingene. Du kan gjøre denne endringen ved å klikke på fanen Innstillinger, velg 'CSS' og endre CSS-preprocessoren til SCS i rullegardinalternativene.

Da kan vi begynne å legge til i HTML. Vi skal pakke inn en seksjon som heter 'Left' og en seksjon som heter 'Right' i en containerklasse, med begge seksjonene gitt en klasse 'skjerm'.

 & lt; div class = "container" & gt;
  & lt; seksjonsklasse = "skjerm venstre" & gt;
  & lt; / seksjon & gt;
  & lt; seksjonsklasse = "skjerm rett" & gt;
  & lt; / seksjon & gt;
& lt; / div & gt; 

02. Fullfør HTML

For å fullføre HTML, vil vi legge til i en tittel for hver seksjon ved hjelp av en H1. stikkord. Under som vi må legge til i en knapp, som ville koble til en annen side hvis dette var et ekteprosjekt. Vi vil gi dette en klasse av knapp å holde ting fint og enkelt.

 & lt; div class = "container" & gt;
   & lt; seksjonsklasse = "skjerm venstre" & gt;
    & lt; h1 & gt; mens mote & lt; / h1 & gt;
      & lt; knappen & gt;
       & lt; a href = "#" class = "knapp" & gt; lære mer & lt; / a & gt;
      & lt; / knappen & gt;
    & lt; / seksjon & gt;

    & lt; seksjonsklasse = "skjerm rett" & gt;
       & lt; h1 & gt; womens mote & lt; / h1 & gt;
        & lt; knappen & gt;
          & lt; a href = "#" class = "knapp" & gt; lære mer & lt; / a & gt;
        & lt; / knappen & gt;
     & lt; / seksjon & gt; 

03. Utforsk sassvariabler

Den eneste tingen vi alle elsker om Sass, er bruk av variabler. Selv om innfødte CSS-variabler får mer støtte, vil vi holde ting trygge ved å bruke Sass. Vi vil sette disse på toppen av vår .Scss , og du kan velge hvilke farger du vil ha, men bruker RGBA. Verdiene vil gi oss mer fleksibilitet.

 / ** Variabler ** /

$ container-bgcolor: # 444;
$ venstre-bgcolor: RGBA (136, 226, 247, 0,7);
$ Venstre-knapp-Hover: RGBA (94, 226, 247, 0,7);
$ høyre bgcolor: RGBA (227, 140, 219, 0,8);
$ Høyre-knapp-Hover: RGBA (255, 140, 219, 0,7);
$ svingebredde: 75%;
$ liten bredde: 25%;
$ animatespeed: 1000ms; 

04. Juster kroppsstyling

For det første vil vi fjerne all standard polstring og margin til kroppen og deretter sette skriftfamilien til å åpne sans. Dette vil bare påvirke knappen, så det spiller ingen rolle for mye hvilken skrifttype vi bruker. Da vil vi sette bredden og høyden til 100% Og sørg for at alt som overløper på 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 avdelingstitlene

Det er på tide å velge en Google-skrift for avsnittet titler - vi har valgt Playfair-skjerm. Deretter bruker du translatex. Vi kan sørge for at avsnittetitlene alltid er sentrert på X-aksen.

 h1 {
  FONT-STØRRELSE: 5REM;
  farge: #fff;
  posisjon: absolutt;
  Venstre: 50%;
  Topp: 20%;
  forvandle: translatex (-50%);
  Hvitplass: Nowrap;

  Font-Family: 'Playfair Display', Serif;
} 

06. Gjør CTAS skiller seg ut

Våre knapper vil fungere som våre samtaler til handling, så disse må være store, fet og plasseres der de er enkle å klikke. Begge knappene vil ha en hvit grense og en interessant overgangseffekt. Standardstilene for begge knappene vil være de samme, men vi vil endre fargene på svingeren.

 .button {
  Skjerm: blokk;
  posisjon: absolutt;
  Venstre: 50%;
  Topp: 50%;
  Høyde: 2.6rem;
  Padding-top: 1.2rem;
  Bredde: 15rem;
  Tekstjustering: Senter;
  farge: hvit;
  Border: 3px solid #fff;
  Border-Radius: 4px;
  font-vekt: 600;
  tekst-transform: store bokstaver;
  Tekst-dekorasjon: ingen;
  forvandle: translatex (-50%);
  Overgang: Alle .2s; 

Hovedknappene vil ha en fin enkel svinger effekt, og vi vil bruke Sass variablene vi angav for fargen, som vil være en lignende farge til bakgrunnen på siden.

 .screen.left. Kutton: Hover {
  bakgrunnsfarge: $ venstre-knapp-hover;
  Border-farge: $ venstre-knapp-hover;
}

.Screen.right. Kutton: Hover {
  bakgrunnsfarge: $ høyre-knapp-hover;
  Border-farge: $ høyre-knapp-hover; 

07. Sett beholderbakgrunnen og skjermene

Beholderklassen vil fungere som vår wrapper, og vi vil sette posisjonen til dette til slektning, bare fordi vi ønsker å plassere skjermene til absolutt posisjonering. Vi vil gi beholderen en standard bakgrunnsfarge, men selvfølgelig vil dette ikke bli sett fordi vi vil sette forskjellige farger til begge skjermbakgrunner.

 .Container {
  posisjon: relativ;
  Bredde: 100%;
  Høyde: 100%;
  Bakgrunn: $ container-bgcolor;
  
    .Screen {
      posisjon: absolutt;
      Bredde: 50%;
      Høyde: 100%;
      Overflow: Skjult;
    }
} 

08. Legg til bakgrunnsbilder

Både venstre og høyre seksjoner viser et bilde, og du kan finne Royalty-Free Stock-bilder 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 bilde hosting og deling service kalt imgbb som vi kan koble til i våre CSS.

 .screen.left {
  Venstre: 0;
  Bakgrunn: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Senter senter No-Repeat;
  Bakgrunnsstørrelse: Deksel;
  
    & amp;: før {
       posisjon: absolutt;
      innhold: "";
      Bredde: 100%;
      Høyde: 100%;
      Bakgrunn: $ venstre-bgcolor;
    }
} 

Høyre side av siden vil også vise 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.jpg') senter senter No-Repeat;
  Bakgrunnsstørrelse: Deksel;
  
   & amp;: før {
      posisjon: absolutt;
      innhold: "";
      Bredde: 100%;
      Høyde: 100%;
      Bakgrunn: $ høyre bgcolor;
    }
} 

09. Legg til overganger og svingereffekter

Animasjonshastigheten for vår svingereffekt på begge skjermene vil bli kontrollert av en overgang som holder verdien av vår variabel $ animatespeed. , som er 1000ms (ett sekund). Da skal vi avslutte med å gi animasjonen noen lettelse, noe som er en enkel 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 alt lett ut-ut;
} 

Det vi vil skje nå er at når du svinger over venstre skjerm, vil det bli en klasse lagt til den delen ved hjelp av JavaScript (som vi vil skrive i et senere trinn). Når denne klassen er lagt til, vil denne skjermen strekke seg til hva bredden på variabelen vi angav - som vil være 75%, og deretter vil høyre side bli satt til den mindre breddevariabelen (25%).

 .hover-venstre .lft {
  Bredde: $ Hover-bredde;
}

.Hva-venstre. rett {
  Bredde: $ liten bredde;
}
.hover-venstre .Right: før {
  Z-indeks: 2;
} 

Dette fungerer akkurat det samme som venstre side, hvor en ny klasse vil bli lagt til på musens svinger ved hjelp av JavaScript, og den høyre skjermen vil strekke seg ut i henhold til dette. Vi må også sørge for at Z-Index. er satt til 2. Så CTA-knappen blir mer fremtredende.

 .hover-høyre. Rett {
  Bredde: $ Hover-bredde;
}

.hen-høyre .left {
  Bredde: $ liten bredde;
}

Hevet-høyre .left: før {
  Z-indeks: 2;
} 

10. Flytt inn i JavaScript

Vi vil bruke et snev av vanilje JavaScript for å hjelpe oss med å legge til og fjerne CSS-klasser, og vi vil også bruke noen av de nye ES6-funksjonene. Det første vi trenger å gjøre er å erklære noen konstante variabler.

Fordi vi skal bruke dokument mer enn en gang, vil vi sette en konstant variabel kalt DOC. Og lagre dokumentet i det slik at vi kan holde ordet "dokument" fint og kort.

 const doc = dokument; 

Nå må vi sette tre flere konstanter som skal lagre .Ikke sant , .venstre og .container selektorer. Grunnen til at vi bruker konstanter er fordi vi vet at vi ikke vil endre verdien av disse, så det med en konstant er fornuftig. Med disse som er satt, kan vi gå videre og legge til noen musehendelser til dem.

 CONT RIGHT = DOC.QUYSECTOR (". Høyre");
const venstre = doc.queySector (". Venstre");
const container = doc.queySector (". container"); 

Bruker venstre Konstant variabel Vi erklærte i det siste trinnet, kan vi nå legge til en hendelse lytter til den. Denne hendelsen vil være Mouseenter Event, og i stedet for å bruke en tilbakeringingsfunksjon, bruker vi en annen ES6-funksjon som heter Arrow funksjoner '(() = & gt;) .

 // legger til en klasse til beholderelementet på svingeren
left.addeventlistener ("Mouseenter", () = & gt; {
  container.classlist.add ("svinger-venstre");
}); 

11. Legg til og fjern en klasse

I det siste trinnet la vår hendelseslytter en Mouseenter hendelse som retter seg mot hovedbeholderen og legger til en ny klasse kalt svinger-venstre til venstre delingselement. Med dette kalt lagt til, må vi nå fjerne det når vi svinger av det. Vi gjør dette ved å bruke mouseleave. hendelse og den .ta vekk() metode.

 // Fjerner klassen som ble lagt til på svinger
left.addeventlistener ("mouseleave", () = & gt; {
  container.classlist.Remove ("svinger-venstre");
}); 

Frem til nå har vi gjort alt på venstre skjerm. Nå vil vi avslutte JavaScript og legge til og fjerne klasser på de riktige delene. Igjen har vi brukt pilfunksjonen syntaks her for å holde alt så fint og ryddig ut.

 Right.AddeventListener ("Mouseenter", () = & gt; {
  container.classlist.add ("svinger-høyre");
});

RIGHT.ADDEVENTLISTENER ("MOUSELEAVE", () = & gt; {
  container.classlist.Remove ("Hover-høyre");
}); 

12. Gjør det lydhør

Ingen prosjekt - uansett hvor stor eller liten - bør unngå å bli gjort responsiv. Så i dette trinnet vil vi legge til noen medieforespørsler til våre CSS, og gjøre dette lille prosjektet som adaptiv til mobile enheter som best mulig. Det er verdt å sjekke ut original kodepen for å se hvordan dette fungerer.

 @media (maks bredde: 800px) {
  h1 {
    Font-størrelse: 2rem; }

  .button {
    Bredde: 12rem;
  } 

Vi har sørget for at når bredden på siden vår kommer ned til 800px, vil fonten og knappene redusere i størrelse. Så, for å fullføre ting av, vil vi også målrette høyden og sørge for at våre knapper beveger seg nedover siden når sidens høyde blir under 700px.

 @media (maks høyde: 700px) {
  .button {
    Topp: 70%;
}} 

Vil du lagre sidene dine? Eksporter dem som PDF og lagre dem i Secure skylagring .

Web Design Event. Generere London Returnerer 19-21 september 2018, og tilbyr en pakket tidsplan for bransjeledende høyttalere, en hel dag med workshops og verdifulle nettverksmuligheter - ikke gå glipp av det. Få din generere billett nå .

Denne artikkelen ble opprinnelig publisert i Net Magazine utgave 305. . Abonner nå .

Les mer:

• 5 Sensasjonelle nye nettsteder som skal inspireres av
• Opprett en animert 3D-tekst effekt
• 19 Great Parallax Scrolling nettsteder