Sadržaj
- 01. Namjestite se
- 02. Završite HTML
- 03. Istražite Sassove varijable
- 04. Podesite stajling karoserije
- 05. Oblikujte naslove odjeljaka
- 06. Neka se CTA istaknu
- 07. Postavite pozadinu i zaslone spremnika
- 08. Dodajte pozadinske slike
- 09. Dodajte prijelaze i efekte lebdenja
- 10. Pređite na JavaScript
- 11. Dodajte i uklonite predavanje
- 12. Učinite ga osjetljivim
Vaša odredišna stranica presudan je element u izgledu vašeg web mjesta. To je prva prava prilika koja vam je potrebna za predstavljanje vašeg posla ili proizvoda koji prodajete, pa je njegov dizajn ključan. Odredišne stranice dizajnirane su s jednim fokusiranim ciljem poznatim kao poziv na akciju (CTA). Korištenje boja i slika kao dopuna pozivima na akciju i korisničkom iskustvu je neophodno.
- Pogledajte radni CodePen za ovo uputstvo
U ovom uputstvu proći ćemo kroz način stvaranja zanimljive odredišne stranice za izmišljenu modnu marku. Usredotočit će se na dizajn podijeljenog zaslona s velikim slikama i animiranim prijelazima koji se događaju pri zadržavanju pokazivača.Ova će stranica imati dva jasna gumba za poziv na radnju, a mi ćemo koristiti HTML, Sass za oblikovanje i dašak vanilije JavaScript koji koristi sintaksu ES6 (ne zaboravite da provjerite odgovara li vaš web hosting potrebama vaše web stranice). Previše složeno? Izradite web mjesto bez potrebe za kodom, isprobajte jednostavni alat za izradu web stranica.
01. Namjestite se
Ako upotrebljavate CodePen, provjerite je li CSS postavljen na 'SCSS' u postavkama olovke. Ovu promjenu možete izvršiti klikom na karticu postavki, odaberite 'CSS' i u padajućim opcijama promijenite CSS Preprocessor u SCSS.
Tada možemo početi dodavati u naš HTML. Umotat ćemo odjeljak nazvan "lijevo" i odjeljak nazvan "desno" unutar klase spremnika, a oba odjeljka dobivaju klasu "zaslon".
div> section> / section> section> / section> / div>
02. Završite HTML
Da bismo dovršili naš HTML, dodat ćemo naslov za svaki odjeljak pomoću znaka h1 označiti. Ispod toga trebat ćemo dodati gumb koji će voditi na drugu stranicu ako je ovo projekt iz stvarnog svijeta. Mi ćemo ovo predavati dugme da stvari budu lijepe i jednostavne.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Learn More / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Learn Više / a> / gumb> / section>
03. Istražite Sassove varijable
Jedina stvar koju svi volimo kod Sass-a je upotreba varijabli. Iako izvorne CSS varijable dobivaju više podrške, zaštitit ćemo stvari pomoću Sass-a. Stavit ćemo ih na vrh našeg .scss, a možete odabrati koje god boje želite, ali koristeći rgba vrijednosti pružit će nam veću fleksibilnost.
/ * * Varijable * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ lijevo-gumb-zadržite: 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%; $ mala širina: 25%; $ animateSpeed: 1000ms;
04. Podesite stajling karoserije
Prvo ćemo obrisati sve zadane obloge i margine prema tijelu, a zatim ćemo obitelj fontova postaviti na Open Sans. To će utjecati samo na gumb, pa nije previše važno koji font koristimo. Tada ćemo postaviti širinu i visinu na 100% i pobrinite se da se sve što se prelije na osi X sakrije.
html, body {padding: 0; marža: 0; obitelj fontova: 'Open Sans', sans-serif; širina: 100%; visina: 100%; overflow-x: skriven; }
05. Oblikujte naslove odjeljaka
Vrijeme je da odaberemo Googleov font za naslove odjeljaka - odabrali smo Playfair Display. Zatim pomoću prevestiX možemo osigurati da naslovi odjeljaka uvijek budu centrirani na X osi.
h1 {veličina slova: 5rem; boja: #fff; položaj: apsolutni; lijevo: 50%; vrh: 20%; transformiraj: translateX (-50%); prazan prostor: nowrap; obitelj fontova: 'Playfair Display', serif; }
06. Neka se CTA istaknu
Naši će gumbi djelovati kao pozivi na akciju, pa oni moraju biti veliki, podebljani i smješteni tamo gdje ih je lako kliknuti. Oba gumba imat će bijeli obrub i zanimljiv efekt prijelaza. Zadani stilovi za oba gumba bit će jednaki, no promijenit ćemo njihove boje prilikom zadržavanja pokazivača.
.button {prikaz: blok; položaj: apsolutni; lijevo: 50%; vrh: 50%; visina: 2.6rem; podmetač: 1.2rem; širina: 15rem; poravnanje teksta: središte; boja: bijela; obrub: 3px solid #fff; radijus obruba: 4px; težina fonta: 600; transformacija teksta: velika slova; ukras teksta: nijedan; transformiraj: translateX (-50%); prijelaz: svi .2s;
Glavni gumbi imat će lijep jednostavan efekt lebdenja, a mi ćemo koristiti Sass varijable koje smo odredili za boju, a koja će biti slična boji pozadine stranice.
.screen.left .button: hover {background-color: $ left-button-hover; boja obruba: $ lijevi gumb-lebdi; } .screen.right .button: lebdi {background-color: $ right-button-hover; boja obruba: $ desni gumb-lebdi;
07. Postavite pozadinu i zaslone spremnika
Klasa spremnika će djelovati kao omot stranice i položaj toga postavit ćemo na relativan, jednostavno zato što želimo postaviti zaslone na apsolutno pozicioniranje. Spremniku ćemo dati zadanu boju pozadine, ali to se naravno neće vidjeti, jer ćemo postavljati različite boje za obje pozadine zaslona.
.kontejner {položaj: relativan; širina: 100%; visina: 100%; pozadina: $ container-BgColor; .screen {pozicija: apsolutna; širina: 50%; visina: 100%; preljev: skriven; }}
08. Dodajte pozadinske slike
Lijevi i desni odjeljak prikazivat će sliku, a možete pronaći besplatne slike dionica s web lokacija kao što su Unsplash, Pixabay ili Pexels (koje sam koristio u ovom vodiču). Da bih olakšao stvari, koristio sam besplatnu uslugu hostinga i dijeljenja slika nazvanu imgbb na koju možemo povezati u našem CSS-u.
.screen.left {lijevo: 0; pozadina: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) središte središte bez ponavljanja; veličina pozadine: naslovnica; &: prije {pozicija: apsolutno; sadržaj: ""; širina: 100%; visina: 100%; pozadina: $ left-bgColor; }}
Desna strana stranice također će prikazati pozadinsku sliku pomoću imgbb-a, a boju pozadine ćemo postaviti na ružičastu. Opet smo postavili veličinu pozadine na pokriti. To će nam omogućiti da pokrijemo čitav element koji sadrži, a koji je u našem slučaju .zaslon razred.
.screen.right {desno: 0; pozadina: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) središte centra bez ponavljanja; veličina pozadine: naslovnica; &: prije {pozicija: apsolutno; sadržaj: ""; širina: 100%; visina: 100%; pozadina: $ right-bgColor; }}
09. Dodajte prijelaze i efekte lebdenja
Brzinom animacije za naš efekt lebdenja na oba zaslona upravljat će se prijelazom koji drži vrijednost naše varijable $ animateSpeed, što je 1000 ms (jedna sekunda). Tada ćemo završiti davanjem animaciji malo olakšanja, što je jednostavnost ulaska i izlaska koja će nam pomoći da dobijemo uglađeniju animaciju.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {prijelaz: $ animateSpeed sve jednostavnosti ulaska-out; }
Ono što želimo da se sada dogodi je da kada zadržite pokazivač iznad lijevog zaslona, tom će odjeljku biti dodana klasa pomoću JavaScript-a (što ćemo napisati u kasnijem koraku). Kad se doda ova klasa, tada će se taj zaslon protezati na bilo koju širinu varijable koju smo naveli - koja će biti 75%, a zatim će se desna strana postaviti na varijablu manje širine (25%).
.hover-lijevo .left {width: $ hover-width; } .hover-lijevo .desno {width: $ small-width; } .hover-lijevo .desno: prije {z-index: 2; }
To funkcionira potpuno isto kao i na lijevoj strani, gdje će se dodavanjem nove klase dodavati mišem lebdeći pomoću JavaScript-a, a desni zaslon će se u skladu s tim protezati. Također se moramo pobrinuti za z-indeks postavljeno je na 2 pa gumb CTA postaje sve istaknutiji.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-desno .lijevo: prije {z-index: 2; }
10. Pređite na JavaScript
Upotrijebit ćemo dodir vanilije JavaScript-a kako bi nam pomogli dodati i ukloniti CSS klase, a koristit ćemo i neke od novih ES6 značajki. Prvo što moramo učiniti je deklarirati neke konstantne varijable.
Jer ćemo se služiti dokument više ćemo puta postaviti konstantnu varijablu tzv doc i pohranite dokument u to kako bismo mogli održati riječ 'dokument' lijepom i kratkom.
const doc = dokument;
Sada moramo postaviti još tri konstante koje će pohraniti .pravo, .lijevo i .kontejner selektori. Razlog zašto koristimo konstante je taj što znamo da ne želimo mijenjati vrijednost tih vrijednosti, pa upotreba konstanti ima smisla. S ovim sada postavljenim, možemo im dodati i dodati neke događaje miša.
const desno = doc.querySelector (". desno"); const lijevo = doc.querySelector (". lijevo"); const container = doc.querySelector (". spremnik");
Koristiti lijevo konstantna varijabla koju smo deklarirali u posljednjem koraku, sada joj možemo dodati slušatelj događaja. Ovaj će događaj biti mišji centar događaja i umjesto korištenja funkcije povratnog poziva, koristit ćemo drugu ES6 značajku koja se zove Funkcije strelice ’(() =>).
// dodaje klasu elementu spremnika na hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Dodajte i uklonite predavanje
U posljednjem koraku naš je slušatelj događaja dodao a mišji centar događaj koji cilja glavnu klasu spremnika i dodaje novu klasu koja se zove lebdjeti-lijevo lijevom dijelu elementa. Uz dodavanje ovog naziva, sada ga moramo ukloniti kad zadržimo pokazivač iznad njega. To ćemo učiniti pomoću lišće miša događaj i .ukloniti() metoda.
// uklanja klasu koja je dodana na hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Do sada smo radili sve na lijevom ekranu. Sada ćemo dovršiti JavaScript i dodati i ukloniti klase na pravim elementima odjeljka. Ponovno smo ovdje koristili sintaksu funkcije strelice kako bi sve izgledalo lijepo i uredno.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Učinite ga osjetljivim
Nijedan projekt - bez obzira koliko velik ili mali bio - ne smije izbjegavati da reagira. Dakle, u ovom ćemo koraku dodati nekoliko medijskih upita u naš CSS i učiniti ovaj mali projekt što je moguće prilagodljivijim mobilnim uređajima. Vrijedno je provjeriti izvorni CodePen da biste vidjeli kako to funkcionira.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {širina: 12rem; }
Uvjerili smo se da će se kad širina naše stranice padne na 800 px font i gumbi smanjiti. Dakle, da dovršimo stvari, želimo ciljati i visinu i pobrinite se da se naši gumbi pomaknu prema dolje kad visina stranice padne ispod 700 px.
@media (max-height: 700px) {.button {top: 70%; }}
Želite li spremiti svoje stranice? Izvezite ih kao PDF-ove i spremite u sigurnu pohranu u oblaku.
Događaj za web dizajn Generiraj London vraća se 19. i 21. rujna 2018., nudi prenatrpan raspored vodećih govornika u industriji, cjelodnevne radionice i dragocjene mogućnosti umrežavanja - ne propustite. Nabavite svoju Generate kartu odmah.
Ovaj je članak izvorno objavljen u časopisu net izdanje 305. Pretplatite se sada.
