Efni.
- 01. Vertu stilltur
- 02. Ljúktu við HTML
- 03. Kannaðu Sass breytur
- 04. Stilltu líkamsstíl
- 05. Stílaðu hlutann á titlum
- 06. Láttu viðskiptavinina verða áberandi
- 07. Stilltu bakgrunn gámanna og skjái
- 08. Bættu við bakgrunnsmyndum
- 09. Bæta við umbreytingum og sveimaáhrifum
- 10. Færa í JavaScript
- 11. Bæta við og fjarlægja bekk
- 12. Gerðu það móttækilegt
Áfangasíðan þín er mikilvægur þáttur í skipulagi vefsíðunnar þinnar. Það er fyrsta raunverulega tækifærið sem þú hefur til að kynna fyrirtækið þitt, eða vöruna sem þú selur, svo hönnun þess er lykilatriði. Áfangasíður eru hannaðar með einu einbeittu markmiði sem kallast kallað til aðgerða (CTA). Notkun lita og mynda til að bæta ákallin til aðgerða og notendaupplifun er nauðsyn.
- Sjá vinnandi CodePen fyrir þessa kennslu
Í þessari kennslu munum við fara í gegnum hvernig á að byggja upp spennandi áfangasíðu fyrir skáldað tískumerki. Það verður miðað í kringum skjáhönnun með stórum myndum og hreyfimyndum sem gerast á sveima.Þessi síða mun hafa tvo skýra ákall til aðgerðahnappa og við munum nota HTML, Sass til að stíla og snerta af vanillu JavaScript sem notar ES6 setningafræði (mundu að ganga úr skugga um að vefþjónusta þín henti þörfum vefsíðu þinnar). Of flókið? Búðu til vefsíðu án þess að þurfa kóða, reyndu einfaldan vefsíðugerðarmann.
01. Vertu stilltur
Ef þú ert að nota CodePen skaltu ganga úr skugga um að CSS sé stillt á „SCSS“ í pennastillingunum. Þú getur gert þessa breytingu með því að smella á stillingarflipann, velja ‘CSS’ og breyta CSS forvinnsluvélinni í SCSS í fellivalmyndunum.
Þá getum við byrjað að bæta við HTML. Við ætlum að vefja hluta sem heitir 'vinstri' og hluta sem kallast 'hægri' innan gámaflokks, þar sem báðir hlutarnir fá flokkinn 'skjár'.
div> hluti> / hluti> hluti> / hluti> / div>
02. Ljúktu við HTML
Til að ganga frá HTML okkar munum við bæta við titli fyrir hvern hluta með því að nota h1 tag. Undir það verðum við að bæta við hnapp sem myndi tengjast annarri síðu ef þetta væri raunverulegt verkefni. Við munum gefa þessu flokk takki að hafa hlutina fína og einfalda.
div> hluti> h1> Herratíska / h1> hnappur> a href = "#"> Frekari upplýsingar / a> / takki> / hluti> hluti> h1> Tíska kvenna / h1> hnappur> a href = "#"> Lærðu Meira / a> / hnappur> / hluti>
03. Kannaðu Sass breytur
Það eina sem við öll elskum við Sass er að nota breytur. Jafnvel þó að innfæddar CSS-breytur fái meiri stuðning munum við halda hlutunum öruggum með því að nota Sass. Við munum setja þetta efst á okkar .scss, og þú getur valið hvaða liti sem þú vilt, en nota rgba gildi munu veita okkur meiri sveigjanleika.
/ * * Breytur * * / $ gámur-BgColor: # 444; $ vinstri-bg Litur: rgba (136, 226, 247, 0,7); $ vinstri hnappur-sveima: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ hægri hnappur-sveima: rgba (255, 140, 219, 0.7); $ sveima-breidd: 75%; $ lítil breidd: 25%; $ animateSpeed: 1000ms;
04. Stilltu líkamsstíl
Í fyrsta lagi munum við hreinsa allt sjálfgefið bólstrun og framlegð í líkamann og síðan setja leturgerðirnar á Open Sans. Þetta hefur aðeins áhrif á hnappinn, svo það skiptir ekki of miklu hvaða leturgerð við notum. Þá munum við stilla breidd og hæð á 100% og vertu viss um að allt sem flæðir yfir X-ásnum leynist.
html, líkami {padding: 0; framlegð: 0; font-family: ‘Open Sans’, sans-serif; breidd: 100%; hæð: 100%; flæða-x: falinn; }
05. Stílaðu hlutann á titlum
Það er kominn tími til að velja Google leturgerð fyrir titla hlutanna - við höfum valið Playfair skjá. Notaðu síðan þýðaX við getum verið viss um að kaflaheitin séu alltaf miðjuð á X-ásnum.
h1 {leturstærð: 5rem; litur: #fff; staða: alger; vinstri: 50%; efst: 20%; umbreyta: translateX (-50%); hvítt-rými: nowrap; font-family: ‘Playfair Display’, serif; }
06. Láttu viðskiptavinina verða áberandi
Hnappar okkar munu virka sem ákall okkar til aðgerða, þannig að þessir þurfa að vera stórir, feitletraðir og staðsettir þar sem auðvelt er að smella á þá. Báðir hnappar munu hafa hvítan ramma og áhugaverð umskiptaáhrif. Sjálfgefnir stílar fyrir báða hnappana verða þeir sömu, en við munum breyta litum þeirra á sveima.
.hnappur {display: block; staða: alger; vinstri: 50%; efst: 50%; hæð: 2.6rem; padding-top: 1.2rem; breidd: 15rem; text-align: miðja; litur: hvítur; jaðar: 3px solid #fff; jaðar-radíus: 4px; leturþyngd: 600; texta-umbreyting: hástafi; textaskreyting: engin; umbreyta: translateX (-50%); umskipti: allir .2s;
Helstu hnappar munu hafa fallegan einfaldan sveimaáhrif og við munum nota Sass breyturnar sem við tilgreindum fyrir litinn, sem verður svipaður litur og bakgrunnur síðunnar.
.screen.left .button: sveima {bakgrunnslitur: $ vinstri hnappur-sveima; border-color: $ vinstri-hnappur-sveima; } .screen.right .button: sveima {bakgrunnslitur: $ hægri hnappur-sveima; jaðar-litur: $ hægri-hnappur-sveima;
07. Stilltu bakgrunn gámanna og skjái
Gámaflokkurinn mun virka sem síðusíðan okkar og við munum setja stöðu þess á hlutfallslegan hátt, einfaldlega vegna þess að við viljum staðsetja skjáina í algera staðsetningu. Við munum gefa ílátinu sjálfgefinn bakgrunnslit, en auðvitað mun þetta ekki sjást vegna þess að við munum stilla mismunandi liti á bæði skjá bakgrunninn.
.container {staða: ættingi; breidd: 100%; hæð: 100%; bakgrunnur: $ gámur-BgColor; .skjár {staða: alger; breidd: 50%; hæð: 100%; flæða: falið; }}
08. Bættu við bakgrunnsmyndum
Bæði vinstri og hægri hlutinn mun birta mynd og þú getur fundið royalty-free lager myndir af vefsíðum eins og Unsplash, Pixabay eða Pexels (sem ég hef notað í þessari kennslu). Til að auðvelda hlutina hef ég notað ókeypis þjónustu fyrir myndhýsingu og samnýtingu sem heitir imgbb og við getum tengt í CSS okkar.
.screen.left {vinstri: 0; bakgrunnur: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) miðstöðarmiðstöð ekki endurtaka; bakgrunnsstærð: kápa; &: fyrir {stöðu: alger; innihald: ""; breidd: 100%; hæð: 100%; bakgrunnur: $ left-bgColor; }}
Hægra megin á síðunni birtist einnig bakgrunnsmynd með imgbb og við munum stilla bakgrunnslitinn á bleikan lit. Aftur stillum við bakgrunnsstærð á þekja. Þetta gerir okkur kleift að ná yfir allt innihaldsefnið, sem í okkar tilfelli er .skjár bekk.
.screen.right {hægri: 0; bakgrunnur: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) miðstöðarmiðstöð ekki endurtaka; bakgrunnsstærð: kápa; &: fyrir {stöðu: alger; innihald: ""; breidd: 100%; hæð: 100%; bakgrunnur: $ right-bgColor; }}
09. Bæta við umbreytingum og sveimaáhrifum
Hreyfihraði fyrir sveimaáhrif okkar á báðum skjánum verður stjórnað með umskiptum sem halda gildi breytu okkar $ animateSpeed, sem er 1000ms (ein sekúnda). Síðan munum við ljúka með því að veita hreyfimyndunum slökun, sem er auðveld inn og út sem mun hjálpa okkur að fá sléttari hreyfimyndir.
.screen.left, .screen.right, .screen.right: áður, .screen.left: fyrir {umskipti: $ animateSpeed all eas-in-out; }
Það sem við viljum gerast núna er að þegar þú sveima yfir vinstri skjánum verður bekk bætt við þann hluta með JavaScript (sem við munum skrifa í seinna skrefi). Þegar þessum flokki er bætt við, teygir þessi skjár sig að hverri breidd breytunnar sem við tilgreindum - sem verður 75% og þá verður hægri hlið stillt á minni breiddarbreytuna (25%).
.hover-left. vinstri {breidd: $ sveima-breidd; } .hover-left .right {width: $ small-width; } .hover-left .right: á undan {z-index: 2; }
Þetta virkar nákvæmlega það sama og vinstra megin, þar sem nýr flokkur verður bætt við músar sveima með JavaScript, og hægri skjárinn teygir sig í samræmi við það. Við verðum líka að ganga úr skugga um að z-vísitala er stillt á 2 svo CTA hnappurinn verður meira áberandi.
.hover-right .rétt {breidd: $ sveima-breidd; } .hover-right. vinstri {breidd: $ lítil breidd; } .hover-right. vinstri: fyrir {z-index: 2; }
10. Færa í JavaScript
Við munum nota snertingu af vanillu JavaScript til að hjálpa okkur að bæta við og fjarlægja CSS námskeið og við munum einnig nota nýja ES6 eiginleikana. Það fyrsta sem við þurfum að gera er að lýsa yfir stöðugum breytum.
Vegna þess að við munum nota skjal oftar en einu sinni setjum við fasta breytu sem kallast dok og geymdu skjalið innan þess svo við getum haft orðið ‘skjal’ ágætt og stutt.
const doc = skjal;
Nú þurfum við að setja þrjá fasta í viðbót sem geyma .rétt, vinstri og .ílát valmenn. Ástæðan fyrir því að við notum fasta er vegna þess að við vitum að við viljum ekki breyta gildi þessara, svo það er skynsamlegt að nota fasta. Með þessum nú stilltum getum við haldið áfram og bætt við músaviðburði við þá.
const right = doc.querySelector (". réttur"); const vinstri = doc.querySelector (". vinstri"); const gámur = doc.querySelector (". gámur");
Notkun vinstri stöðugri breytu sem við lýstum yfir í síðasta skrefi, getum við nú bætt viðburðarhlustanda við hana. Þessi atburður verður músarmaður atburði og í stað þess að nota afturhvarf aðgerð munum við nota annan ES6 eiginleika sem kallast Aðgerðir örvar ’(() =>).
// bætir flokki við gámaþáttinn á sveima vinstri.addEventListener ("músamiðstöð", () => {gámur.classList.add ("sveima til vinstri");});
11. Bæta við og fjarlægja bekk
Í síðasta skrefi bætti viðburðarhlustandi okkar við a músarmaður atburður sem miðar á aðal gámaflokkinn og bætir við nýjum flokki sem kallast sveima-vinstri til vinstri hlutans. Með þessu kallaða bætt við verðum við nú að fjarlægja það þegar við sveima af því. Við gerum þetta með því að nota mouseleave atburður og fjarlægja () aðferð.
// fjarlægir bekkinn sem bætt var við á sveima vinstri.addEventListener („mouseleave“, () => {container.classList.remove („sveima til vinstri“);});
Hingað til höfum við gert allt á vinstri skjánum. Nú munum við klára JavaScript og bæta við og fjarlægja námskeið á hægri hlutanum. Aftur höfum við notað setningafræði örvaraðgerðarinnar hér til að halda öllu útlit og snyrtilegt.
right.addEventListener ("mouseenter", () => {container.classList.add ("sveima-hægri");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("sveima til hægri");});
12. Gerðu það móttækilegt
Ekkert verkefni - sama hversu stórt eða lítið - ætti að komast hjá því að vera móttækilegur. Svo í þessu skrefi munum við bæta við margmiðlunarfyrirspurnum við CSS okkar og gera þetta litla verkefni eins aðlagandi að farsímum og við getum. Það er þess virði að skoða upprunalegu CodePen til að sjá hvernig þetta virkar.
@media (hámarksbreidd: 800 pixlar) {h1 {leturstærð: 2rem; } .hnappur {breidd: 12rem; }
Við höfum gengið úr skugga um að þegar breidd síðunnar okkar verður komin niður í 800 pixla muni leturgerð og hnappar minnka. Svo til að klára hlutina viljum við miða á hæðina líka og ganga úr skugga um að hnapparnir hreyfist niður á síðunni þegar blaðsíðuhæð fer undir 700 pixla.
@media (hámarkshæð: 700 pixlar) {. hnappur {efst: 70%; }}
Viltu vista síðurnar þínar? Flytja þær út sem PDF skjöl og vista þær í öruggri skýjageymslu.
Viðburður um vefhönnun Búðu til London snýr aftur 19. - 21. september 2018 og býður upp á þétta dagskrá af leiðandi ræðumönnum, heilum degi námskeiða og dýrmætum netmöguleikum - ekki missa af því. Fáðu þér Generate miðann núna.
Þessi grein var upphaflega birt í net tímaritinu 305. tölublað. Gerast áskrifandi núna.
