Vsebina
- 01. Pripravite se
- 02. Dokončajte HTML
- 03. Raziščite spremenljivke Sass
- 04. Prilagodite obliko telesa
- 05. Oblikujte naslove odsekov
- 06. Naj CTA-ji izstopajo
- 07. Nastavite ozadje in zaslone posode
- 08. Dodajte slike za ozadje
- 09. Dodajte prehode in učinke lebdenja
- 10. Premaknite se v JavaScript
- 11. Dodajte in odstranite predavanje
- 12. Naj bo odziven
Vaša ciljna stran je ključnega pomena pri postavitvi vašega spletnega mesta. To je prva resnična priložnost za predstavitev vašega podjetja ali izdelka, ki ga prodajate, zato je njegova zasnova ključna. Ciljne strani so oblikovane z enim osredotočenim ciljem, znanim kot poziv k dejanju (CTA). Uporaba barv in slik za dopolnitev pozivov k dejanju in uporabniške izkušnje je nujna.
- Glejte delujoči CodePen za to vadnico
V tej vadnici se bomo sprehodili po tem, kako sestaviti privlačno ciljno stran za izmišljeno modno znamko. Osredotočeno bo na oblikovanje razdeljenega zaslona z velikimi slikami in animiranimi prehodi, ki se zgodijo pri lebdenju.Ta stran bo imela dva jasna gumba za poziv k dejanju, za oblikovanje pa bomo uporabili HTML, Sass in kanček vanilijevega JavaScripta, ki uporablja sintakso ES6 (ne pozabite zagotoviti, da vaše spletno gostovanje ustreza vašim potrebam). Preveč zapleten? Ustvarite spletno mesto brez kode, poskusite s preprostim graditeljem spletnih strani.
01. Pripravite se
Če uporabljate CodePen, v nastavitvah pisala preverite, ali je CSS nastavljen na 'SCSS'. To spremembo lahko izvedete tako, da kliknete zavihek z nastavitvami, izberete 'CSS' in v spustnih možnostih spremenite CSS Preprocessor v SCSS.
Nato lahko začnemo dodajati v naš HTML. Razdelek z imenom "levo" in odsek, imenovan "desno", bomo zavili v razred vsebnika, pri čemer bosta oba oddelka dobila razred "zaslon".
div> section> / section> section> / section> / div>
02. Dokončajte HTML
Za dokončanje našega HTML-ja bomo dodali naslov za vsak odsek z uporabo h1 oznaka. Spodaj bomo morali dodati gumb, ki bi se povezal na drugo stran, če bi bil to resnični projekt. Temu bomo dali razred gumb da ostanejo stvari lepe in preproste.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Več o tem / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Learn Več / a> / gumb> / section>
03. Raziščite spremenljivke Sass
Vse, kar imamo pri Sassu radi, je uporaba spremenljivk. Čeprav domače spremenljivke CSS dobivajo več podpore, bomo z uporabo Sass poskrbeli, da bodo stvari varne. Te bomo postavili na vrh našega .scss, in lahko izberete poljubne barve, vendar z uporabo rgba vrednote nam bodo omogočile večjo prilagodljivost.
/ * * Spremenljivke * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ levi gumb-lebdi: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ desni gumb-lebdi: rgba (255, 140, 219, 0,7); $ hover-width: 75%; $ majhna širina: 25%; $ animateSpeed: 1000ms;
04. Prilagodite obliko telesa
Najprej bomo počistili vsa privzeta oblazinjenja in robove telesa, nato pa družino pisav nastavili na Open Sans. To bo vplivalo samo na gumb, zato ni preveč pomembno, katero pisavo uporabimo. Nato nastavimo širino in višino 100% in poskrbite, da se vse, kar se prelije na osi X, skrije.
html, body {oblazinjenje: 0; marža: 0; družina pisav: 'Open Sans', sans-serif; širina: 100%; višina: 100%; overflow-x: skrit; }
05. Oblikujte naslove odsekov
Čas je, da za naslove razdelkov izberemo Googlovo pisavo - izbrali smo Playfair Display. Nato uporabite translateX lahko zagotovimo, da so naslovi odsekov vedno centrirani na osi X.
h1 {velikost pisave: 5rem; barva: #fff; položaj: absolutno; levo: 50%; zgoraj: 20%; pretvorba: translateX (-50%); presledek: zdaj; družina pisav: 'Playfair Display', serif; }
06. Naj CTA-ji izstopajo
Naši gumbi bodo delovali kot pozivi k akciji, zato morajo biti ti veliki, drzni in postavljeni tako, da jih je enostavno klikniti. Oba gumba bosta imela belo obrobo in zanimiv učinek prehoda. Privzeti slogi za oba gumba bodo enaki, njihove barve pa bomo spremenili ob lebdenju.
.button {zaslon: blok; položaj: absolutno; levo: 50%; zgoraj: 50%; višina: 2.6rem; oblazinjenje: 1.2rem; širina: 15rem; poravnava besedila: sredina; barva: bela; obroba: 3px solid #fff; polmer obrobe: 4 slikovne pike; teža pisave: 600; preoblikovanje besedila: velika črka; dekoracija besedila: nobena; pretvorba: translateX (-50%); prehod: vse .2s;
Glavni gumbi bodo imeli prijeten učinek lebdenja in uporabili bomo spremenljivke Sass, ki smo jih določili za barvo, ki bo podobna barvi ozadja strani.
.screen.left .button: hover {barva ozadja: $ left-button-hover; barva obrobe: $ levi gumb-lebdi; } .screen.right .button: hover {background-color: $ right-button-hover; barva obrobe: $ desni gumb-lebdi;
07. Nastavite ozadje in zaslone posode
Razred vsebnika bo deloval kot ovitek strani in položaj tega bomo nastavili na relativni, preprosto zato, ker želimo zaslone postaviti v absolutno pozicioniranje. Vsebniku bomo dali privzeto barvo ozadja, vendar tega seveda ne bomo videli, ker bomo za oba ozadja zaslona nastavili različne barve.
.container {položaj: relativni; širina: 100%; višina: 100%; ozadje: $ container-BgColor; .screen {položaj: absolutno; širina: 50%; višina: 100%; preliv: skrit; }}
08. Dodajte slike za ozadje
V levem in desnem odseku bo prikazana slika, na spletnih mestih, kot so Unsplash, Pixabay ali Pexels (ki sem jih uporabil v tej vadnici), pa lahko najdete slike brez licenčnin. Da bi stvari olajšali, sem uporabil brezplačno storitev gostovanja in izmenjave slik, imenovano imgbb, na katero se lahko povežemo v našem CSS-ju.
.screen.left {levo: 0; ozadje: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center brez ponovitve; velikost ozadja: naslovnica; &: pred {položaj: absolutno; vsebina: ""; širina: 100%; višina: 100%; ozadje: $ left-bgColor; }}
Na desni strani strani bo prikazana tudi slika ozadja z uporabo imgbb, barvo ozadja pa bomo nastavili na roza. Spet smo nastavili velikost ozadja na pokrov. To nam bo omogočilo, da pokrijemo celoten element, ki vsebuje, kar je v našem primeru .screen razred.
.screen.right {desno: 0; ozadje: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center brez ponovitve; velikost ozadja: naslovnica; &: pred {položaj: absolutno; vsebina: ""; širina: 100%; višina: 100%; ozadje: $ right-bgColor; }}
09. Dodajte prehode in učinke lebdenja
Hitrost animacije za učinek lebdenja na obeh zaslonih bo nadzorovana s prehodom, ki vsebuje vrednost naše spremenljivke $ animateSpeed, kar je 1000 ms (ena sekunda). Nato bomo končali z omogočanjem animacije, kar je enostavnost vstopa in izstopanja, ki nam bo pomagala do bolj gladke animacije.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {prehod: $ animateSpeed vse sprostitev; }
Zdaj se želimo zgoditi, da bo, ko premaknete miškin kazalec nad levi zaslon, temu odseku dodan razred z uporabo JavaScripta (kar bomo zapisali kasneje). Ko je ta razred dodan, se bo zaslon raztegnil na katero koli širino spremenljivke, ki smo jo določili - kar bo 75%, nato pa bo desna stran nastavljena na spremenljivko manjše širine (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: before {z-index: 2; }
To deluje popolnoma enako kot na levi strani, kjer bo ob premikanju miške z uporabo JavaScript dodan nov razred, desni zaslon pa se bo ustrezno raztegnil. Prav tako moramo zagotoviti, da z-indeks je nastavljeno na 2 tako gumb CTA postane bolj viden.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-desno .levo: pred {z-index: 2; }
10. Premaknite se v JavaScript
Za dodajanje in odstranjevanje razredov CSS bomo uporabili kanček vanilijevega JavaScripta, uporabili pa bomo tudi nekatere nove funkcije ES6. Prva stvar, ki jo moramo storiti, je razglasiti nekatere konstantne spremenljivke.
Ker bomo uporabljali dokument večkrat bomo nastavili konstantno spremenljivko imenovano doc in shranite dokument znotraj tega, da bomo lahko besedo „dokument“ ohranili lepo in kratko.
const doc = dokument;
Zdaj moramo nastaviti še tri konstante, ki bodo shranile .prav, .levo in .kontejner izbirniki. Razlog, da uporabljamo konstante, je, ker vemo, da ne želimo spreminjati vrednosti le-teh, zato je uporaba konstant smiselna. S temi nastavitvami lahko nadaljujemo in jim dodamo nekaj dogodkov z miško.
const desno = doc.querySelector (". desno"); const levo = doc.querySelector (". levo"); const container = doc.querySelector (". vsebnik");
Uporabljati levo konstantno spremenljivko, ki smo jo prijavili v zadnjem koraku, ji lahko zdaj dodamo poslušalec dogodka. Ta dogodek bo mišje središče dogodek in namesto funkcije povratnega klica bomo uporabili drugo imenovano funkcijo ES6 Funkcije puščice ’(() =>).
// elementu vsebnika na lebdenje left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");}) doda razred v element vsebnika;
11. Dodajte in odstranite predavanje
V zadnjem koraku je naš poslušalec dogodka dodal mišje središče dogodek, ki cilja na glavni razred vsebnika in doda nov razred z imenom lebdenje levo do levega elementa odseka. Ko je ta klic dodan, ga moramo zdaj odstraniti, ko lebdimo nad njim. To bomo storili z uporabo miški list dogodek in .Odstrani() metoda.
// odstrani razred, ki smo ga dodali lebdeči levi.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Do zdaj smo vse delali na levem zaslonu. Zdaj bomo dokončali JavaScript ter dodali in odstranili razrede na desnih delih elementov. Tudi tu smo uporabili sintakso funkcije puščice, da je vse videti lepo in urejeno.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Naj bo odziven
Noben projekt - ne glede na to, kako velik ali majhen - se ne bi smel izogniti odzivanju. V tem koraku bomo v CSS dodali nekaj medijskih poizvedb in naredili ta majhen projekt čim bolj prilagodljiv mobilnim napravam. Vredno je preveriti originalni CodePen, da vidite, kako to deluje.
@media (največja širina: 800 slikovnih pik) {h1 {velikost pisave: 2rem; } .button {širina: 12rem; }
Poskrbeli smo, da se bo, ko se širina naše strani zmanjša na 800 slikovnih pik, velikost pisave in gumbov zmanjšala. Za dokončanje stvari želimo ciljati tudi na višino in poskrbeti, da se bodo naši gumbi pomaknili navzdol po strani, ko bo višina strani pod 700 slikovnih pik.
@media (max-height: 700px) {.button {top: 70%; }}
Želite shraniti svoje strani? Izvozite jih kot datoteke PDF in jih shranite v varno shrambo v oblaku.
Dogodek spletnega oblikovanja Ustvari London se vrača od 19. do 21. septembra 2018 in ponuja bogat urnik voditeljev v industriji, celodnevne delavnice in dragocene mrežne priložnosti - ne zamudite. Pridobite svojo Generate vozovnico zdaj.
Ta članek je bil prvotno objavljen v reviji net številka 305. Naročite se zdaj.
