Turinys
- 01. Susitvarkykite
- 02. Užbaikite HTML
- 03. Naršykite „Sass“ kintamuosius
- 04. Sureguliuokite kūno stilių
- 05. Sukurkite skyrių pavadinimus
- 06. Išskirkite CTA
- 07. Nustatykite konteinerio foną ir ekranus
- 08. Pridėkite fono paveikslėlių
- 09. Pridėkite perėjimų ir pelės žymeklio efektų
- 10. Perkelkite į „JavaScript“
- 11. Pridėkite ir pašalinkite klasę
- 12. Padarykite tai jautrus
Nukreipimo puslapis yra labai svarbus jūsų svetainės išdėstymo elementas. Tai yra pirmoji reali galimybė pristatyti savo verslą ar parduodamą produktą, todėl jo dizainas yra pagrindinis. Nukreipimo puslapiai sukurti su vienu tiksliniu tikslu, vadinamu raginimu veikti (CTA). Spalvų ir vaizdų naudojimas norint papildyti raginimus veikti ir vartotojo patirtį yra būtinas.
- Šią pamoką ieškokite veikiančiame „CodePen“
Šioje pamokoje apžvelgsime, kaip sukurti patrauklų išgalvoto mados prekės ženklo nukreipimo puslapį. Jis bus sutelktas į padalinto ekrano dizainą su dideliais vaizdais ir animaciniais perėjimais, kurie vyksta ant svyravimo.Šiame puslapyje bus du aiškūs raginimo veikti mygtukai, o stiliui naudosime HTML, „Sass“ ir šiek tiek vanilinės „JavaScript“, kuri naudoja ES6 sintaksę (nepamirškite įsitikinti, kad jūsų žiniatinklio priegloba atitinka jūsų svetainės poreikius). Pernelyg sudėtinga? Sukurkite svetainę nereikalaudami kodo, išbandykite paprastą svetainių kūrimo priemonę.
01. Susitvarkykite
Jei naudojate „CodePen“, rašiklio nustatymuose įsitikinkite, kad CSS nustatytas kaip „SCSS“. Šį pakeitimą galite atlikti spustelėję skirtuką nustatymai, pasirinkę „CSS“ ir išskleidžiamosiose parinktyse pakeisdami CSS pirminį procesorių į SCSS.
Tada mes galime pradėti pridėti savo HTML. Konteinerių klasėje apvyniosime skyrių, vadinamą „kairė“, ir skyrių, pavadinimu „dešinė“, o abiems skyriams bus suteikta „ekrano“ klasė.
div> skyrius> / skyrius> skyrius> / skyrius> / div>
02. Užbaikite HTML
Norėdami baigti kurti HTML, kiekvienam skyriui pridėsime pavadinimą naudodami h1 žyma. Po tuo turėsime pridėti mygtuką, kuris nukreiptų į kitą puslapį, jei tai būtų realaus pasaulio projektas. Mes suteiksime tai mygtuką kad viskas būtų gražu ir paprasta.
div> skyrius> h1> Vyriška mada / h1> mygtukas> a href = "#"> Sužinokite daugiau / a> / mygtukas> / skyrius> skyrius> h1> Moterų mada / h1> mygtukas> a href = "#"> Sužinokite Daugiau / a> / mygtukas> / skyrius>
03. Naršykite „Sass“ kintamuosius
Vienas dalykas, kurį mums visiems patinka „Sass“, yra kintamųjų naudojimas. Nors vietiniai CSS kintamieji sulaukia daugiau palaikymo, naudodami „Sass“ viską saugosime. Mes įdėsime tai į savo viršų .scssir galite pasirinkti bet kokias spalvas, kurias norite, bet naudodami rgba vertybės suteiks mums daugiau lankstumo.
/ * * Kintamieji * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ kairysis mygtuko užvedimas: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ pelės klavišas dešiniuoju pelės mygtuku: rgba (255, 140, 219, 0,7); $ svyravimo plotis: 75%; $ mažo pločio: 25%; $ animateSpeed: 1000ms;
04. Sureguliuokite kūno stilių
Pirma, mes išvalysime visą numatytąjį užpildymą ir paraštę kūnui, tada nustatysime šriftų šeimą į „Open Sans“. Tai paveiks tik mygtuką, todėl nėra labai svarbu, kokį šriftą naudojame. Tada nustatysime plotį ir aukštį 100% ir įsitikinkite, kad viskas, kas persipildo X ašyje, bus paslėpta.
html, body {padding: 0; paraštė: 0; šriftų šeima: „Open Sans“, sans-serif; plotis: 100%; aukštis: 100%; overflow-x: paslėpta; }
05. Sukurkite skyrių pavadinimus
Laikas pasirinkti „Google“ šriftą skyrių pavadinimams - pasirinkome „Playfair Display“. Tada naudojant verstiX galime įsitikinti, kad sekcijų pavadinimai visada sutelkti į X ašį.
h1 {font-size: 5rem; spalva: #fff; pozicija: absoliuti; liko: 50%; viršuje: 20%; transformuoti: translateX (-50%); white-space: nowrap; font-family: „Playfair Display“, serifas; }
06. Išskirkite CTA
Mūsų mygtukai veiks kaip raginimai veikti, todėl jie turi būti dideli, drąsūs ir išdėstyti ten, kur juos lengva spustelėti. Abu mygtukai turės baltą kraštinę ir įdomų perėjimo efektą. Numatytieji abiejų mygtukų stiliai bus vienodi, tačiau mes pakeisime jų spalvas pakibę.
.button {display: block; pozicija: absoliuti; liko: 50%; viršuje: 50%; aukštis: 2.6rem; padding-top: 1.2rem; plotis: 15rem; text-align: centre; spalva: balta; kraštas: 3px solid #fff; krašto spindulys: 4px; šrifto svoris: 600; teksto transformacija: didžiosios raidės; teksto dekoravimas: nėra; transformuoti: translateX (-50%); perėjimas: visi .2s;
Pagrindiniai mygtukai turės puikų paprastą pelės žymeklio efektą, o mes naudosime „Sass“ kintamuosius, kuriuos nurodėme spalvai, kurios spalva bus panaši į puslapio foną.
.screen.left .button: užveskite pelės žymeklį {background-color: $ left-button-hover; border-color: $ kairysis mygtukas užveskite pelę; } .screen.right .button: užveskite pelės žymeklį {background-color: $ right-button-hover; border-color: $ dešiniojo mygtuko užvedimas;
07. Nustatykite konteinerio foną ir ekranus
Konteinerių klasė veiks kaip mūsų puslapio įvyniojimo priemonė, o mes nustatysime santykinę padėtį vien todėl, kad norime ekranus išdėstyti absoliučiai. Konteineriui suteiksime numatytąją fono spalvą, tačiau, žinoma, to nebus matyti, nes abiem ekrano fonams nustatysime skirtingas spalvas.
.konteineris {padėtis: giminaitis; plotis: 100%; aukštis: 100%; fonas: $ container-BgColor; . ekranas {pozicija: absoliutus; plotis: 50%; aukštis: 100%; perteklius paslėptas; }}
08. Pridėkite fono paveikslėlių
Kairėje ir dešinėje skiltyse bus rodomas vaizdas, be to, galite rasti nemokamų atsarginių vaizdų iš tokių svetainių kaip „Unsplash“, „Pixabay“ ar „Pexels“ (kuriuos naudojau šioje pamokoje). Kad būtų lengviau, pasinaudojau nemokama vaizdų talpinimo ir dalijimosi paslauga, vadinama „imgbb“, su kuria galime susieti savo CSS.
.screen.left {kairė: 0; fonas: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centro centre nėra pakartojimų; fono dydis: viršelis; &: prieš {pozicija: absoliutus; turinys: ""; plotis: 100%; aukštis: 100%; fonas: $ left-bgColor; }}
Dešinėje puslapio pusėje taip pat bus rodomas fono paveikslėlis naudojant imgbb, o fono spalvą nustatysime rožinę. Vėl nustatėme fono dydį į viršelis. Tai leis mums aprėpti visą turintį elementą, kuris mūsų atveju yra . ekranas klasė.
.screen.right {right: 0; fonas: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centro centre nėra pakartojimų; fono dydis: viršelis; &: prieš {pozicija: absoliutus; turinys: ""; plotis: 100%; aukštis: 100%; fonas: $ right-bgColor; }}
09. Pridėkite perėjimų ir pelės žymeklio efektų
Animacijos greitis, kad mūsų pelės žymeklis būtų rodomas abiejuose ekranuose, bus valdomas perėjimu, išlaikančiu mūsų kintamojo vertę $ animateSpeed, kuris yra 1000 ms (viena sekundė). Tada mes užbaigsime animaciją šiek tiek palengvindami, o tai yra lengvas įėjimas ir išėjimas, kuris padės mums suteikti sklandesnę animaciją.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {perėjimas: $ animateSpeed all-out-out; }
Mes norime atsitikti dabar, kai užvedus pelės žymeklį virš kairiojo ekrano, naudojant tą „JavaScript“ (tai parašysime vėliau) prie tos sekcijos bus pridėta klasė. Pridėjus šią klasę, tas ekranas išsities iki bet kokio nurodyto kintamojo pločio - kuris bus 75%, o tada dešinioji pusė bus nustatyta į mažesnio pločio kintamąjį (25%).
.hover-left .left {width: $ hover-width; } .veskite kairįjį .right {width: $ small-width; } .veskite pelės žymeklį kairėn .dešinė: prieš {z-index: 2; }
Tai veikia lygiai taip pat, kaip kairėje pusėje, kur naudojant pelės žymeklį naudojant „JavaScript“ bus pridėta nauja klasė, o dešinysis ekranas atitinkamai išsities. Mes taip pat turime įsitikinti, kad z indeksas yra nustatytas į 2 todėl raginimo veikti mygtukas tampa vis ryškesnis.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-dešinėje .kairė: prieš {z-index: 2; }
10. Perkelkite į „JavaScript“
Mes naudosime vanilės „JavaScript“ palietimą, kad padėtų mums pridėti ir pašalinti CSS klases, taip pat naudosime kai kurias naujas ES6 funkcijas. Pirmas dalykas, kurį turime padaryti, yra paskelbti kai kuriuos pastovius kintamuosius.
Nes mes naudosimės dokumentas daugiau nei vieną kartą nustatysime pastovų kintamąjį, vadinamą doc ir saugokite dokumentą, kad žodis „dokumentas“ būtų trumpas ir trumpas.
const doc = dokumentas;
Dabar turime nustatyti dar tris konstantas, kurios išsaugos .teisingai, .kairė ir .konteineris selektoriai. Priežastis, dėl kurios naudojame konstantas, yra ta, kad žinome, kad nenorime keisti jų vertės, todėl naudoti konstantas yra prasminga. Turėdami šiuos nustatymus, galime tęsti ir pridėti prie jų keletą pelės įvykių.
const dešinė = doc.querySelector (". teisė"); const kairėje = doc.querySelector (". kairėje"); const container = doc.querySelector (". konteineris");
Naudojant paliko pastovus kintamasis, kurį deklaravome paskutiniame etape, dabar galime prie jo pridėti įvykių klausytoją. Šis renginys bus pele įvykį ir užuot naudoję atgalinio skambinimo funkciją, naudosime dar vieną ES6 funkciją, vadinamą Rodyklių funkcijos ’(() =>).
// prideda klasę prie konteinerio elemento, esančio užvedus kairę kairę.addEventListener ("mouseenter", () => {container.classList.add ("užveskite kairę";});
11. Pridėkite ir pašalinkite klasę
Paskutiniame etape mūsų renginių klausytojas pridėjo a pele įvykis, nukreiptas į pagrindinę konteinerių klasę ir pridedantis naują vadinamą klasę užveskite kairę į kairįjį sekcijos elementą. Pridėjus šį vadinamąjį pavadinimą, dabar turime jį pašalinti, kai užveskite pelės žymeklį ant jo. Tai padarysime naudodami pelėsiai įvykis ir . pašalinti () metodas.
// pašalina klasę, kuri buvo pridėta užvedus pelės žymeklį left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Iki šiol viską darėme kairiajame ekrane. Dabar mes baigsime „JavaScript“ ir pridėsime ir pašalinsime klases dešiniojo skyriaus elementuose. Čia vėl naudojome rodyklių funkcijos sintaksę, kad viskas atrodytų gražiai ir tvarkingai.
right.addEventListener ("mouseenter", () => {container.classList.add ("pelės žymeklis dešinėje";}); right.addEventListener ("mouseleave", () => {container.classList.remove ("užveskite dešinę";});
12. Padarykite tai jautrus
Nė vienas projektas, kad ir koks didelis ar mažas, neturėtų vengti reaguoti. Taigi šiame žingsnyje mes pridėsime keletą žiniasklaidos užklausų prie savo CSS ir padarysime šį mažą projektą kuo puikiausiai pritaikomą mobiliesiems įrenginiams. Verta patikrinti originalų „CodePen“, kad sužinotumėte, kaip tai veikia.
@media (max-width: 800px) {h1 {font-size: 2rem; }. mygtukas {plotis: 12rem; }
Įsitikinome, kad kai mūsų puslapio plotis sumažės iki 800 taškų, šriftas ir mygtukai sumažės. Taigi, norėdami užbaigti reikalus, taip pat norime nukreipti aukštį ir įsitikinti, kad mygtukai juda žemyn puslapyje, kai puslapio aukštis tampa mažesnis nei 700 taškų.
@media (max-height: 700px) {. mygtukas {viršuje: 70%; }}
Norite išsaugoti savo puslapius? Eksportuokite juos kaip PDF ir išsaugokite saugioje debesies saugykloje.
Interneto dizaino renginys Generuoti Londoną grįžta 2018 m. rugsėjo 19–21 d., siūlant supakuotą lyderiaujančių pranešėjų tvarkaraštį, visą dieną trunkančių seminarų ir vertingų tinklų kūrimo galimybių - nepraleiskite to. Gaukite „Generate“ bilietą dabar.
Šis straipsnis iš pradžių buvo paskelbtas internetiniame žurnale 305 leidimas. Prenumeruokite Dabar.
