Përmbajtje
- 01. Vendosuni
- 02. Përfundoni HTML-në
- 03. Eksploroni variablat Sass
- 04. Rregullo stilimin e trupit
- 05. Stili i titujve të seksioneve
- 06. Bëni që CTA të spikasin
- 07. Vendosni sfondin dhe ekranet e kontejnerit
- 08. Shtoni imazhe në sfond
- 09. Shtoni tranzicionet dhe efektet e rri pezull
- 10. Kaloni në JavaScript
- 11. Shtoni dhe hiqni një klasë
- 12. Bëni të përgjegjshëm
Faqja juaj e uljes është një element thelbësor në paraqitjen tuaj të internetit. Isshtë mundësia e parë e vërtetë që keni për të prezantuar biznesin tuaj, ose produktin që shesni, kështu që dizajni i tij është thelbësor. Faqet e zbarkimit janë krijuar me një objektiv të vetëm të përqendruar të njohur si një thirrje për veprim (CTA). Përdorimi i ngjyrave dhe imazheve për të plotësuar thirrjet për veprim dhe përvojën e përdoruesit është i domosdoshëm.
- Shikoni CodePen që punon për këtë udhëzim
Në këtë manual, do të shqyrtojmë mënyrën e ndërtimit të një faqe tërheqëse tërheqëse për një markë imagjinare të modës. Ai do të përqendrohet rreth një dizajni në ekran të ndarë me imazhe të mëdha dhe kalime të animuara që ndodhin në pezull.Kjo faqe do të ketë dy butona të qarta thirrje për veprim dhe ne do të përdorim HTML, Sass për stilim dhe një prekje të JavaScript vanilje që përdor sintaksën ES6 (mos harroni të siguroheni që pritja juaj në internet është e përshtatshme për nevojat tuaja të faqes në internet). Shumë komplekse? Krijoni një faqe në internet pa nevojën e kodit, provoni një krijues të thjeshtë faqesh në internet.
01. Vendosuni
Nëse po përdorni CodePen, sigurohuni që CSS të jetë vendosur në 'SCSS' në cilësimet e Pen. Ju mund ta bëni këtë ndryshim duke klikuar në skedën e cilësimeve, zgjidhni 'CSS' dhe ndryshoni Paraprocesorin CSS në SCSS në opsionet e lëshimit.
Atëherë mund të fillojmë të shtojmë HTML-në tonë. Ne do të mbështjellim një seksion të quajtur 'majtas' dhe një seksion të quajtur 'djathtas' brenda një klase kontejnerësh, me të dy seksionet dhënë një klasë të 'ekranit'.
div> seksion> / seksion> seksion> / seksion> / div>
02. Përfundoni HTML-në
Për të finalizuar HTML-në tonë, ne do të shtojmë një titull për secilën seksion duke përdorur një h1 etiketë Nën këtë do të duhet të shtojmë një buton, i cili do të lidhej me një faqe tjetër nëse ky do të ishte një projekt i botës reale. Ne do t'i japim kësaj një klasë butoni për t'i mbajtur gjërat bukur dhe të thjeshtë.
div> seksioni> h1> Moda për burra / h1> butoni> a href = "#"> Mësoni më shumë / a> / buton> / seksion> seksion> h1> Moda e grave / h1> buton> a href = "#"> Mësoni Më shumë / a> / buton> / seksion>
03. Eksploroni variablat Sass
Një gjë që të gjithë e duam për Sass është përdorimi i variablave. Edhe pse variablat vendas të CSS po marrin më shumë mbështetje, ne do t'i mbajmë gjërat të sigurta duke përdorur Sass. Ne do t'i vendosim këto në majën e tonave .scss, dhe ju mund të zgjidhni çfarëdo ngjyre që dëshironi, por duke përdorur rgba vlerat do të na japin më shumë fleksibilitet.
/ * * Variablat * * / $ kontejner-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ hover-butonin e majtë: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ djathtas-butoni-rri pezull: rgba (255, 140, 219, 0.7); gjerësia e fluturimit $: 75%; $ me gjerësi të vogël: 25%; $ animateSpeed: 1000ms;
04. Rregullo stilimin e trupit
Së pari, ne do të pastrojmë të gjitha mbushjet dhe diferencën e paracaktuar në trup dhe më pas vendosim familjen e shkronjave në Open Sans. Kjo do të ndikojë vetëm në butonin, kështu që nuk ka shumë rëndësi se çfarë font përdorim. Pastaj ne do të vendosim gjerësinë dhe lartësinë në 100% dhe sigurohuni që gjithçka që vërshon në boshtin X të fshihet.
html, trupi {mbushje: 0; diferencë: 0; font-family: 'Open Sans', sans-serif; gjerësia: 100%; lartësia: 100%; tejmbushja-x: e fshehur; }
05. Stili i titujve të seksioneve
Timeshtë koha për të zgjedhur një font të Google për titujt e seksioneve - ne kemi zgjedhur Playfair Display. Pastaj duke përdorur përkthe X ne mund të sigurohemi që titujt e seksioneve janë gjithmonë të përqendruar në boshtin X.
h1 {madhësia e shkronjave: 5rem; ngjyra: #fff; pozicioni: absolut; majtas: 50%; maja: 20%; shndërroni: përktheniX (-50%); hapësira e bardhë: tani font-family: 'Playfair Display', serif; }
06. Bëni që CTA të spikasin
Butonat tanë do të veprojnë si thirrjet tona për veprim, kështu që këto duhet të jenë të mëdha, të guximshme dhe të pozicionuara aty ku mund të klikohen lehtë. Të dy butonat do të kenë një kufi të bardhë dhe një efekt interesant tranzicioni. Stilet e parazgjedhura për të dy butonat do të jenë të njëjta, megjithatë ne do të ndryshojmë ngjyrat e tyre në pezull.
.button {display: bllok; pozicioni: absolut; majtas: 50%; maja: 50%; lartësia: 2.6rem; mbushja e sipërme: 1.2rem; gjerësia: 15rem; rreshtimi i tekstit: qendra; ngjyra: e bardhe; kufiri: 3px solid #fff; rrezja kufitare: 4px; pesha e shkronjave: 600; transformimi i tekstit: i madh; dekorim teksti: asnjë; shndërroni: përktheniX (-50%); tranzicioni: të gjitha .2s;
Butonat kryesorë do të kenë një efekt të këndshëm të thjeshtë dhe do të përdorim variablat Sass që specifikuam për ngjyrën, të cilat do të jenë një ngjyrë e ngjashme me sfondin e faqes.
.screen.left .button: hover {background-color: $ majtas-butoni-rri pezull; ngjyra e kufirit: $ butoni i majtë-rri pezull; } .screen.right .button: hover {background-color: $ right-button-hover; ngjyra e kufirit: $ djathtas-butoni-rri pezull;
07. Vendosni sfondin dhe ekranet e kontejnerit
Klasa e kontejnerëve do të veprojë si mbështjellësi i faqes tonë dhe ne do ta vendosim pozicionin e kësaj në relativ, thjesht sepse duam të pozicionojmë ekranet në pozicionimin absolut. Ne do t'i japim enës një ngjyrë të paracaktuar të sfondit, por sigurisht që kjo nuk do të shihet sepse do të vendosim ngjyra të ndryshme në të dy sfondet e ekranit.
.mbajtësi {pozicioni: relativ; gjerësia: 100%; lartësia: 100%; sfondi: $ container-BgColor; ekran {pozicioni: absolut; gjerësia: 50%; lartësia: 100%; tejmbushje: e fshehur; }}
08. Shtoni imazhe në sfond
Seksionet majtas dhe djathtas do të shfaqin një imazh dhe ju mund të gjeni imazhe pa aksione nga faqet e internetit të tilla si Unsplash, Pixabay ose Pexels (të cilat unë i kam përdorur në këtë manual). Për t'i bërë gjërat më të lehta, unë kam përdorur një shërbim falas të pritjes dhe ndarjes së imazheve të quajtur imgbb, me të cilin mund ta lidhim në CSS tonë.
.shfaqja.majtas {majtas: 0; sfondi: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') qendra e qendrës pa përsëritje; madhësia e sfondit: kopertina; &: para {pozicioni: absolut; përmbajtja: ""; gjerësia: 100%; lartësia: 100%; sfondi: $ left-bgColor; }}
Ana e djathtë e faqes gjithashtu do të shfaqë një imazh sfond duke përdorur imgbb, dhe ne do të vendosim ngjyrën e sfondit në rozë. Përsëri, ne vendosëm madhësinë e sfondit në mbulesë. Kjo do të na lejojë të mbulojmë të gjithë elementin që përmban, i cili në rastin tonë është . ekran klasa
.shfaqja.djathtas {djathtas: 0; sfondi: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') qendra e qendrës pa përsëritje; madhësia e sfondit: kopertina; &: para {pozicioni: absolut; përmbajtja: ""; gjerësia: 100%; lartësia: 100%; sfondi: $ right-bgColor; }}
09. Shtoni tranzicionet dhe efektet e rri pezull
Shpejtësia e animacionit për efektin tonë të pezullimit në të dy ekranet do të kontrollohet nga një tranzicion që mban vlerën e ndryshores sonë $ animateSpeed, e cila është 1000ms (një sekondë). Pastaj do të përfundojmë duke i dhënë animimit një lehtësim, i cili është një lehtësi brenda dhe jashtë që do të ndihmojë për të na dhënë një animacion më të butë.
.screen.left, .screen.right, .screen.right: para, .screen.left: para {tranzicionit: $ animateSpeed all easy-in-out; }
Ajo që duam të ndodhë tani është që kur të rrini pezull mbi ekranin e majtë, do të shtohet një klasë në atë seksion duke përdorur JavaScript (të cilën do ta shkruajmë në një hap më vonë). Kur të shtohet kjo klasë, atëherë ajo ekran do të shtrihet në çfarëdo gjerësie të ndryshores që specifikuam - e cila do të jetë 75%, dhe pastaj ana e djathtë do të vendoset në ndryshoren me gjerësi më të vogël (25%).
.ngri majtas .majtas {gjerësi: $ gjerësi hover; } .ngri-majtas .djathtas {gjerësia: $ gjerësi e vogël; } .ngri-majtas .djathtas: para {indeksit z: 2; }
Kjo funksionon saktësisht njësoj si pjesa e majtë, ku një klasë e re do të shtohet në miun duke përdorur JavaScript, dhe ekrani i djathtë do të shtrihet në përputhje me rrethanat. Ne gjithashtu duhet të sigurohemi indeksi z është vendosur në 2 kështu që butoni CTA bëhet më i dukshëm.
.djathtas-djathtas .djathtas {gjerësia: $ gjerësi hover; } .djathtas-djathtas .majtas {gjerësia: $ gjerësi e vogël; } .djathtas-djathtas .majtas: para {indeksit z: 2; }
10. Kaloni në JavaScript
Ne do të përdorim një prekje të vaniljes JavaScript për të na ndihmuar të shtojmë dhe heqim klasat CSS dhe gjithashtu do të përdorim disa nga veçoritë e reja ES6. Gjëja e parë që duhet të bëjmë është të deklarojmë disa ndryshore konstante.
Sepse ne do të përdorim dokument më shumë se një herë, ne do të vendosim një ndryshore konstante të quajtur dok dhe ruajeni dokumentin brenda kësaj, në mënyrë që ta mbajmë fjalën 'dokument' të bukur dhe të shkurtër.
konst dok = dokument;
Tani ne kemi nevojë për të vendosur tre konstante të tjera që do të ruajnë .drejta, .majtas dhe .kontejner përzgjedhësve. Arsyeja pse po përdorim konstante është sepse e dimë që nuk duam ta ndryshojmë vlerën e këtyre, kështu që përdorimi i konstanteve ka kuptim. Me këto të vendosura tani, ne mund të shkojmë përpara dhe t'u shtojmë atyre disa ngjarje të miut.
const right = dok.pyetjeSelector (". djathtas"); const majtë = doc.querySelector (". majtas"); konteiner konst. = doc.querySelector (". kontejner");
Duke perdorur u largua variabël konstante që kemi deklaruar në hapin e fundit, tani mund të shtojmë një dëgjues të ngjarjeve në të. Kjo ngjarje do të jetë hyrja e miut ngjarje dhe në vend që të përdorim një funksion kthyese, ne do të përdorim një tjetër tipar ES6 të quajtur Funksionet e Shigjetës '(() =>).
// shton një klasë në elementin e kontejnerit në anën e majtë.addEventListener ("mouseenter", () => {container.classList.add ("hover-majtas");});
11. Shtoni dhe hiqni një klasë
Në hapin e fundit, dëgjuesi ynë i ngjarjeve shtoi një hyrja e miut ngjarje që synon klasën kryesore të kontejnerëve dhe shton një klasë të re të quajtur rri pezull-majtas në elementin e seksionit të majtë. Me këtë thirrje të shtuar, ne tani duhet ta heqim atë kur rri pezull nga ajo. Ne do ta bëjmë këtë duke përdorur miut ngjarja dhe . heq () metoda
// heq klasën që u shtua në hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-majtas");});
Deri më tani ne kemi bërë gjithçka në ekranin e majtë. Tani do të përfundojmë JavaScript dhe do të shtojmë dhe heqim klasat në elementet e seksionit të djathtë. Përsëri ne kemi përdorur sintaksën e funksionit të shigjetës këtu për të mbajtur gjithçka të bukur dhe të rregullt.
right.addEventListener ("mouseenter", () => {container.classList.add ("rri pezull-djathtas");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("rri pezull-djathtas");});
12. Bëni të përgjegjshëm
Asnjë projekt - pavarësisht sa i madh apo i vogël - nuk duhet të shmangë bërjen e përgjegjshme. Pra, në këtë hap ne do të shtojmë disa pyetje mediatike në CSS-në tonë, dhe do ta bëjmë këtë projekt të vogël sa më përshtatës për pajisjet mobile sa më mirë që të mundemi. Vlen të shikoni CodePen origjinale për të parë se si funksionon kjo.
@ media (gjerësia maksimale: 800px) {h1 {font-size: 2rem; }. butoni {gjerësia: 12rem; }
Ne jemi siguruar që kur gjerësia e faqes tonë të ulet në 800px, font-i dhe butonat do të zvogëlohen në madhësi. Pra, për të përfunduar gjërat, ne duam të synojmë gjithashtu lartësinë dhe të sigurohemi që butonat tanë të lëvizin poshtë faqes kur lartësia e faqes të bëhet nën 700px.
@ media (lartësia maksimale: 700px) {. butoni {lart: 70%; }}
Dëshironi të ruani faqet tuaja? Eksportoni ato si PDF dhe ruani në ruajtje të sigurt të reve.
Ngjarje për krijimin e faqes në internet Gjeneroni Londrën kthehet më 19-21 shtator 2018, duke ofruar një orar të mbushur me folës kryesorë të industrisë, një ditë të plotë punëtorish dhe mundësi të vlefshme për rrjetëzimin - mos e humbni. Merrni tani biletën tuaj Generate.
Ky artikull u botua fillimisht në revistën net çështja 305. Regjistrohuni tani.
