Conţinut
- 01. Pregătește-te
- 02. Finalizați codul HTML
- 03. Explorează variabilele Sass
- 04. Reglați stilul corpului
- 05. Stilează titlurile secțiunii
- 06. Faceți CTA să iasă în evidență
- 07. Setați fundalul și ecranele containerului
- 08. Adăugați imagini de fundal
- 09. Adăugați tranziții și efectuați cursorul
- 10. Treceți în JavaScript
- 11. Adăugați și eliminați o clasă
- 12. Faceți-l receptiv
Pagina dvs. de destinație este un element crucial în aspectul site-ului dvs. web. Este prima oportunitate reală pe care o aveți de a vă prezenta afacerea sau produsul pe care îl vindeți, astfel încât designul său este esențial. Paginile de destinație sunt proiectate cu un singur obiectiv concentrat, cunoscut sub numele de îndemn (CTA). Utilizarea culorilor și a imaginilor pentru a completa apelurile la acțiune și experiența utilizatorului este o necesitate.
- Consultați CodePen de lucru pentru acest tutorial
În acest tutorial, vom trece în revistă cum să construim o pagină de destinație captivantă pentru un brand de modă fictiv. Acesta va fi centrat în jurul unui design cu ecran divizat, cu imagini de dimensiuni mari și tranziții animate care se întâmplă la plimbare.Această pagină va avea două butoane clare de îndemn și vom folosi HTML, Sass pentru stil și o notă de JavaScript vanilat care utilizează sintaxa ES6 (nu uitați să vă asigurați că găzduirea dvs. web este potrivită nevoilor site-ului dvs. web). Prea complex? Creați un site web fără a fi nevoie de cod, încercați un simplu constructor de site-uri web.
01. Pregătește-te
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 de setări, alegeți „CSS” și schimbați preprocesorul CSS la SCSS în opțiunile derulante.
Apoi, putem începe să adăugăm în HTML-ul nostru. Vom înfășura o secțiune numită „stânga” și o secțiune numită „dreapta” într-o clasă de containere, ambele secțiuni având o clasă de „ecran”.
div> secțiune> / secțiune> secțiune> / secțiune> / div>
02. Finalizați codul HTML
Pentru a finaliza HTML-ul nostru, vom adăuga un titlu pentru fiecare secțiune folosind un h1 etichetă. Mai jos, va trebui să adăugăm un buton, care să se conecteze la o altă pagină dacă acesta ar fi un proiect real. Vom acorda acesteia o clasă de buton pentru a păstra lucrurile frumoase și simple.
div> section> h1> Fashion pentru bărbați / h1> button> a href = "#"> Aflați mai multe / a> / button> / section> section> h1> Fashion pentru femei / h1> button> a href = "#"> Learn Mai multe / a> / buton> / secțiune>
03. Explorează variabilele Sass
Singurul lucru pe care îl iubim cu toții despre Sass este utilizarea variabilelor. Chiar dacă variabilele CSS native primesc mai mult sprijin, vom păstra lucrurile în siguranță folosind Sass. Le vom pune pe cele mai importante .scss, și puteți alege orice culori doriți, dar folosind rgba valorile ne vor oferi mai multă flexibilitate.
/ * * Variabile * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ butonul stânga-hover: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ dreapta-buton-hover: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ lățime mică: 25%; $ animateSpeed: 1000ms;
04. Reglați stilul corpului
În primul rând, vom șterge toate umpluturile și marginile implicite pentru corp și apoi vom seta familia de fonturi la Open Sans. Acest lucru va afecta doar butonul, deci nu contează prea mult ce font folosim. Apoi vom seta lățimea și înălțimea la 100% și asigurați-vă că orice lucru care revarsă pe axa X se ascunde.
html, body {padding: 0; marja: 0; font-family: „Open Sans”, sans-serif; lățime: 100%; înălțime: 100%; overflow-x: ascuns; }
05. Stilează titlurile secțiunii
Este timpul să alegeți un font Google pentru titlurile secțiunilor - am ales Playfair Display. Apoi folosind traducereX ne putem asigura că titlurile secțiunilor sunt întotdeauna centrate pe axa X.
h1 {font-size: 5rem; culoare: #fff; poziție: absolută; stânga: 50%; top: 20%; transform: translateX (-50%); spațiu alb: nowrap; font-family: „Playfair Display”, serif; }
06. Faceți CTA să iasă în evidență
Butoanele noastre vor acționa ca îndemnurile noastre la acțiune, astfel încât acestea trebuie să fie mari, îndrăznețe și poziționate acolo unde 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, cu toate acestea le vom schimba culorile la plecare.
.button {display: block; poziție: absolută; stânga: 50%; top: 50%; înălțime: 2,6rem; căptușeală: 1.2rem; lățime: 15rem; text-align: centru; culoare albă; chenar: 3px solid #fff; raza chenarului: 4px; greutate-font: 600; text-transform: majuscule; decor-text: nici unul; transform: translateX (-50%); tranziție: toate .2s;
Butoanele principale vor avea un efect simplu de hover și vom folosi variabilele Sass pe care le-am specificat pentru culoare, care va avea o culoare similară cu fundalul paginii.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ mouse-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ mouse-button-hover;
07. Setați fundalul și ecranele containerului
Clasa container va acționa ca învelitoarea noastră de pagini și vom seta poziția acesteia la relativă, pur și simplu pentru că dorim să poziționăm ecranele la poziționare absolută. Vom da containerului o culoare de fundal implicită, dar, desigur, aceasta nu va fi văzută, deoarece vom seta culori diferite pe ambele fundaluri ale ecranului.
.container {poziție: relativă; lățime: 100%; înălțime: 100%; fundal: $ container-BgColor; .screen {poziție: absolut; lățime: 50%; înălțime: 100%; overflow: 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 de stoc fără drepturi de autor de pe site-uri web precum Unsplash, Pixabay sau Pexels (pe care le-am folosit în acest tutorial). Pentru a face lucrurile mai ușoare, am folosit un serviciu gratuit de găzduire și partajare de imagini numit imgbb la care putem conecta în CSS.
.screen.left {left: 0; fundal: url (‘https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centru centru fără repetare; fundal-dimensiune: coperta; &: înainte {poziția: absolută; conținut: ""; lățime: 100%; înălțime: 100%; fundal: $ left-bgColor; }}
Partea dreaptă a paginii va afișa, de asemenea, o imagine de fundal folosind imgbb și vom seta culoarea de fundal la roz. Din nou, am stabilit dimensiunea fundalului la acoperi. Acest lucru ne va permite să acoperim î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.webp’) centru centru fără repetare; fundal-dimensiune: coperta; &: înainte de {poziția: absolută; conținut: ""; lățime: 100%; înălțime: 100%; fundal: $ right-bgColor; }}
09. Adăugați tranziții și efectuați cursorul
Viteza animației pentru efectul nostru de plutire pe ambele ecrane va fi controlată de o tranziție care deține valoarea variabilei noastre $ animateSpeed, care este de 1000 ms (o secundă). Apoi, vom încheia oferind animației o ușurare, care este o ușurință de intrare și ieșire care ne va ajuta să ne oferiți o animație mai lină.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed all easy-in-out; }
Ceea ce vrem să se întâmple acum este că atunci când treceți cu mouse-ul peste ecranul din stânga, va exista o clasă adăugată la acea secțiune folosind JavaScript (pe care o vom scrie într-un pas ulterior). Când se adaugă această clasă, ecranul respectiv se va întinde la orice lățime a variabilei pe care am specificat-o - care va fi de 75%, iar apoi partea dreaptă va fi setată la variabila de lățime mai mică (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: before {z-index: 2; }
Acest lucru funcționează exact la fel ca în partea stângă, unde o nouă clasă va fi adăugată la mouse-ul folosind JavaScript, iar ecranul din dreapta se va întinde corespunzător. De asemenea, trebuie să ne asigurăm că indexul z este setat sa 2 deci butonul CTA devine mai proeminent.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .stânga: înainte de {z-index: 2; }
10. Treceți în JavaScript
Vom folosi o notă de vanilie JavaScript pentru a ne ajuta să adăugăm și să eliminăm clase CSS și vom folosi, de asemenea, unele dintre noile 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 seta o variabilă constantă numită doc și stocați documentul în interiorul acestuia, astfel încât să putem păstra cuvântul „document” frumos și scurt.
const doc = document;
Acum trebuie să setăm încă trei constante care vor stoca .dreapta, .stânga și .container selectoare. Motivul pentru care folosim constante este pentru că știm că nu vrem să schimbăm valoarea acestora, așa că folosirea constantelor are sens. Cu aceste setări acum, putem continua și le putem adăuga câteva evenimente de mouse.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Folosind stânga variabilă constantă pe care am declarat-o în ultimul pas, acum putem adăuga un ascultător de evenimente la ea. Acest eveniment va fi mouseenter eveniment și în loc să folosim o funcție de apel invers, vom folosi o altă caracteristică ES6 numită Funcții săgeată ”(() =>).
// adaugă o clasă la elementul container de pe hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Adăugați și eliminați o clasă
În ultimul pas, ascultătorul nostru de evenimente a adăugat un mouseenter eveniment care vizează clasa principală de containere și adaugă o nouă clasă numită plasați-stânga la elementul din secțiunea din stânga. Cu această apelare adăugată, acum trebuie să o eliminăm atunci când ne deplasăm. Vom face acest lucru folosind pleacă de șoareci eveniment și .elimina() metodă.
// elimină clasa care a fost adăugată la hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Până acum am făcut totul pe ecranul din stânga. Acum vom termina JavaScript-ul și vom adăuga și elimina clase din elementele din secțiunea din dreapta. Din nou, am folosit sintaxa funcției săgeată aici pentru a păstra totul frumos și ordonat.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Faceți-l receptiv
Niciun proiect - indiferent cât de mare sau de mic - nu ar trebui să evite să fie receptiv. Deci, în acest pas vom adăuga câteva interogări media la CSS și vom face acest mic proiect cât mai adaptabil la dispozitivele mobile. Merită să consultați CodePen original pentru a vedea cum funcționează acest lucru.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Ne-am asigurat că, atunci când lățimea paginii noastre scade la 800 px, fontul și butoanele vor reduce dimensiunea. Deci, pentru a termina lucrurile, vrem să vizăm și înălțimea și să ne asigurăm că butoanele noastre se deplasează în jos în pagină când înălțimea paginii devine sub 700 px.
@media (max-height: 700px) {.button {sus: 70%; }}
Doriți să vă salvați paginile? Exportați-le ca fișiere PDF și salvați-le în spațiul de stocare securizat în cloud.
Eveniment de proiectare web Generați Londra revine în perioada 19-21 septembrie 2018, oferind un program plin de vorbitori de top din industrie, o zi întreagă de ateliere și oportunități valoroase de rețea - nu ratați. Obțineți biletul Generați acum.
Acest articol a fost publicat inițial în revista net numărul 305. Abonează-te acum.
