Saturs
- 01. Iestatieties
- 02. Pabeidziet HTML
- 03. Izpētiet Sass mainīgos
- 04. Pielāgojiet ķermeņa stilu
- 05. Stilējiet sadaļu nosaukumus
- 06. Izceliet CTA
- 07. Iestatiet konteinera fonu un ekrānus
- 08. Pievienojiet fona attēlus
- 09. Pievienojiet pārejas un virzīšanas efektus
- 10. Pārvietojieties uz JavaScript
- 11. Pievienojiet un noņemiet klasi
- 12. Padariet to atsaucīgu
Jūsu galvenā lapa ir būtisks jūsu vietnes izkārtojuma elements. Tā ir pirmā reālā iespēja, lai iepazīstinātu ar savu biznesu vai pārdoto produktu, tāpēc tā dizains ir galvenais. Galvenās lapas ir veidotas ar vienu mērķtiecīgu mērķi, kas pazīstams kā aicinājums uz darbību (CTA). Krāsu un attēlu izmantošana, lai papildinātu aicinājumus uz darbību un lietotāja pieredzi, ir obligāta.
- Šajā apmācībā skatiet darba kodeksu Pen
Šajā apmācībā mēs iepazīsimies ar to, kā izveidot izdomāta modes zīmola pievilcīgu galveno lapu. Tas tiks koncentrēts ap dalītā ekrāna dizainu ar lieliem attēliem un animētām pārejām, kas notiek ar peles kursoru.Šajā lapā būs divas skaidras aicinājuma uz darbību pogas, un mēs stilam izmantosim HTML, Sass un nedaudz vaniļas JavaScript, kas izmanto ES6 sintaksi (atcerieties, lai pārliecinātos, ka jūsu tīmekļa mitināšana ir piemērota jūsu vietnes vajadzībām). Pārāk sarežģīti? Izveidojiet vietni bez koda, izmēģiniet vienkāršu vietņu veidotāju.
01. Iestatieties
Ja izmantojat CodePen, pildspalvas iestatījumos pārliecinieties, vai CSS ir iestatīts uz “SCSS”. Šīs izmaiņas varat veikt, noklikšķinot uz cilnes Iestatījumi, izvēloties CSS un nolaižamajās opcijās CSS priekšapstrādātāju nomainot uz SCSS.
Tad mēs varam sākt pievienot mūsu HTML. Mēs iesaiņojam konteineru klasē sadaļu ar nosaukumu “pa kreisi” un sadaļu “pa labi”, abām sadaļām piešķirot “ekrāna” klasi.
div> sadaļa> / sadaļa> sadaļa> / sadaļa> / div>
02. Pabeidziet HTML
Lai pabeigtu HTML veidošanu, katrai sadaļai pievienosim nosaukumu, izmantojot h1 tagu. Zem tā mums būs jāpievieno poga, kas novirzīs uz citu lapu, ja tas būtu reālās pasaules projekts. Mēs piešķirsim šai klasei pogu lai lietas būtu jaukas un vienkāršas.
div> sadaļa> h1> Vīriešu mode / h1> poga> a href = "#"> Uzziniet vairāk / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Learn Vairāk / a> / poga> / sadaļa>
03. Izpētiet Sass mainīgos
Viena lieta, ko mēs visi mīlam Sassā, ir mainīgo izmantošana. Lai gan vietējie CSS mainīgie saņem lielāku atbalstu, mēs saglabāsim drošību, izmantojot Sass. Mēs tos ievietosim mūsu augšgalā .scss, un jūs varat izvēlēties jebkuras krāsas, kuras vēlaties, bet izmantojot rgba vērtības dos mums lielāku elastību.
/ * * Mainīgie * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ kreisās pogas kursors: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ peles kursors ar peles labo pogu: rgba (255, 140, 219, 0,7); $ kursora platums: 75%; $ mazais platums: 25%; $ animateSpeed: 1000 ms;
04. Pielāgojiet ķermeņa stilu
Pirmkārt, mēs notīrīsim visu noklusējuma uzpildi un atstarpi pamattekstā un pēc tam iestatīsim fontu saimi uz Open Sans. Tas ietekmēs tikai pogu, tāpēc nav pārāk svarīgi, kādu fontu mēs izmantojam. Tad mēs iestatīsim platumu un augstumu uz 100% un pārliecinieties, ka viss, kas pārplūst uz X ass, tiek paslēpts.
html, body {polsterējums: 0; starpība: 0; fontu ģimene: ‘Open Sans’, sans-serif; platums: 100%; augstums: 100%; pārplūde-x: slēpta; }
05. Stilējiet sadaļu nosaukumus
Ir pienācis laiks izvēlēties sadaļu nosaukumiem Google fontu - mēs esam izvēlējušies Playfair Display. Tad izmantojot tulkotX mēs varam pārliecināties, ka sadaļu nosaukumi vienmēr ir centrēti uz X ass.
h1 {font-size: 5rem; krāsa: #fff; pozīcija: absolūta; pa kreisi: 50%; augšpusē: 20%; pārveidot: tulkotX (-50%); baltā telpa: nowrap; font-family: ‘Playfair Display’, serifs; }
06. Izceliet CTA
Mūsu pogas darbosies kā mūsu aicinājumi uz darbību, tāpēc tām jābūt lielām, treknrakstā un izvietotām tur, kur tās ir viegli noklikšķināt. Abām pogām būs balta apmale un interesants pārejas efekts. Noklusējuma stili abām pogām būs vienādi, taču mēs mainīsim to krāsas, virzot kursoru.
.poga {display: block; pozīcija: absolūta; pa kreisi: 50%; augšdaļa: 50%; augstums: 2.6rem; polsterējums: 1.2rem; platums: 15rem; text-align: center; krāsa: balta; apmale: 3px cieta #fff; apmales rādiuss: 4px; fonta svars: 600; teksta pārveidošana: lielie burti; teksta noformēšana: nav; pārveidot: tulkotX (-50%); pāreja: visi .2s;
Galvenajām pogām būs jauks vienkāršs kursora efekts, un mēs izmantosim krāsai norādītos Sass mainīgos, kas būs līdzīgi lapas fona krāsai.
.screen.left .button: hover {background-color: $ left-button-hover; apmales krāsa: $ kreisās pogas kursors; } .screen.right .button: hover {background-color: $ right-button-hover; apmales krāsa: $ labo pogu virzīt;
07. Iestatiet konteinera fonu un ekrānus
Konteineru klase darbosies kā mūsu lapu iesaiņotājs, un mēs to iestatīsim kā relatīvu, vienkārši tāpēc, ka mēs vēlamies novietot ekrānus absolūtā pozīcijā. Mēs konteineram piešķirsim noklusējuma fona krāsu, taču tas, protams, netiks rādīts, jo abiem ekrāna foniem mēs iestatīsim dažādas krāsas.
.konteiners {amats: radinieks; platums: 100%; augstums: 100%; fons: $ container-BgColor; .screen {position: absolūts; platums: 50%; augstums: 100%; pārplūde: slēpta; }}
08. Pievienojiet fona attēlus
Gan kreisajā, gan labajā sadaļā tiks parādīts attēls, un jūs varat atrast bez autoratlīdzības krājuma attēlus no tādām vietnēm kā Unsplash, Pixabay vai Pexels (kurus es esmu izmantojis šajā apmācībā). Lai lietas būtu vieglāk, esmu izmantojis bezmaksas attēlu mitināšanas un koplietošanas pakalpojumu imgbb, ar kuru varam saistīt savu CSS.
.screen.left {pa kreisi: 0; fons: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centra centrā nav atkārtojuma; fona lielums: vāks; &: pirms {pozīcija: absolūts; saturs: ""; platums: 100%; augstums: 100%; fons: $ left-bgColor; }}
Lapas labajā pusē tiks parādīts arī fona attēls, izmantojot imgbb, un mēs iestatīsim fona krāsu uz rozā. Atkal mēs iestatījām fona lielumu uz piesegt. Tas ļaus mums aptvert visu saturošo elementu, kas mūsu gadījumā ir .ekrāns klasē.
.screen.right {right: 0; fons: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centra centrā nav atkārtojuma; fona lielums: vāks; &: pirms {pozīcija: absolūts; saturs: ""; platums: 100%; augstums: 100%; fons: $ right-bgColor; }}
09. Pievienojiet pārejas un virzīšanas efektus
Animācijas ātrumu mūsu kursora efektam abos ekrānos kontrolēs pāreja, kas notur mūsu mainīgā vērtību $ animateSpeed, kas ir 1000 ms (viena sekunde). Tad mēs pabeigsim, piešķirot animācijai zināmu atvieglojumu, kas ir vieglums iekšā un ārā, kas palīdzēs mums radīt vienmērīgāku animāciju.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {pāreja: $ animateSpeed visu vieglumu iziet; }
Tagad mēs vēlamies notikt tā, ka, virzot kursoru virs kreisā ekrāna, šai sadaļai tiks pievienota klase, izmantojot JavaScript (kuru mēs rakstīsim vēlāk). Kad šī klase tiks pievienota, ekrāns tiks izstiepts neatkarīgi no mūsu norādītā mainīgā platuma - tas būs 75%, un pēc tam labā puse tiks iestatīta uz mazāku platuma mainīgo (25%).
.hover-left .left {width: $ hover-width; } .virs-pa kreisi .right {width: $ small-width; } .virs-pa kreisi .pa labi: pirms {z-indekss: 2; }
Tas darbojas tieši tāpat kā kreisajā pusē, kur peles kursora vietā, izmantojot JavaScript, tiks pievienota jauna klase, un attiecīgi tiks izstiepts labais ekrāns. Mums arī jāpārliecinās, vai z indekss ir iestatīts uz 2 tāpēc AUD poga kļūst pamanāmāka.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .virs-labais. kreisais: pirms {z-indekss: 2; }
10. Pārvietojieties uz JavaScript
Mēs izmantosim vaniļas JavaScript pieskārienu, lai palīdzētu mums pievienot un noņemt CSS klases, kā arī izmantosim dažas no jaunajām ES6 funkcijām. Pirmā lieta, kas mums jādara, ir paziņot dažus nemainīgus mainīgos.
Jo mēs izmantosim dokumentu vairāk nekā vienu reizi mēs iestatīsim pastāvīgu mainīgo, ko sauc doc un glabājiet dokumentu tajā, lai vārdu “dokuments” varētu glabāt glīti un īsi.
const doc = dokuments;
Tagad mums jāiestata vēl trīs konstantes, kas glabās .pa labi, .kreisais un .konteiners atlasītāji. Konstantes mēs izmantojam tāpēc, ka mēs zinām, ka nevēlamies mainīt šo vērtību, tāpēc konstantu lietošanai ir jēga. Izmantojot šos iestatījumus, mēs varam turpināt tos pievienot dažiem peles notikumiem.
const right = doc.querySelector (". labi"); const left = doc.querySelector (". pa kreisi"); const container = doc.querySelector (". konteiners");
Izmantojot pa kreisi konstants mainīgais, kuru mēs paziņojām pēdējā solī, tagad tam varam pievienot notikumu klausītāju. Šis notikums būs mouseenter notikumu un tā vietā, lai izmantotu atzvanīšanas funkciju, mēs izmantosim citu ES6 funkciju ar nosaukumu Bultiņu funkcijas ’(() =>).
// pievieno klasi konteinera elementam, kas atrodas kursora kreisajā pusē.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Pievienojiet un noņemiet klasi
Pēdējā solī mūsu pasākumu klausītājs pievienoja a mouseenter notikums, kura mērķis ir galvenā konteineru klase un pievienota jauna klase ar nosaukumu lidināties pa kreisi pa kreiso sadaļas elementu. Kad šis sauktais ir pievienots, tagad tas ir jānoņem, kad virzāmies uz tā. Mēs to izdarīsim, izmantojot pelīte notikums un .noņemt () metodi.
// noņem klasi, kas pievienota kursoram left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Līdz šim mēs visu esam darījuši kreisajā ekrānā. Tagad mēs pabeigsim JavaScript un pievienosim un noņemsim klases labās sadaļas elementos. Atkal mēs šeit esam izmantojuši bultiņas funkcijas sintaksi, lai viss izskatās jauki un kārtīgi.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Padariet to atsaucīgu
Nevienam projektam - neatkarīgi no tā, cik liels vai mazs - nevajadzētu izvairīties no tā, lai tas būtu atsaucīgs. Tātad, šajā solī mēs pievienosim dažus multivides vaicājumus savai CSS un padarīsim šo mazo projektu pēc iespējas piemērotāku mobilajām ierīcēm. Ir vērts apskatīt oriģinālo CodePen, lai uzzinātu, kā tas darbojas.
@media (max-width: 800px) {h1 {font-size: 2rem; } .poga {width: 12rem; }
Mēs esam pārliecinājušies, ka tad, kad mūsu lapas platums samazināsies līdz 800 pikseļiem, fonts un pogas samazināsies. Tātad, lai pabeigtu lietas, mēs arī vēlamies mērķēt uz augstumu un pārliecināties, ka mūsu pogas pārvietojas pa lapu, kad lapas augstums ir mazāks par 700 pikseļiem.
@media (max-height: 700px) {.poga {augšdaļa: 70%; }}
Vai vēlaties saglabāt savas lapas? Eksportējiet tos kā PDF un saglabājiet tos drošā mākoņa krātuvē.
Tīmekļa dizaina pasākums Ģenerēt Londonu atgriežas 2018. gada 19. – 21. septembrī, piedāvājot pilnu nozares vadošo runātāju grafiku, pilnu semināru dienu un vērtīgas sadarbības iespējas - nepalaidiet garām to. Iegūstiet savu ģenerēšanas biļeti tūlīt.
Šis raksts sākotnēji tika publicēts net žurnālā 305. izdevums. Abonē tagad.
