Sisu
- 01. Pange end paika
- 02. Lõpeta HTML
- 03. Avastage Sassi muutujaid
- 04. Kohandage keha stiili
- 05. Stiili jaotiste pealkirjad
- 06. Tehke CTA-d silma paistma
- 07. Määrake konteineri taust ja ekraanid
- 08. Lisage taustapilte
- 09. Lisage üleminekud ja hõljutusefektid
- 10. Liikuge JavaScripti
- 11. Lisage ja eemaldage klass
- 12. Muutke see reageerivaks
Teie sihtleht on teie veebisaidi paigutuse oluline element. See on esimene reaalne võimalus, mida peate oma äri või toodet müüma, nii et selle disain on võtmetähtsusega. Sihtlehed on kavandatud ühe kindla eesmärgiga, mida nimetatakse tegevusele kutsumiseks (CTA). Värvide ja piltide kasutamine üleskutsete ja kasutajakogemuse täiendamiseks on hädavajalik.
- Selle õpetuse leiate tööjuhendist CodePen
Selles õpetuses tutvustame, kuidas luua väljamõeldud moebrändile kaasahaarav sihtleht. See keskendub jagatud ekraaniga kujundusele, kus on suured pildid ja animeeritud üleminekud, mis juhtuvad hõljumisel.Sellel lehel on kaks selget tegevusele kutsuvat nuppu ja me kasutame kujundamiseks HTML-i, Sassi ja puudutust vanilje JavaScripti, mis kasutab ES6 süntaksit (pidage meeles, et veenduge, et teie veebimajutus sobib teie veebisaidi vajadustega). Liiga keeruline? Looge veebisait ilma koodi vajada, proovige lihtsat veebisaidi koostajat.
01. Pange end paika
Kui kasutate CodePeni, veenduge, et pliiatsi seadetes oleks CSS-i väärtuseks seatud SCSS. Selle muudatuse saate teha, klõpsates vahekaardil Seaded, valides CSS ja muutes rippmenüü suvandites CSS-i eeltöötleja SCSS-iks.
Siis saame hakata lisama oma HTML-i. Pakime konteineriklassi jaotise „vasak” ja „paremale”, kusjuures mõlemale jaotisele antakse klass „ekraan”.
div> jaotis> / jaotis> jagu> / jaotis> / div>
02. Lõpeta HTML
HTML-i lõplikuks lisamiseks lisame igale jaotisele pealkirja, kasutades h1 silt. Selle alla peame lisama nupu, mis viiks teisele lehele, kui see oleks reaalse maailma projekt. Anname sellele klassi nuppu et asjad oleksid kenad ja lihtsad.
div> jaotis> h1> Meeste mood / h1> nupp> a href = "#"> Lisateave / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Learn Veel / a> / nupp> / jaotis>
03. Avastage Sassi muutujaid
Üks asi, mida me kõik Sassi juures armastame, on muutujate kasutamine. Kuigi kohalikud CSS-muutujad saavad rohkem tuge, hoiame Sassi kasutades asjad turvaliselt. Me paneme need oma tippu .scssja saate valida mis tahes värve, mida soovite, kuid kasutades rgba väärtused annavad meile rohkem paindlikkust.
/ * * Muutujad * * / $ container-BgColor: # 444; $ left-bgVärv: rgba (136, 226, 247, 0,7); $ vasaknupp-hõljuk: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ parema nupuga hõljumine: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ väike laius: 25%; $ animateSpeed: 1000 ms;
04. Kohandage keha stiili
Esiteks kustutame kogu vaikimisi täidise ja veerise ning määrame seejärel fondipere väärtuseks Open Sans. See mõjutab ainult nuppu, seega pole vahet, millist fonti me kasutame. Siis määrame laiuse ja kõrguse väärtuseks 100% ja veenduge, et kõik, mis X-teljel üle voolab, peidetaks.
HTML, body {polster: 0; varu: 0; font-family: ’Open Sans’, sans-serif; laius: 100%; kõrgus: 100%; ülevool-x: peidetud; }
05. Stiili jaotiste pealkirjad
On aeg valida jaotiste pealkirjade jaoks Google'i font - oleme valinud Playfair Display'i. Siis kasutades tõlkidaX saame veenduda, et jaotiste pealkirjad on alati keskel X-teljel.
h1 {font-size: 5rem; värv: #fff; positsioon: absoluutne; vasakul: 50%; ülaosa: 20%; teisendus: translateX (-50%); tühik: nowrap; font-family: ’Playfair Display’, serif; }
06. Tehke CTA-d silma paistma
Meie nupud toimivad kui üleskutsed tegevusele, nii et need peavad olema suured, julged ja paigutatud sinna, kus neid on lihtne klõpsata. Mõlemal nupul on valge ääris ja huvitav üleminekuefekt. Mõlema nupu vaikestiilid on samad, kuid me muudame nende värve hõljutades.
.nupp {display: block; positsioon: absoluutne; vasakul: 50%; ülaosa: 50%; kõrgus: 2,6rem; polsterdus: 1.2rem; laius: 15rem; teksti joondamine: keskel; värvus: valge; ääris: 3px tahke #fff; piiri raadius: 4px; fondi kaal: 600; teksti teisendamine: suurtähed; teksti kaunistamine: puudub; teisendus: translateX (-50%); üleminek: kõik .2s;
Peamistel nuppudel on kena lihtne hõljutusefekt ja värvi jaoks kasutame meie määratud Sass-muutujaid, mis on lehe taustaga sarnase värviga.
.screen.left .button: hõljutage kursorit {background-color: $ left-button-hover; äärisvärv: $ vasak-nupp-kursor; } .screen.right .button: hõljutage kursorit {background-color: $ right-button-hover; äärisvärv: $ parempoolne nupp-kursor;
07. Määrake konteineri taust ja ekraanid
Konteinerklass toimib meie lehe mähisena ja määrame selle positsiooni suhteliseks lihtsalt seetõttu, et soovime paigutada ekraanid absoluutsesse asendisse. Anname konteinerile vaikimisi taustavärvi, kuid seda muidugi ei näe, kuna määrame mõlemale ekraanitaustale erinevad värvid.
.konteiner {asend: sugulane; laius: 100%; kõrgus: 100%; taust: $ container-BgColor; .ekraan {asend: absoluutne; laius: 50%; kõrgus: 100%; ülevool: varjatud; }}
08. Lisage taustapilte
Nii vasakul kui ka paremal jaotises kuvatakse pilt ja autoritasuta varude pilte leiate veebisaitidelt nagu Unsplash, Pixabay või Pexels (mida olen selles õpetuses kasutanud). Asjade lihtsustamiseks olen kasutanud tasuta piltide hostimise ja jagamise teenust imgbb, mille saame oma CSS-is linkida.
.screen.left {left: 0; taust: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) keskel pole kordust; tausta suurus: kate; &: enne {positsiooni: absoluutne; sisu: ""; laius: 100%; kõrgus: 100%; taust: $ left-bgColor; }}
Lehe paremas servas kuvatakse ka taustpildi, kasutades imgbb-i ja me määrame taustavärvi roosaks. Jällegi määrasime tausta suuruseks kate. See võimaldab meil katta kogu sisaldava elemendi, mis meie puhul on .ekraan klassi.
.screen.right {right: 0; taust: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) keskel pole kordust; tausta suurus: kate; &: enne {positsiooni: absoluutne; sisu: ""; laius: 100%; kõrgus: 100%; taust: $ right-bgColor; }}
09. Lisage üleminekud ja hõljutusefektid
Mõlemal ekraanil hõljuva efekti animatsiooni kiirust kontrollib üleminek, mis hoiab meie muutuja väärtust $ animateSpeed, mis on 1000 ms (üks sekund). Seejärel lõpetame sellega, et anname animatsioonile mõningast kergendust, mis on lihtsus sisse ja välja, mis aitab meil sujuvamat animatsiooni anda.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {üleminek: $ animateSpeed all-in-out; }
Mis me tahame praegu juhtuda, on see, et kui hõljutate kursorit vasaku ekraani kohal, lisatakse sellele sektsioonile JavaScripti abil klass (mille kirjutame hilisemas etapis). Kui see klass lisatakse, venib see ekraan igale meie määratud muutuja laiusele - see on 75% ja seejärel seatakse paremale küljele väiksem muutuja (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .kursor-vasakpoolne .parem: enne {z-indeks: 2; }
See töötab täpselt samamoodi nagu vasak külg, kus JavaScripti abil lisatakse hiirekursorile uus klass ja vastavalt sirutub parem ekraan. Samuti peame veenduma, et z-indeks on seatud väärtusele 2 nii et CTA nupp muutub silmatorkavamaks.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .kursor-parem. vasakule: enne {z-indeks: 2; }
10. Liikuge JavaScripti
Kasutame CSS-klasside lisamiseks ja eemaldamiseks vanilje JavaScripti ning kasutame ka mõningaid uusi ES6-funktsioone. Esimene asi, mida peame tegema, on deklareerida mõned muutujad.
Sest me kasutame dokument mitu korda määrame konstantse muutuja nimega doc ja salvestage dokument sellesse, et saaksime hoida sõna „dokument” kena ja lühikese.
const doc = dokument;
Nüüd peame määrama veel kolm konstandit, mis salvestavad .parem, . vasakule ja .konteiner selektorid. Konstante kasutame seetõttu, et me teame, et me ei soovi nende väärtust muuta, seega on konstantide kasutamine mõttekas. Kui need on nüüd seatud, võime jätkata ja lisada neile mõned hiire sündmused.
const õigus = doc.querySelector (". õige"); const vasakule = doc.querySelector (". vasakule"); const konteiner = doc.querySelector (". konteiner");
Kasutades vasakule püsimuutuja, mille deklareerisime viimases etapis, saame nüüd sellele lisada sündmuste kuulaja. See sündmus saab olema hiirekeskus sündmus ja tagasihelistamisfunktsiooni kasutamise asemel kasutame teist ES6 funktsiooni nimega Noolefunktsioonid ’(() =>).
// lisab klassi konteineri elemendile kursori vasakul.addEventListener ("hiirekeskus", () => {container.classList.add ("hõljuk-vasak");});
11. Lisage ja eemaldage klass
Viimases etapis lisas meie ürituste kuulaja a hiirekeskus sündmus, mis on suunatud peamisele konteinerklassile ja lisab uue klassi nimega hõljuk-vasak vasakule sektsiooni elemendile. Kui see nimi on lisatud, peame selle nüüd kursorilt eemaldades eemaldama. Teeme seda, kasutades vahuvein sündmus ja .remove () meetod.
// eemaldab kursori, mis lisati kursoril left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Siiani oleme kõik teinud vasakpoolsel ekraanil. Nüüd lõpetame JavaScripti ning lisame ja eemaldame klassid parempoolsetest jaotise elementidest. Jällegi oleme siin kasutanud noolefunktsiooni süntaksit, et kõik näeks välja kena ja korras.
right.addEventListener ("hiirekeskus", () => {container.classList.add ("hõljumine paremale";}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Muutke see reageerivaks
Ükski projekt - ükskõik kui suur või väike - ei tohiks vältida reageerimisvõimet. Niisiis lisame selles etapis mõned CSS-le meediumipäringud ja muudame selle väikese projekti nii hästi kui võimalik mobiilseadmetega kohanduvaks. Selle toimimiseks tasub tutvuda originaalkoodiga CodePen.
@media (max-width: 800px) {h1 {font-size: 2rem; } .nupp {width: 12rem; }
Oleme veendunud, et kui meie lehe laius on 800 pikslit, väheneb fondi ja nuppude suurus. Asjade lõpetamiseks tahame suunata ka kõrguse ja veenduda, et meie nupud liiguksid lehel alla, kui lehe kõrgus jääb alla 700 piksli.
@media (max-height: 700px) {.nupp {top: 70%; }}
Kas soovite oma lehti salvestada? Eksportige need PDF-failidena ja salvestage turvalisse pilvemällu.
Veebikujundusüritus Genereeri London naaseb 19.-21. septembril 2018, pakkudes pakutavat tööstusharu juhtivate esinejate kava, terve päeva töötubasid ja väärtuslikke võrgustamisvõimalusi - ärge jätke seda kasutamata. Hankige oma Generate pilet kohe.
See artikkel ilmus algselt netiajakirjas väljaanne 305. Telli nüüd.
