Bouw een geanimeerde split-screen-bestemmingspagina

Uw bestemmingspagina is een cruciaal element in uw Website-indeling ​Het is de eerste echte kans die u uw bedrijf moet introduceren, of het product dat u verkoopt, dus het ontwerp is de sleutelwoorden. Landingspagina's zijn ontworpen met een enkele gerichte doelstelling die bekend staat als een oproep tot actie (CTA). Het gebruik van kleuren en afbeeldingen om de oproepen naar actie en de gebruikerservaring is nodig.

• Zie de werkcodepen voor deze tutorial

In deze tutorial lopen we over hoe we een boeiende bestemmingspagina kunnen bouwen voor een fictief modemerk. Het wordt gecentreerd rond een split-screen-ontwerp met grote afbeeldingen en geanimeerde overgangen die op hover gebeuren. Deze pagina heeft twee duidelijke oproep aan actieknoppen en we zullen HTML gebruiken, Sassass Voor styling en een aanraking van vanille javascript die de ESS6-syntaxis gebruikt (vergeet niet om ervoor te zorgen dat u web hosting is geschikt voor uw website nodig). Te ingewikkeld? Maak een website zonder de behoefte aan code, probeer een eenvoudige website bouwer ​

01. Krijg op te zetten

Als u COCEIPEN gebruikt, moet u ervoor zorgen dat de CSS is ingesteld op 'SCSS' in de peninstellingen. U kunt deze wijziging aanbrengen door op het tabblad Instellingen te klikken, 'CSS' te kiezen en de CSS-preprocessor te wijzigen op SCSS in de vervolgopties.

Dan kunnen we beginnen met het toevoegen in onze HTML. We gaan een sectie inpakken dat 'Links' wordt genoemd en een sectie genaamd 'Rechts' in een containerclass, met beide secties gezien een klasse van 'scherm'.

 & lt; div class = "container" & GT;
  & lt; sectie class = "scherm links" & GT;
  & lt; / sectie & gt;
  & LT; Sectie Klasse = "Scherm rechts" & GT;
  & lt; / sectie & gt;
& LT; / DIV & GT; 

02. Maak de HTML af

Om onze HTML af te ronden, zullen we een titel voor elke sectie toevoegen met behulp van een H1 label. Daaronder zullen we moeten toevoegen aan een knop, wat zou linken naar een andere pagina als dit een echt-wereldproject was. We zullen dit een klasse geven knop om dingen leuk en eenvoudig te houden.

 & lt; div class = "container" & GT;
   & lt; sectie class = "scherm links" & GT;
    & LT; H1 & GT; MENSMASSIE & LT; / H1 & GT;
      & lt; knop & gt;
       & lt; een href = "#" class = "knop" & gt; leer meer & lt; / a & gt;
      & lt; / knop & GT;
    & lt; / sectie & gt;

    & LT; Sectie Klasse = "Scherm rechts" & GT;
       & LT; H1 & GT; Womens Fashion & LT; / H1 & GT;
        & lt; knop & gt;
          & lt; een href = "#" class = "knop" & gt; leer meer & lt; / a & gt;
        & lt; / knop & GT;
     & lt; / sectie & gt; 

03. Ontdek SASS-variabelen

Het enige dat we allemaal van Sass houden is het gebruik van variabelen. Hoewel inheemse CSS-variabelen meer steun krijgen, zullen we de dingen veilig houden door SASS te gebruiken. We zullen deze bovenaan onze .scsss , en je kunt kiezen welke kleuren die je wilt, maar gebruiken rgba Waarden zullen ons meer flexibiliteit geven.

 / ** variabelen ** /

$ container-bgkleur: # 444;
$ Left-BGCOLOR: RGBA (136, 226, 247, 0.7);
$ linksbuttingshoven: RGBA (94, 226, 247, 0.7);
$ Right-Bgolor: RGBA (227, 140, 219, 0.8);
$ JUISTE KNOVER: RGBA (255, 140, 219, 0.7);
$ zwevende breedte: 75%;
$ kleine breedte: 25%;
$ ANIMATESSPEED: 1000MS; 

04. Pas de body-styling aan

Ten eerste zullen we alle standaardvulling en marge op het lichaam wissen en vervolgens de Font-familie instellen om SANS te openen. Dit heeft alleen invloed op de knop, dus het maakt niet zoveel uit wat we gebruiken. Dan zullen we de breedte en hoogte instellen op 100% en zorg ervoor dat alles wat overloopt op de x-as verborgen wordt.

 HTML, lichaam {
  Vulling: 0;
  marge: 0;
  Font-familie: 'Open SANS', SANS-SERIF;
  Breedte: 100%;
  Hoogte: 100%;
  Overflow-X: verborgen;
} 

05. Stijl de sectietitels

Het is tijd om een ​​Google-lettertype te kiezen voor de sectietitels - we hebben Playfair-display gekozen. Dan gebruiken vertalen We kunnen ervoor zorgen dat de sectietitels altijd gecentreerd zijn op de x-as.

 H1 {
  FONT-SIZE: 5REM;
  Kleur: #fff;
  Positie: absoluut;
  Links: 50%;
  Top: 20%;
  Transformeren: Translatex (-50%);
  White-Space: Nowrap;

  Font-familie: 'PlayFair Display', Serif;
} 

06. Maak de CTA's opvallend

Onze knoppen zullen fungeren als onze oproepen tot actie, dus deze moeten groot, vet en gepositioneerd zijn waar ze eenvoudig te klikken zijn. Beide knoppen hebben een witte rand en een interessant overgangseffect. De standaardstijlen voor beide knoppen zullen hetzelfde zijn, maar we zullen hun kleuren veranderen op zweven.

. Button {
  Weergave: blok;
  Positie: absoluut;
  Links: 50%;
  Top: 50%;
  Hoogte: 2.6rem;
  PADING-TOP: 1.2REM;
  Breedte: 15rem;
  Tekst-Uitlijnen: Centrum;
  kleur wit;
  Grens: 3px solide #fff;
  Border-Radius: 4px;
  Font-gewicht: 600;
  Tekst-transformatie: hoofdletters;
  tekst-decoratie: geen;
  Transformeren: Translatex (-50%);
  Transitie: alle .2s; 

De hoofdknoppen hebben een mooi eenvoudige hover-effect en we zullen de SASS-variabelen gebruiken die we voor de kleur hebben opgegeven, die een vergelijkbare kleur op de achtergrond van de pagina is.

 .Screen.lft. Button: Hover {
  Achtergrondkleur: $ linksbuttingshoven;
  Border-Color: $ Left-Button-hover;
​

.screen.Right. Button: Hover {
  Achtergrondkleur: $ JUISTE KNOVER-HOVER;
  Border-Color: $ Right-Button-Hover; 

07. Zet de achtergrond en schermen van de container en schermen

De containerclass fungeert als onze pagina wrapper en we zullen de positie hiervan instellen op familielid, gewoon omdat we de schermen naar absolute positionering willen positioneren. We geven de container een standaard achtergrondkleur, maar dit zal natuurlijk niet worden gezien omdat we verschillende kleuren zullen instellen op beide schermachtergronden.

 .Container {
  Positie: familielid;
  Breedte: 100%;
  Hoogte: 100%;
  Achtergrond: $ container-bgolor;
  
    .screen {
      Positie: absoluut;
      Breedte: 50%;
      Hoogte: 100%;
      overloop verborgen;
    ​
} 

08. Achtergrondafbeeldingen toevoegen

Zowel, links- en rechtssecties zullen een beeld, en je kunt vinden Royalty-vrije Stock Afbeeldingen van websites zoals Plassen ​ Pixabay of Pexels (die ik heb gebruikt in deze tutorial). Om dingen gemakkelijker te maken, heb ik een gratis beeld hosting- en sharing-service gebruikt, IMGBB genaamd waar we naar kunnen linken in onze CSS.

 .screen.leuft {
  Links: 0;
  Achtergrond: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Center Center No-Repeat;
  Achtergrondformaat: dekking;
  
    & Amp;: vóór {
       Positie: absoluut;
      inhoud: "";
      Breedte: 100%;
      Hoogte: 100%;
      Achtergrond: $ Left-BGCOLOR;
    ​
} 

De rechterkant van de pagina geeft ook een achtergrondafbeelding met behulp van IMGBB, en we zullen de achtergrondkleur op roze instellen. Nogmaals, we zetten de achtergrondgrootte in Hoes ​Hierdoor kunnen we het volledige bevattende element dekken, dat in ons geval de .scherm klasse.

 .Screen.Recht {
  RECHTS: 0;
  Achtergrond: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Center Center No-Repeat;
  Achtergrondformaat: dekking;
  
   & Amp;: vóór {
      Positie: absoluut;
      inhoud: "";
      Breedte: 100%;
      Hoogte: 100%;
      Achtergrond: $ goed-bgkleur;
    ​
} 

09. Voeg overgangen toe en zwevende effecten

De animatiesnelheid voor ons zweefeffect op beide schermen wordt bestuurd door een overgang die de waarde van onze variabele heeft $ animatespeed , dat is 1000ms (één seconde). Dan eindigen we af door de animatie wat versoepeling te geven, wat een gemak is in en uit dat zal helpen om ons een soepelere animatie te geven.

 .screen.leuft, .screen.right, .screen.Right: vóór, .screen.leuft: vóór {
  Transitie: $ animatespeed alle gemak-in-out;
} 

Wat we nu willen gebeuren, is dat wanneer je over het linker scherm zweeft, er een klasse is toegevoegd aan die sectie met JavaScript (die we in een latere stap zullen schrijven). Wanneer deze klasse wordt toegevoegd, zal dat scherm zich uitstrekken naar ongeacht de breedte van de variabele die we hebben gespecificeerd - die 75% bedragen, en dan wordt de rechterkant ingesteld op de kleinere breedte-variabele (25%).

 .Hover-Left .left {
  Breedte: $ zwevende breedte;
​

.Hover-linker. Rechte {
  Breedte: $ kleinbreedte;
​
.Hover-links. Rechts: vóór {
  Z-index: 2;
} 

Dit werkt precies hetzelfde als de linkerkant, waar een nieuwe klasse wordt toegevoegd aan muiswerven met JavaScript, en het rechterscherm zal dienovereenkomstig uitstrekken. We moeten er ook voor zorgen dat het Z-index ingesteld op 2 Dus de CTA-knop wordt prominenter.

 .Hover-rechts .Right {
  Breedte: $ zwevende breedte;
​

.hover-rechter .left {
  Breedte: $ kleinbreedte;
​

.hover-rechts .Eft: vóór {
  Z-index: 2;
} 

10. Ga naar JavaScript

We zullen een aanraking van vanilla javascript gebruiken om ons te helpen CSS-klassen toe te voegen en te verwijderen en we zullen ook enkele van de nieuwe ES6-functies gebruiken. Het eerste dat we moeten doen, is om een ​​constante variabelen te verklaren.

Omdat we zullen gebruiken document Meer dan eens zullen we een constante variabele instellen doc en bewaar het document daarin, zodat we het woord 'document' leuk en kort kunnen houden.

 Const doc = document; 

Nu moeten we nog drie constanten instellen die de .Rechtsaf ​ .links en .container selectors. De reden dat we constanten gebruiken is omdat we weten dat we de waarde hiervan niet willen veranderen, dus het gebruik van een constanten is logisch. Met deze nu kunnen we doorgaan en wat muisgebeurtenissen aan hen toevoegen.

 Const rechts = doc.QuerySelector (". Rechts");
op links = doc.Querysellector (". Links");
const container = doc.querysellector (". Container"); 

De ... gebruiken links Constante variabele we hebben in de laatste stap gedeclareerd, we kunnen nu een evenement luisteraar toevoegen. Dit evenement zal de memeum evenement en in plaats van een callback-functie te gebruiken, zullen we een andere ES6-functie gebruiken Pijlfuncties '(() = & GT;) ​

 // voegt een klasse toe aan het containerelement bij zweven
links.AddeventListener ("memumenter", () = & gt; {
  container.Classist.ADD ("Hover-Left");
}); 

11. Voeg een klasse toe en verwijder

In de laatste stap voegde onze gebeurtenisluisteraar een toe memeum gebeurtenis die zich richt op de hoofdcontainer klasse en voegt een nieuwe klasse toe Hover-Left naar het linker sectie-element. Met dit genoemde toegevoegd, hebben we het nu nodig om het te verwijderen wanneer we het bewegen. We doen dit door het te gebruiken mouseleaving evenement en de .verwijderen() methode.

 // verwijdert de klasse die is toegevoegd aan zweven
Left.AddeventListener ("MOUSEAVE", () = & GT; {
  container.Classist.Remove ("Hover-Left");
}); 

Tot nu toe hebben we alles op het linkerscherm gedaan. Nu zullen we het JavaScript afmaken en klassen op de rechtsectie-elementen toevoegen en verwijderen. Nogmaals, we hebben hier de pijlfunctie-syntaxis gebruikt om alles er goed en opgeruimd te houden.

 Right.AddevenListener ("memumenter", () = & gt; {
  container.Classist.ADD ("Hover-Right");
​

Right.AddeventListener ("MOUSEAVE", () = & GT; {
  container.Classist.Remove ("Hover-Right");
}); 

12. Maak het reagerend

Geen project - ongeacht hoe groot of klein - moet voorkomen dat het reageert. Dus in deze stap zullen we een aantal mediaquery's toevoegen aan onze CSS en dit kleine project maken als adaptief voor mobiele apparaten zo goed mogelijk. Het is de moeite waard om de originele codepen om te zien hoe dit werkt.

 @Media (max-breedte: 800px) {
  H1 {
    FONT-SIZE: 2REM;​

  .button {
    Breedte: 12rem;
  } 

We hebben ervoor gezorgd dat wanneer de breedte van onze pagina daalt tot 800px, het lettertype en de knoppen in omvang verminderen. Dus om dingen af ​​te maken, willen we ook de hoogte targeten en ervoor zorgen dat onze knoppen de pagina naar beneden gaan wanneer de paginahoogte onder de 700 px krijgt.

 @media (max-hoogte: 700px) {
  .button {
    Top: 70%;
}} 

Wilt u uw pagina's opslaan? Exporteer ze als PDF's en sla ze in Secure cloud opslag ​

Web Design Event Genereer Londen Retourneert op 19-21 september 2018, met een ingepakt schema van toonaangevende luidsprekers, een volledige dag van workshops en waardevolle netwerkmogelijkheden - Mis het niet. Haal nu je genereren ticket ​

Dit artikel is oorspronkelijk gepubliceerd in Net Magazine uitgave 305 ​ Abonneer nu ​

Lees verder:

• 5 Sensationele nieuwe websites om geïnspireerd te worden door
• Maak een geanimeerd 3D-teksteffect
• 19 Great Parallax Scrollling-websites