Bygg en animerad split-screen landningssida

Din målsida är ett viktigt element i din Webbplatslayout . Det är den första verkliga möjligheten du måste presentera ditt företag, eller den produkt du säljer, så dess design är nyckeln. Landningssidor är utformade med ett enda fokuserat mål som kallas ett samtal till handling (CTA). Användningen av färger och bilder för att komplettera samtalen till handling och användarupplevelse är ett måste.

• Se arbetskodpen för den här handledningen

I den här handledningen går vi igenom hur man bygger en engagerande landningssida för ett fiktivt modemärke. Det kommer att centreras runt en split-screen design med stora bilder och animerade övergångar som händer på sväska. Den här sidan har två tydliga samtal till åtgärdsknappar och vi använder HTML, Sass för styling och en touch av vanilj Javascript som använder ES6-syntaxen (kom ihåg att du är webbhotell är anpassad till dina webbplatsens behov). För komplexa? Skapa en webbplats utan att behöva kod, prova en enkel Website Builder .

01. Få satt upp

Om du använder CodePen, se till att CSS är inställd på "SCSS" i penninställningarna. Du kan göra den här ändringen genom att klicka på fliken Inställningar, välj "CSS" och ändra CSS-preprocessorn till SCS i rullgardinsmenyn.

Då kan vi börja lägga till i vår HTML. Vi kommer att sätta ihop en sektion som heter "vänster" och en sektion som heter "höger" i en containerklass, med båda sektioner som ges en klass av "skärm".

 & lt; div class = "container" & gt;
  & lt; avsnitt klass = "Skärm vänster" & GT;
  & lt; / sektion och gt;
  & lt; avsnitt klass = "skärm höger" & gt;
  & lt; / sektion och gt;
& lt; / div & gt; 

02. Avsluta HTML

För att slutföra vår HTML, lägger vi till i en titel för varje avsnitt med hjälp av en h1 märka. Under det måste vi lägga till i en knapp, som skulle länka till en annan sida om det var ett verkligt projekt. Vi kommer att ge detta en klass av knapp För att hålla saker trevliga och enkla.

 & lt; div class = "container" & gt;
   & lt; avsnitt klass = "Skärm vänster" & GT;
    & lt; H1 & GT; MENS FASHION & LT; / H1 & GT;
      & lt; knapp & gt;
       & lt; en href = "#" klass = "knapp" & gt; lära sig mer & lt; / a & gt;
      & lt; / knapp & gt;
    & lt; / sektion och gt;

    & lt; avsnitt klass = "skärm höger" & gt;
       & lt; H1 & GT; Womens Fashion & LT; / H1 & GT;
        & lt; knapp & gt;
          & lt; en href = "#" klass = "knapp" & gt; lära sig mer & lt; / a & gt;
        & lt; / knapp & gt;
     & lt; / sektion och gt; 

03. Utforska Sass Variables

Den enda vi alla älskar om sass är användningen av variabler. Även om inhemska CSS-variabler får mer stöd, kommer vi att hålla saker säkra genom att använda SASS. Vi kommer att lägga dessa på toppen av vårt .scss , och du kan välja vilka färger du vill ha, men med hjälp av rgba Värden ger oss mer flexibilitet.

 / ** variabler ** /

$ container-bgcolor: # 444;
$ vänster-bgcolor: RGBA (136, 226, 247, 0,7);
$ Vänster-Button-Hover: RGBA (94, 226, 247, 0,7);
$ RIGHT-BGCOLOR: RGBA (227, 140, 219, 0,8);
$ höger-knapp-svävar: RGBA (255, 140, 219, 0,7);
$ Hover-Bredd: 75%;
$ liten bredd: 25%;
$ animateSpeed: 1000ms; 

04. Justera kroppsstyling

För det första kommer vi att rensa all standardpoltering och marginal till kroppen och sedan ställa in fontfamiljen för att öppna sans. Detta kommer bara att påverka knappen, så det spelar ingen roll för mycket vilken typsnitt vi använder. Då kommer vi att ställa bredden och höjden till 100% Och se till att allt som överflödar på X-axeln blir dolt.

 HTML, BODY {
  Padding: 0;
  Marginal: 0;
  Font-familj: "Öppna sans", sans-serif;
  Bredd: 100%;
  Höjd: 100%;
  överflöde-x: dold;
} 

05. Stil avsnittet titlar

Det är dags att välja ett Google-teckensnitt för avsnittet Titlar - vi har valt PlayFair-skärmen. Sedan använda Translatex Vi kan se till att sektionstitlarna alltid är centrerade på X-axeln.

 H1 {
  FONT-STORLEK: 5REM;
  Färg: #fff;
  position: absolut;
  Vänster: 50%;
  Topp: 20%;
  Transform: Translatex (-50%);
  Vitrummet: Nowrap;

  Font-familj: "PlayFair Display", Serif;
} 

06. Gör CTAs ut

Våra knappar kommer att fungera som våra samtal till handling, så det måste vara stora, djärva och placerade där de är lätta att klicka. Båda knapparna kommer att ha en vit kant och en intressant övergångseffekt. Standardformat för båda knapparna kommer att vara densamma, men vi kommer att ändra sina färger på sväska.

. Button {
  Visa: Block;
  position: absolut;
  Vänster: 50%;
  Topp: 50%;
  Höjd: 2.6rem;
  Padding-top: 1.2rem;
  Bredd: 15rem;
  Text-Justera: Center;
  färg vit;
  Border: 3px Solid #fff;
  Border-Radius: 4px;
  FONT-VIKT: 600;
  Text-transform: versaler;
  Textdekoration: Ingen;
  Transform: Translatex (-50%);
  Övergång: Alla .2s; 

Huvudknapparna kommer att ha en trevlig enkel svängningseffekt och vi kommer att använda sassvariablerna som vi specificerade för färgen, som kommer att bli en liknande färg på bakgrunden på sidan.

 .Screen.left. Button: Hover {
  Bakgrundsfärg: $ Vänster-Button-Hover;
  Gränsfärg: $ Vänster-Button-Hover;
}

.Screen.Right. Button: Hover {
  Bakgrundsfärg: $ höger-knapp-svävar;
  Gränsfärg: $ höger-knapp-svävar; 

07. Ställ in behållarens bakgrund och skärmar

Containerklassen kommer att fungera som vår sida wrapper och vi kommer att ställa in positionen för detta till släkting, helt enkelt för att vi vill placera skärmarna till absolut positionering. Vi kommer att ge behållaren en standard bakgrundsfärg, men det kommer naturligtvis inte att ses eftersom vi kommer att ställa in olika färger till båda skärmbakgrunderna.

 .Container {
  position: släkting;
  Bredd: 100%;
  Höjd: 100%;
  Bakgrund: $ container-bgcolor;
  
    .Screen {
      position: absolut;
      Bredd: 50%;
      Höjd: 100%;
      Överflöde: Dold;
    }
} 

08. Lägg till bakgrundsbilder

Både vänster och höger sektioner visar en bild, och du kan hitta royalty-fria bilder från webbplatser som Frossa , Pixabay eller Peklar (som jag har använt i den här handledningen). För att göra det enklare har jag använt en gratis bildhosting och delningstjänst som heter IMGBB som vi kan länka till i vår CSS.

 .Screen.left {
  Vänster: 0;
  Bakgrund: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Center Center No-Repeat;
  Bakgrundsstorlek: Skydd;
  
    & amp;: före {
       position: absolut;
      innehåll: "";
      Bredd: 100%;
      Höjd: 100%;
      Bakgrund: $ vänster-bgcolor;
    }
} 

Den högra sidan av sidan kommer också att visa en bakgrundsbild med IMGBB, och vi kommer att ställa in bakgrundsfärgen till rosa. Igen, vi sätter bakgrundsstorleken till omslag . Detta gör det möjligt för oss att täcka hela innehållet, vilket i vårt fall är .skärm klass.

 .Screen.right {
  rätt: 0;
  Bakgrund: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Center Center No-Repeat;
  Bakgrundsstorlek: Skydd;
  
   & amp;: före {
      position: absolut;
      innehåll: "";
      Bredd: 100%;
      Höjd: 100%;
      Bakgrund: $ Right-BgColor;
    }
} 

09. Lägg till övergångar och svävareffekter

Animationshastigheten för vår svängningseffekt på båda skärmarna styrs av en övergång som innehar värdet på vår variabel $ animeatspeed , som är 1000ms (en sekund). Då slutar vi genom att ge animationen lite lättnad, vilket är lätt in och ut som hjälper till att ge oss en mjukare animering.

 .Screen.left, .screen.Right, screen.right: före, .screen.left: före {
  Övergång: $ animeSpeed ​​alla lätta in-out;
} 

Det vi vill hända nu är att när du svänger över den vänstra skärmen kommer det att finnas en klass som läggs till i den delen med JavaScript (som vi ska skriva i ett senare steg). När den här klassen läggs till, kommer den skärmen att sträcka sig till vad som helst bredden av variabeln vi specificerade - vilket kommer att vara 75%, och sedan kommer den högra sidan att ställas in på den mindre breddenvariabeln (25%).

 .hover-vänster .left {
  Bredd: $ Hover-bredd;
}

.hover-left .right {
  Bredd: $ liten bredd;
}
.hover-left .right: före {
  Z-Index: 2;
} 

Detta fungerar exakt samma som vänster sida, där en ny klass kommer att läggas till i musen svävar med javascript, och den högra skärmen kommer att sträcka sig i enlighet med detta. Vi måste också se till att z-index är satt till 2 Så blir CTA-knappen mer framträdande.

 .Hover-höger .Right {
  Bredd: $ Hover-bredd;
}

.hover-höger .left {
  Bredd: $ liten bredd;
}

.hover-höger .left: före {
  Z-Index: 2;
} 

10. Flytta till JavaScript

Vi kommer att använda en touch av Vanilla Javascript för att hjälpa oss att lägga till och ta bort CSS-klasser och vi kommer också att använda några av de nya ES6-funktionerna. Det första vi behöver göra är att förklara några konstanta variabler.

Eftersom vi kommer att använda dokumentera Mer än en gång kommer vi att ställa in en konstant variabel som heter doc Och lagra dokumentet inom det så att vi kan hålla ordet "dokument" trevligt och kort.

 CONST DOC = DOKUMENT; 

Nu måste vi ställa in tre konstanter som lagrar .rätt , .vänster och .behållare selectors. Anledningen till att vi använder konstanter är att vi vet att vi inte vill ändra värdet av dessa, så att använda en konstanter är meningsfullt. Med dessa nu kan vi fortsätta och lägga till några mushändelser till dem.

 const höger = doc.queryselector (". Höger");
const left = doc.queryselector (". vänster");
const container = doc.queryselector (". behållare"); 

Använda vänster Konstant variabel Vi förklarade i det sista steget, vi kan nu lägga till en händelse lyssnare till den. Denna händelse kommer att vara museenter Händelse och istället för att använda en återuppringningsfunktion, använder vi en annan ES6-funktion som heter Pilfunktioner "(() = & gt;) .

 // lägger till en klass till behållarelementet på sväska
left.addeventlistener ("mouseeenter", () = & gt; {
  container.classlist.add ("Hover-left");
}); 

11. Lägg till och ta bort en klass

I det sista steget lade vår händelse lyssnare till en museenter händelse som riktar sig mot huvudbehållarklassen och lägger till en ny klass som heter sväng vänster till det vänstra avsnittet. Med detta som uppmanas, behöver vi nu ta bort det när vi svävar av det. Vi gör det med hjälp av mouseleave händelse och .ta bort() metod.

 // Avlägsnar den klass som lagts till på sväska
left.addeventlistener ("mouseleave", () = & gt; {
  container.classlist.Remove ("Hover-left");
}); 

Fram till nu har vi gjort allt på vänster skärm. Nu slutar vi av JavaScript och lägga till och ta bort klasser på rätt avsnitt. Återigen har vi använt pilfunktionen syntaxen här för att hålla allt som ser snyggt och snyggt ut.

 Right.AddeventListener ("MouseEnter", () = & GT;
  container.classlist.add ("Hover-höger");
});

höger.Addeventlistener ("mouseleave", () = & gt; {
  container.classlist.Remove ("Hover-Right");
}); 

12. Gör det responsivt

Inget projekt - oavsett hur stor eller liten - bör undvika att bli mottaglig. Så, i det här steget lägger vi till några medifrågor till vår CSS, och gör det här lilla projektet som adaptivt till mobila enheter som bäst kan vi. Det är värt att kolla in originalkodpen För att se hur det fungerar.

 @Media (MAX-Bredd: 800px) {
  h1 {
    FONT-STORLEK: 2REM; }

  .knapp {
    Bredd: 12rem;
  } 

Vi har försäkrat att när bredden på vår sida kommer ner till 800px, kommer teckensnittet och knapparna att minska i storlek. Så, för att avsluta saker som vi vill rikta upp höjden och se till att våra knappar flyttar ner sidan när sidhöjden blir under 700px.

 @Media (maxhöjd: 700px) {
  .knapp {
    Topp: 70%;
}} 

Vill du spara dina sidor? Exportera dem som pdfs och spara dem i säkra molnlagring .

Webbdesign händelse Generera london Returnerar den 19-21 september 2018 och erbjuder ett packat schema för branschledande högtalare, en hel dag med verkstäder och värdefulla nätverksmöjligheter - missa inte det. Få din generera biljett nu .

Den här artikeln publicerades ursprungligen i Net Magazine Utgåva 305 . Prenumerera nu .

Läs mer:

• 5 sensationella nya webbplatser som ska inspireras av
• Skapa en animerad 3D-texteffekt
• 19 Great Parallax Scrolling webbplatser