Construiți o pagină animată de aterizare a ecranului

Pagina dvs. de aterizare este un element crucial în dvs. Layout-ul site-ului . Este prima ocazie reală pe care trebuie să o introduceți afacerea dvs. sau produsul pe care îl vindeți, astfel încât designul său este esențial. Paginile de aterizare sunt proiectate cu un singur obiectiv concentrat cunoscut ca un apel la acțiune (CTA). Utilizarea culorilor și a imaginilor pentru a completa apelurile către acțiune și experiența utilizatorului este o necesitate.

• Consultați codul de lucru pentru acest tutorial

În acest tutorial, vom trece prin modul de a construi o pagină de aterizare angajată pentru o marcă fictivă de modă. Acesta va fi centrat în jurul unui design divizat cu imagini mari și tranziții animate care se întâmplă pe hover. Această pagină va avea două butoane de apel clare la acțiune și vom folosi HTML, Sass. Pentru styling și o atingere de JavaScript de vanilie care utilizează sintaxa ES6 (amintiți-vă pentru a vă asigura că dvs. web hosting este potrivit pentru nevoile site-ului dvs.). Prea complex? Creați un site web fără a fi nevoie de cod, încercați un simplu Builder de site-uri web .

01. Obțineți configurați

Dacă utilizați CodePen, asigurați-vă că CSS este setat la "SCSS" în setările stiloului. Puteți face această modificare făcând clic pe fila Setări, alegeți "CSS" și modificați preprocesorul CSS la SCS în opțiunile derulante.

Apoi putem începe să adăugăm în HTML-ul nostru. Vom face o secțiune numită "stânga" și o secțiune numită "dreapta" într-o clasă de containere, ambele secțiuni date o clasă de "ecran".

 & Lt; div clasa = "container" & gt;
  & lt; secțiunea clasa = "ecranul stânga" & gt;
  & lt; / secțiune & gt;
  & lt; secțiunea Class = "Screen dreapta" & gt;
  & lt; / secțiune & gt;
& lt; / div & gt; 

02. Finalizați HTML

Pentru a finaliza HTML-ul nostru, vom adăuga într-un titlu pentru fiecare secțiune folosind un H1. etichetă. Dedesubt că va trebui să adăugăm într-un buton, care să se conecteze la o altă pagină dacă acesta a fost un proiect din lumea reală. Vom da această clasă de buton pentru a păstra lucrurile frumoase și simple.

 & Lt; div clasa = "container" & gt;
   & lt; secțiunea clasa = "ecranul stânga" & gt;
    & lt; h1 & gt; Mens Fashion & lt; / h1 & gt;
      & buton & gt;
       & lt; un buton href = "#" clasă = "" & gt; aflați mai multe 

03. Explorați variabilele SASS

Singurul lucru pe care îl iubim cu toții despre SASS este utilizarea variabilelor. Chiar dacă variabilele native CSS primesc mai mult sprijin, vom păstra lucrurile în siguranță prin utilizarea SASS. Le vom pune la vârful nostru .Scss. , și puteți alege orice culori doriți, dar folosind RGBA. Valorile ne vor da mai multă flexibilitate.

 / ** Variabile ** /

$ container-bgcolor: # 444;
$ stânga-bgcolor: RGBA (136, 226, 247, 0,7);
$ buton-hover: RGBA (94, 226, 247, 0,7);
$ dreapta-bgcolor: RGBA (227, 140, 219, 0.8);
$ buton-hover: RGBA (255, 140, 219, 0,7);
$ hover-lățime: 75%;
$ mic-lățime: 25%;
$ Animatespeed: 1000ms; 

04. Reglați stilul corpului

În primul rând, vom șterge toate căptușeală și marjă implicită în organism și vom stabili familia de fonturi să deschidă SANS. Acest lucru va afecta numai butonul, deci nu contează prea mult ce font folosim. Apoi vom seta lățimea și înălțimea 100% Și asigurați-vă că oriceea ce depășește pe axa X devine ascunsă.

 HTML, corpul {
  Padding: 0;
  Marja: 0;
  Font-Family: "Sans deschis", Sans-Seif;
  Lățime: 100%;
  Înălțime: 100%;
  Overflow-X: Ascuns;
} 

05. Stilul titlurilor secțiunii

Este timpul să alegeți un Font Google pentru titlurile secțiunii - Am ales Afișajul Playfair. Apoi folosind translatex. Putem asigura că titlurile secțiunii sunt întotdeauna centrate pe axa X.

 H1 {
  font-dimensiune: 5rem;
  Culoare: #ffff;
  Poziție: absolută;
  stânga: 50%;
  Top: 20%;
  Transformare: Translatex (-50%);
  spațiu alb: norap;

  Font-Family: "Afișajul Playfair", Serif;
} 

06. Faceți CTA-urile să iasă în evidență

Butoanele noastre vor acționa ca apelurile noastre la acțiune, astfel încât acestea trebuie să fie mari, îndrăznețe și poziționate în cazul în care sunt ușor de făcut clic. Ambele butoane vor avea o margine albă și un efect de tranziție interesant. Stilurile implicite pentru ambele butoane vor fi aceleași, totuși le vom schimba culorile pe hover.

 .button {
  Afișaj: bloc;
  Poziție: absolută;
  stânga: 50%;
  Top: 50%;
  Înălțime: 2,6rem;
  Padding-top: 1.2rem;
  Lățime: 15rem;
  Text-align: centru;
  culoare albă;
  Frontieră: 3px solid #fffff;
  Raza de frontieră: 4px;
  Greutate font: 600;
  Transformare text: majusculă;
  Text-decorare: Nici unul;
  Transformare: Translatex (-50%);
  tranziție: toate .2s; 

Butoanele principale vor avea un efect simplu simplu de hover și vom folosi variabilele SAS pe care le-am specificat pentru culoarea, care va fi o culoare similară cu fundalul paginii.

 .Screen.pleft .button: Hover {
  fundal-culoare: $ stânga-houver-hover;
  Culoare la nivel de frontieră: $ buton-hover;
}

.Screen.Right .button: Hover {
  fundal-culoare: $ dreapta-buton-hover;
  Culoare la nivel de frontieră: $-buton-hover; 

07. Setați fundalul și ecranele containerului

Clasa de containere va acționa ca înveliș de pagini și vom stabili poziția acestui fapt relativ, pur și simplu pentru că dorim să poziționăm ecranele la poziționarea absolută. Vom da recipientului o culoare de fundal implicită, dar, desigur, acest lucru nu va fi văzut deoarece vom stabili culori diferite la ambele medii de ecran.

 .container {
  Poziție: rudă;
  Lățime: 100%;
  Înălțime: 100%;
  Fundal: $ container-bgcolor;
  
    .Screen {
      Poziție: absolută;
      Lățime: 50%;
      Înălțime: 100%;
      Depășirea: ascunsă;
    }
} 

08. Adăugați imagini de fundal

Atât secțiunile din stânga, cât și cele din dreapta vor afișa o imagine și puteți găsi imagini stoc gratuite de pe site-uri web cum ar fi Unsplash. , Pixabay. sau Pexels. (pe care am folosit-o în acest tutorial). Pentru a face lucrurile mai ușoare, am folosit un serviciu gratuit de găzduire și partajare numit IMGBB pe care le putem lega în CSS.

 .Screen.Left {
  stânga: 0;
  Fundal: URL ("https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg") centru centru fără repetare;
  Dimensiune de fundal: acoperire;
  
    & Amp;: înainte de {
       Poziție: absolută;
      Conținut: "";
      Lățime: 100%;
      Înălțime: 100%;
      fundal: $ stânga-bgcolor;
    }
} 

Partea dreaptă a paginii va afișa, de asemenea, o imagine de fundal utilizând IMGBB și vom seta culoarea de fundal la roz. Din nou, am setat dimensiunea de fundal acoperi . Acest lucru ne va permite să acoperiți întregul element care conține, care în cazul nostru este .ecran clasă.

 .Screen.Right {
  dreapta: 0;
  Fundal: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Centrul central No-Repeat;
  Dimensiune de fundal: acoperire;
  
   & Amp;: înainte de {
      Poziție: absolută;
      Conținut: "";
      Lățime: 100%;
      Înălțime: 100%;
      Fundal: $ dreapta-bgcolor;
    }
} 

09. Adăugați tranziții și efecte de hover

Viteza de animație pentru efectul nostru de hover pe ambele ecrane va fi controlată de o tranziție care deține valoarea variabilei noastre $ Animăspeed. , care este de 1000ms (o secundă). Apoi vom termina prin a oferi animației unele relaxări, care este o ușurință în și out care va ajuta să ne dea o animație mai fină.

 .Screen.pleft, .Screen.right, .Screen.right: înainte, .Screen.Left: înainte de {
  Tranziție: $ AnimăSpeed ​​toate ușoarele-in-out;
} 

Ceea ce vrem să se întâmple acum este că atunci când treceți în ecranul din stânga, va fi o clasă adăugată la acea secțiune folosind JavaScript (pe care vom scrie într-un pas mai târziu). Când se adaugă această clasă, atunci ecranul respectiv se va întinde la ce lățimea variabilei pe care le-am specificat - care va fi de 75%, iar apoi partea dreaptă va fi setată la variabila mai mică a lățimii (25%).

 .Hover-stânga .Left {
  Lățime: $ Hover-lățime;
}

.Hover-stânga .Right {
  Lățime: $ mică lățime;
}
.Hover-stânga .Right: înainte de {
  Z-Index: 2;
} 

Aceasta funcționează exact la fel ca partea stângă, unde va fi adăugată o nouă clasă pe deplasarea mouse-ului utilizând JavaScript, iar ecranul corect se va întinde în mod corespunzător. De asemenea, trebuie să ne asigurăm Z-index este setat sa 2. Deci, butonul CTA devine mai proeminent.

 .Hover-dreapta .Right {
  Lățime: $ Hover-lățime;
}

.Hover-dreapta .left {
  Lățime: $ mică lățime;
}

.Hover-dreapta .Left: înainte de {
  Z-Index: 2;
} 

10. Deplasați-vă în JavaScript

Vom folosi o atingere de Vanilla JavaScript pentru a ne ajuta să adăugăm și să eliminăm clasele CSS și vom folosi, de asemenea, unele dintre cele noi caracteristici ES6. Primul lucru pe care trebuie să-l facem este să declarăm câteva variabile constante.

Pentru că vom folosi document De mai multe ori, vom stabili o variabilă constantă numită Doc. și să stocați documentul în acest sens, astfel încât să putem păstra cuvântul "document" frumos și scurt.

 CONST DOC = document; 

Acum trebuie să punem încă trei constante care vor stoca .dreapta , .stânga și .container. selectori. Motivul pentru care folosim constante este pentru că știm că nu vrem să schimbăm valoarea acestora, așa că folosirea unui constantă are sens. Cu aceste setate acum, putem continua și adăugă niște evenimente de șoarece.

 const dreapta = doc.querySelector ("dreapta");
const stânga = doc.querySelector ("stânga");
Const container = doc.QuerySelector ("container"); 

Folosind. stânga Variabila constantă Am declarat în ultimul pas, putem adăuga acum un ascultător de evenimente. Acest eveniment va fi MouseInter. eveniment și în loc să utilizați o funcție de apel invers, vom folosi o altă caracteristică ES6 numită Funcții săgeată "(() = și gt;) .

 // adaugă o clasă la elementul de container pe hover
stânga.addeventlistener ("mouseenter", () = & gt; {
  container.classlist.add ("hover-stânga");
}); 

11. Adăugați și eliminați o clasă

În ultimul pas, ascultătorul nostru de evenimente a adăugat a MouseInter. eveniment care vizează clasa principală a containerului și adaugă o nouă clasă numită Hover-lasat. la elementul din secțiunea din stânga. Cu acest apel numit, acum trebuie să-l eliminăm când plecăm. Vom face acest lucru folosind Mouseleave. eveniment și .elimina() metodă.

 // elimină clasa care a fost adăugată pe hover
stânga.addeventlistener ("mouseleave", () = & gt; {
  container.classlist.remove ("hover-stânga");
}); 

Până acum am făcut totul pe ecranul stâng. Acum vom termina de pe JavaScript și vom adăuga și elimina clasele din elementele secțiunii din dreapta. Din nou, am folosit sintaxa funcției săgeată aici pentru a păstra totul frumos și ordonat.

 dreapta.addeventlistener ("mousedenter", () = & gt; {
  container.classlist.add ("hover-dreapta");
});

dreapta.addeventlistener ("mouseLleave", () = & gt; {{
  container.classlist.remove ("hover-dreapta");
}); 

12. Faceți-o receptivă

Nici un proiect - indiferent cât de mare sau mic - ar trebui să evite să fie reușit. Deci, în acest pas vom adăuga câteva interogări media CSS și vom face acest mic proiect la fel de adaptabil la dispozitivele mobile cât mai bine putem. Merită să verificați Codul original pentru a vedea cum funcționează acest lucru.

 @Media (max-lățime: 800px) {
  H1 {
    font-dimensiune: 2rem; }

  .button {
    Lățime: 12rem;
  } 

Ne-am asigurat că atunci când lățimea paginii noastre devine la 800px, fontul și butoanele vor reduce dimensiunea. Deci, pentru a termina lucrurile pe care vrem să vizităm și înălțimea și să ne asigurăm că butoanele noastre se deplasează în jos pe pagină când înălțimea paginii devine sub 700px.

 @Media (max-înălțime: 700px) {
  .button {
    Top: 70%;
}} 

Doriți să salvați paginile dvs.? Să le exportați ca PDF-uri și să le salvați în siguranță Stocare in cloud .

Eveniment de design web Generați Londra Returnează în perioada 19-21 septembrie 2018, oferind un program ambalat de difuzoare de conducere din industrie, o zi întreagă de ateliere și oportunități de rețele valoroase - nu ratați-o. Obțineți biletul de generat acum .

Acest articol a fost publicat inițial în revista Net Numărul 305. . Abonează-te acum .

Citeste mai mult:

• 5 site-uri noi senzaționale care urmează să fie inspirate de
• Creați un efect de text animat 3D
• 19 site-uri derulante Great Parallax