Byg en animeret split-skærm landingsside

Din destinationsside er et afgørende element i din Website Layout. . Det er den første rigtige mulighed, du skal introducere din virksomhed, eller det produkt du sælger, så dets design er nøglen. Landingssider er designet med et enkelt fokuseret mål kendt som et opkald til handling (CTA). Brugen af ​​farver og billeder til at supplere opkald til handling og brugererfaring er et must.

• Se arbejdskoderne for denne vejledning

I denne vejledning går vi igennem, hvordan vi opbygger en engagerende destinationsside for et fiktivt modemærke. Det vil blive centreret omkring et splitskærm design med store billeder og animerede overgange, der sker på svingning. Denne side har to klare opkald til handlingsknapper, og vi vil bruge HTML, Sass. Til styling og et strejf af vanille javascript, der bruger ES6-syntaksen (Husk at sikre din Web Hosting. er velegnet til dine hjemmeside behov). For kompleks? Opret en hjemmeside uden behov for kode, prøv en simpel Website Builder. .

01. Få opsætning

Hvis du bruger CODEPEN, skal du sørge for, at CSS er indstillet til 'SCSS' i penindstillingerne. Du kan gøre denne ændring ved at klikke på fanen Indstillinger, vælge 'CSS' og ændre CSS Preprocessor til SCSS i rullemenuen.

Så kan vi begynde at tilføje i vores HTML. Vi skal pakke et afsnit kaldet 'Venstre' og et afsnit kaldet 'Højre' i en containerklasse, med begge sektioner givet en klasse af 'skærm'.

 & lt; div class = "beholder" & gt;
  & lt; sektion klasse = "skærm venstre" & gt;
  & lt; / sektion & gt;
  & lt; sektion klasse = "skærm højre" & gt;
  & lt; / sektion & gt;
& lt; / div & gt; 

02. Afslut HTML

For at færdiggøre vores HTML vil vi tilføje i en titel for hvert afsnit ved hjælp af en H1. tag. Under at vi skal tilføje i en knap, som ville linke til en anden side, hvis dette var et virkeligt verdensprojekt. Vi vil give dette en klasse af knap at holde tingene hyggelige og enkle.

 & lt; div class = "beholder" & gt;
   & lt; sektion klasse = "skærm venstre" & gt;
    & lt; H1 & GT; Herre Mode & LT; / H1 & GT;
      & lt; knap & gt;
       & lt; en href = "#" class = "-knap" & gt; Lær mere & lt; / a & gt;
      & lt; / knap & gt;
    & lt; / sektion & gt;

    & lt; sektion klasse = "skærm højre" & gt;
       & lt; h1 & gt; kvinders mode & lt; / h1 & gt;
        & lt; knap & gt;
          & lt; en href = "#" class = "-knap" & gt; Lær mere & lt; / a & gt;
        & lt; / knap & gt;
     & lt; / sektion & gt; 

03. Udforsk SASS Variabler

Den eneste ting, vi alle elsker om SASS, er brugen af ​​variabler. Selvom indfødte CSS-variabler får mere support, vil vi holde tingene sikre ved at bruge SASS. Vi vil sætte disse på toppen af ​​vores .css. , og du kan vælge de farver, du vil have, men bruger rgba. Værdier vil give os mere fleksibilitet.

 / ** Variabler ** /

$ Container-BGColor: # 444;
$ venstre-BGColor: RGBA (136, 226, 247, 0,7);
$ venstre-knap-sving: rgba (94, 226, 247, 0,7);
$ højre-BGColor: RGBA (227, 140, 219, 0,8);
$ højre-knap-sving: RGBA (255, 140, 219, 0,7);
$ Hover-bredde: 75%;
$ Lillebredde: 25%;
$ animatespeed: 1000ms; 

04. Juster kroppen styling

For det første vil vi rydde alle standard polstring og margin til kroppen og derefter sætte fontfamilien til at åbne sans. Dette påvirker kun knappen, så det betyder ikke noget for meget, hvilken skrifttype vi bruger. Så vil vi sætte bredden og højden til 100% Og sørg for, at alt, som overløb på X-aksen bliver skjult.

 HTML, krop {
  Padding: 0;
  Margin: 0;
  Font-familie: 'Åben sans', Sans-Serif;
  Bredde: 100%;
  Højde: 100%;
  Overflow-x: skjult;
} 

05. Stil sektionens titler

Det er på tide at vælge en Google-skrifttype til sektionens titler - vi har valgt Playfair-skærm. Derefter bruger TranslateX. Vi kan sørge for, at sektionstitlerne altid er centreret på X-aksen.

 H1 {
  Font-størrelse: 5rem;
  Farve: #fff;
  position: absolut;
  Venstre: 50%;
  Top: 20%;
  Transform: TranslateX (-50%);
  White-Space: Nowrap;

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

06. Gør CTA'erne skiller sig ud

Vores knapper vil fungere som vores opkald til handling, så disse skal være store, fed og placeret, hvor de er nemme at klikke. Begge knapper vil have en hvid kant og en interessant overgangseffekt. Standard stilarter til begge knapper vil være de samme, men vi vil ændre deres farver på sving.

. Button {
  Display: Blok;
  position: absolut;
  Venstre: 50%;
  Top: 50%;
  Højde: 2.6rem;
  Padding-Top: 1.2rem;
  Bredde: 15Rem;
  Tekst-Align: Center;
  Farve: Hvid;
  Border: 3px fast #fff;
  Border-radius: 4px;
  skrifttype-vægt: 600;
  Tekst-transformation: store bogstaver;
  Tekst-dekoration: Ingen;
  Transform: TranslateX (-50%);
  Overgang: Alle .2S; 

Hovedknapperne vil have en god simpel svingeffekt, og vi vil bruge SASS-variablerne vi specificeret for farven, som vil være en lignende farve til baggrunden på siden.

 .Screen.left. Button: Hover {
  baggrundsfarve: $ venstre-knap-sving;
  Border-Farve: $ Venstre-knap-svæver;
}

.Screen.right. Button: Hover {
  Baggrundsfarve: $ højre-knap-sving;
  Border-Farve: $ Højre-knap-Hover; 

07. Sæt beholderens baggrund og skærme

Beholderklassen vil fungere som vores sideindpakning, og vi vil sætte placeringen af ​​dette til relativ, simpelthen fordi vi ønsker at placere skærme til absolut positionering. Vi vil give containeren en standard baggrundsfarve, men det vil selvfølgelig ikke ses, fordi vi vil sætte forskellige farver til begge skærmbilleder.

 .Container {
  position: relativ;
  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 sektioner viser et billede, og du kan finde royalty-free stock-billeder fra websteder som f.eks Unsplash. Vi Pixabay. eller Pexels. (som jeg har brugt i denne vejledning). For at gøre tingene nemmere, har jeg brugt en gratis billedhosting og deling af service 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.jpg') Center Center no-Repeat;
  Baggrundsstørrelse: Dæk;
  
    & amp;: før {
       position: absolut;
      indhold: "";
      Bredde: 100%;
      Højde: 100%;
      Baggrund: $ Venstre-BGColor;
    }
} 

Den højre side af siden viser også et baggrundsbillede ved hjælp af IMGBB, og vi vil indstille baggrundsfarven til pink. Igen sætter vi baggrundsstørrelsen til dække over . Dette vil give os mulighed for at dække hele det holdede 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.jpg') Center Center no-Repeat;
  Baggrundsstørrelse: Dæk;
  
   & amp;: før {
      position: absolut;
      indhold: "";
      Bredde: 100%;
      Højde: 100%;
      Baggrund: $ højre-BGColor;
    }
} 

09. Tilføj overgange og svæveffekter

Animationshastigheden for vores svæveffekt på begge skærme vil blive styret af en overgang, der indeholder værdien af ​​vores variabel $ animatespeed , som er 1000ms (et sekund). Så afsluttes vi ved at give animationen nogle lempelser, hvilket er en lethed ind og ud, der vil hjælpe med at give os en glattere animation.

 .Screen.left, .screen.right, .screen.right: før, .screen.left: før {
  Overgang: $ animatesspeed alle lette-in-out;
} 

Det, vi vil ske nu, er, at når du svæver over venstre skærm, vil der være en klasse tilføjet til det afsnit ved hjælp af JavaScript (som vi vil skrive i et senere trin). Når denne klasse tilføjes, vil skærmen strække sig til uanset bredden af ​​den variable, vi specificerede - som vil være 75%, og derefter vil højre side blive indstillet til den mindre bredde variabel (25%).

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

.hover-venstre .right {
  Bredde: $ Lillebredde;
}
.hover-venstre .right: før {
  Z-indeks: 2;
} 

Dette virker nøjagtigt det samme som venstre side, hvor en ny klasse vil blive tilføjet på mushover ved hjælp af JavaScript, og den rigtige skærm vil strække sig ud i overensstemmelse hermed. Vi skal også sørge for z-index. er indstillet til 2. Så CTA-knappen bliver mere fremtrædende.

 .hover-højre .right {
  Bredde: $ Hover-bredde;
}

.hover-højre .left {
  Bredde: $ Lillebredde;
}

.hover-højre .left: før {
  Z-indeks: 2;
} 

10. Flyt ind i JavaScript

Vi vil bruge et strejf af vanille JavaScript for at hjælpe os med at tilføje og fjerne CSS klasser, og vi vil også bruge nogle af de nye ES6-funktioner. Det første, vi skal gøre, er at erklære nogle konstante variabler.

Fordi vi vil bruge dokument Mere end en gang vil vi sætte en konstant variabel kaldet DOC. og gem dokumentet inden for det, så vi kan holde ordet 'dokument' nice og kort.

 CONST DOC = DOCUMENT; 

Nu skal vi sætte tre flere konstanter, der vil gemme .ret Vi .venstre og .beholder selektorer. Grunden til, at vi bruger konstanter, er, fordi vi ved, at vi ikke ønsker at ændre værdien af ​​disse, så det giver en konstant mening. Med disse nu sæt, kan vi gå videre og tilføje nogle mushændelser til dem.

 Consth 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, vi kan nu tilføje en begivenhedslytter til den. Denne begivenhed vil være den mouseenter. Begivenhed og i stedet for at bruge en tilbagekaldsfunktion, vil vi bruge en anden ES6-funktion, der hedder Arrow funktioner '(() = & gt;) .

 // tilføjer en klasse til beholderelementet på svæve
Left.AddeventListener ("Mouseenter", () = & gt; {
  container.classlist.Add ("Hover-Left");
}); 

11. Tilføj og fjern en klasse

I det sidste trin tilføjede vores begivenhedslytter en mouseenter. begivenhed, der målretter hovedbeholderklassen og tilføjer en ny klasse kaldet Hover-Left. til venstre sektionselement. Med dette kaldet tilføjet, skal vi nu fjerne det, når vi hover det. Vi gør det ved at bruge mouseleave. begivenhed og .fjerne() metode.

 // fjerner den klasse, der blev tilføjet på svingning
Left.AddeventListener ("mouseleave", () = & gt; {
  container.classlist.remove ("Hover-Left");
}); 

Indtil nu har vi gjort alt på venstre skærm. Nu vil vi afslutte JavaScript og tilføje og fjerne klasser på de rigtige sektionselementer. Igen har vi brugt pilens funktion syntaks her for at holde alt ser godt og ryddeligt ud.

 Right.AddeventListener ("Mouseenter", () = & gt; {
  container.classlist.add ("Hover-right");
});

Right.AddeventListener ("Mousleave", () = & gt; {
  container.classlist.remove ("Hover-right");
}); 

12. Gør det lydhør

Intet projekt - uanset hvor stor eller lille - bør undgå at blive gjort lydhør. Så i dette skridt vil vi tilføje nogle medieforespørgsler til vores CSS, og gøre dette lille projekt som adaptive til mobile enheder så godt vi kan. Det er værd at tjekke ud Original CodePen. for at se, hvordan dette virker.

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

  . Button {
    Bredde: 12rem;
  } 

Vi har sørget for, at når bredden af ​​vores side kommer ned til 800px, vil skrifttypen og knapperne reducere i størrelse. Så for at afslutte tingene vil vi også målrette højden, og sørg for, at vores knapper bevæger sig ned på siden, når sidens højde kommer under 700px.

 @media (max-højde: 700px) {
  . Button {
    Top: 70%;
}} 

Vil du gemme dine sider? Eksporter dem som PDF-filer og gem dem i sikker Sky lagring .

Web Design Event. Generere London. Returnerer den 19.-29. September 2018, der tilbyder en pakket plan for industriel førende højttalere, en hel dag med workshops og værdifulde netværksmuligheder - Gå ikke glip af det. Få din generere billet nu .

Denne artikel blev oprindeligt offentliggjort i Net Magazine Udgave 305. . Tilmeld nu .

Læs mere:

• 5 sensationelle nye websteder, der skal inspireres af
• Opret en animeret 3D tekst effekt
• 19 Great Parallax Scrolling Websites