Obsah
- 01. Pripravte sa
- 02. Dokončite HTML
- 03. Preskúmajte premenné Sass
- 04. Upravte tvar tela
- 05. Upravte názvy častí
- 06. Nechajte vyniknúť CTA
- 07. Nastavte pozadie a obrazovky kontajnera
- 08. Pridajte obrázky na pozadí
- 09. Pridajte prechody a efekty umiestnenia kurzora myši
- 10. Presuňte sa do JavaScriptu
- 11. Pridajte a odstráňte triedu
- 12. Nech je to responzívne
Vaša vstupná stránka je zásadným prvkom v rozložení vášho webu. Je to prvá skutočná príležitosť, kedy musíte predstaviť svoje podnikanie alebo produkt, ktorý predávate, takže jeho dizajn je kľúčový. Cieľové stránky sú navrhnuté s jediným zameraným cieľom, ktorý sa nazýva výzva na akciu (CTA). Používanie farieb a obrázkov na doplnenie výziev na akciu a užívateľský komfort je nevyhnutnosťou.
- Tento návod nájdete v pracovnom kóde CodePen
V tomto tutoriáli sa dozvieme, ako vytvoriť pútavú vstupnú stránku pre fiktívnu módnu značku. Bude to sústredené okolo dizajnu rozdelenej obrazovky s veľkými obrázkami a animovanými prechodmi, ktoré sa vyskytujú pri umiestnení kurzora myši.Táto stránka bude mať dve jasné tlačidlá výzvy na akciu a budeme používať HTML, Sass na úpravu a dotyk vanilkového JavaScriptu, ktorý používa syntax ES6 (nezabudnite sa ubezpečiť, že váš webhosting vyhovuje vašim potrebám). Príliš zložité? Vytvorte si webovú stránku bez potreby kódu, vyskúšajte jednoduchý nástroj na tvorbu webových stránok.
01. Pripravte sa
Ak používate CodePen, uistite sa, že je CSS v nastaveniach pera nastavený na „SCSS“. Túto zmenu môžete vykonať kliknutím na kartu nastavení, výberom možnosti „CSS“ a v rozbaľovacích možnostiach zmeniť predspracovateľ CSS na SCSS.
Potom môžeme začať pridávať do nášho kódu HTML. Sekciu nazvanú „ľavá“ a sekciu „pravú“ zabalíme do triedy kontajnera, pričom obidve sekcie budú mať triedu „obrazovka“.
div> oddiel> / oddiel> oddiel> / oddiel> / div>
02. Dokončite HTML
Aby sme dokončili náš HTML, pridáme do názvu pre každú sekciu pomocou h1 značka. Ďalej budeme musieť pridať tlačidlo, ktoré by odkazovalo na inú stránku, ak by išlo o skutočný projekt. Dáme tomu triedu tlačidlo aby boli veci pekné a jednoduché.
div> oddiel> h1> Pánska móda / h1> tlačidlo> a href = "#"> Ďalšie informácie / a> / button> / section> oddiel> h1> Dámska móda / h1> tlačidlo> a href = "#"> učiť sa Viac / a> / tlačidlo> / sekcia>
03. Preskúmajte premenné Sass
Jedna vec, ktorú na Sassovi všetci milujeme, je používanie premenných. Aj keď natívne premenné CSS dostávajú väčšiu podporu, pomocou Sass zaistíme bezpečnosť. Tieto položíme na vrch našej .scssa môžete si zvoliť ľubovoľné farby, ktoré však chcete rgba hodnoty nám poskytnú väčšiu flexibilitu.
/ * * Premenné * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ pohyb ľavého tlačidla: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ presunutie pravého tlačidla: rgba (255, 140, 219, 0,7); $ šírka vznášania: 75%; $ malá šírka: 25%; $ animateSpeed: 1 000 ms;
04. Upravte tvar tela
Najskôr odstránime všetky predvolené výplne a okraje tela a potom nastavíme rodinu písma na Open Sans. Toto ovplyvní iba tlačidlo, takže príliš nezáleží na tom, aké písmo použijeme. Potom nastavíme šírku a výšku na 100% a uistite sa, že všetko, čo pretečie na osi X, sa skryje.
html, body {odsadenie: 0; okraj: 0; font-family: ‘Open Sans’, sans-serif; šírka: 100%; výška: 100%; prepad-x: skrytý; }
05. Upravte názvy častí
Je čas zvoliť písmo Google pre názvy sekcií - vybrali sme si Playfair Display. Potom pomocou preložiťX môžeme sa ubezpečiť, že názvy sekcií sú vždy sústredené na osi X.
h1 {font-size: 5rem; farba: #fff; pozícia: absolútna; vľavo: 50%; vrchná časť: 20%; transformácia: translateX (-50%); biely priestor: nowrap; rodina fontov: ‘Playfair Display’, pätkové; }
06. Nechajte vyniknúť CTA
Naše tlačidlá budú slúžiť ako naše výzvy na akciu, takže musia byť veľké, tučné a umiestnené tak, aby na ne bolo ľahké kliknúť. Obe tlačidlá budú mať biele orámovanie a zaujímavý efekt prechodu. Predvolené štýly pre obe tlačidlá budú rovnaké, pri prechode kurzorom však zmeníme ich farby.
.button {display: block; pozícia: absolútna; vľavo: 50%; vrchná časť: 50%; výška: 2,6rem; vypchávka: 1,2rem; šírka: 15rem; zarovnanie textu: na stred; farba: biela; orámovanie: 3px plné #fff; polomer hranice: 4px; váha písma: 600; transformácia textu: veľké písmená; dekorácia textu: žiadny; transformácia: translateX (-50%); prechod: všetky .2s;
Hlavné tlačidlá budú mať pekný jednoduchý efekt vznášania a použijeme Sass premenné, ktoré sme zadali pre farbu, ktorá bude farbou podobnou pozadiu stránky.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Nastavte pozadie a obrazovky kontajnera
Trieda kontajnera bude fungovať ako náš súhrnný obal stránky a pozíciu tohto umiestnenia nastavíme na relatívnu, jednoducho preto, lebo chceme umiestniť obrazovky do absolútneho umiestnenia. Dáme kontajneru predvolenú farbu pozadia, ale samozrejme to nebude viditeľné, pretože nastavíme rôzne farby pre obe pozadia obrazovky.
. nádoba {poloha: relatívna; šírka: 100%; výška: 100%; pozadie: $ container-BgColor; .screen {pozícia: absolútna; šírka: 50%; výška: 100%; prepad: skrytý; }}
08. Pridajte obrázky na pozadí
Ľavá aj pravá časť zobrazia obrázok a môžete nájsť obrázky bez licenčných poplatkov z webových stránok, ako sú Unsplash, Pixabay alebo Pexels (ktoré som použil v tomto návode). Aby som to uľahčil, použil som bezplatnú službu hostenia a zdieľania obrázkov s názvom imgbb, na ktorú môžeme odkazovať v našom CSS.
.screen.left {left: 0; background: url (‘https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp‘) centrum centrum bez opakovania; veľkosť pozadia: obal; &: pred {pozíciou: absolútna; obsah: „“; šírka: 100%; výška: 100%; pozadie: $ left-bgColor; }}
Na pravej strane stránky sa tiež zobrazí obrázok na pozadí pomocou imgbb a farbu pozadia nastavíme na ružovú. Opäť sme nastavili veľkosť pozadia na kryt. To nám umožní pokryť celý obsahujúci prvok, ktorým je v našom prípade .obrazovka trieda.
.screen.right {vpravo: 0; background: url (‘https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp‘) centrum centrum bez opakovania; veľkosť pozadia: obal; &: pred {pozíciou: absolútna; obsah: „“; šírka: 100%; výška: 100%; pozadie: $ right-bgColor; }}
09. Pridajte prechody a efekty umiestnenia kurzora myši
Rýchlosť animácie nášho vznášacieho efektu na oboch obrazovkách bude riadená prechodom, ktorý drží hodnotu našej premennej $ animateSpeed, čo je 1 000 ms (jedna sekunda). Potom to dokončíme tak, že dáme animácii určité uvoľnenie, čo je uľahčenie a uvoľnenie, ktoré nám pomôže poskytnúť plynulejšiu animáciu.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed all easy-in-out; }
Teraz sa chceme stať to, že keď umiestnite kurzor myši na ľavú obrazovku, do tejto sekcie sa pridá trieda pomocou JavaScriptu (čo napíšeme v ďalšom kroku). Po pridaní tejto triedy sa táto obrazovka roztiahne na ľubovoľnú šírku premennej, ktorú sme zadali - čo bude 75%, a potom sa pravá strana nastaví na menšiu šírku premennej (25%).
.hover-left .left {width: $ hover-width; } .hover-left. right {width: $ small-width; } .hover-left. right: pred {z-index: 2; }
Funguje to úplne rovnako ako na ľavej strane, kde sa pri umiestnení kurzora myši pomocou JavaScriptu pridá nová trieda a podľa toho sa roztiahne pravá obrazovka. Musíme sa tiež uistiť, že z-index je nastavený na 2 takže tlačidlo CTA sa stáva výraznejším.
.hover-right. right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: pred {z-index: 2; }
10. Presuňte sa do JavaScriptu
Budeme používať dotyk vanilkového JavaScriptu, ktorý nám pomôže pridávať a odstraňovať triedy CSS, a tiež budeme využívať niektoré z nových funkcií ES6. Prvá vec, ktorú musíme urobiť, je deklarovať niektoré konštantné premenné.
Pretože budeme používať dokument viackrát nastavíme konštantnú premennú s názvom doc a dokument v ňom uložíme, aby bolo slovo „dokument“ pekné a krátke.
const doc = dokument;
Teraz musíme nastaviť ďalšie tri konštanty, ktoré budú ukladať .správny, .vľavo a .kontejner selektory. Dôvod, prečo používame konštanty, je ten, že vieme, že nechceme meniť ich hodnotu, takže použitie konštánt má zmysel. S týmito teraz nastavenými môžeme pokračovať a pridať k nim nejaké udalosti myšou.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const kontajner = doc.querySelector (". kontajner");
Pomocou vľavo konštantnú premennú, ktorú sme deklarovali v poslednom kroku, teraz do nej môžeme pridať poslucháča udalostí. Touto udalosťou bude myšacie centrum udalosť a namiesto použitia funkcie spätného volania použijeme ďalšiu funkciu ES6 s názvom Arrow Functions ‘(() =>).
// pridá triedu do prvku kontajnera pri vznášaní doľava.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Pridajte a odstráňte triedu
V poslednom kroku náš poslucháč udalostí pridal a myšacie centrum udalosť, ktorá sa zameriava na hlavnú triedu kontajnera a pridá novú triedu s názvom vznášať sa vľavo k prvku ľavej časti. Keď je táto funkcia nazvaná pridaná, musíme ju teraz odstrániť, keď na ňu umiestnime kurzor myši. Urobíme to pomocou mouseleave udalosť a .odstrániť () metóda.
// odstráni triedu, ktorá bola pridaná pri umiestnení kurzora myši left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Doteraz sme robili všetko na ľavej obrazovke. Teraz dokončíme JavaScript a pridáme a odstránime triedy na prvkoch pravej časti. Opäť sme tu použili syntax funkcie šípok, aby všetko vyzeralo pekne a upratane.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Nech je to responzívne
Žiadny projekt - bez ohľadu na to, aký veľký alebo malý - by sa nemal vyhnúť tomu, aby bol reagujúci. V tomto kroku teda do nášho CSS pridáme niekoľko mediálnych otázok a urobíme tento malý projekt čo najlepšie adaptívnym pre mobilné zariadenia. Ako to funguje, stojí za to skontrolovať originálny CodePen.
@media (max-sirka: 800px) {h1 {font-size: 2rem; } .tlačidlo {šírka: 12rem; }
Zaistili sme, že keď šírka našej stránky klesne na 800 pixelov, veľkosť písma a tlačidiel sa zmenší. Aby sme to dokončili, chceme tiež zacieliť na výšku a zabezpečiť, aby sa naše tlačidlá posúvali nadol po stránke, keď výška stránky klesne pod 700 pixelov.
@media (max. výška: 700 pixelov) {.button {hore: 70%; }}
Chcete uložiť svoje stránky? Exportujte ich ako PDF a uložte ich na bezpečné cloudové úložisko.
Udalosť webdizajnu Vytvorte Londýn sa vracia v dňoch 19. - 21. septembra 2018 a ponúka nabitý rozvrh špičkových rečníkov, celý deň workshopov a hodnotné príležitosti na vytváranie sietí - nenechajte si ho ujsť. Získajte lístok Generate hneď.
Tento článok bol pôvodne publikovaný v časopise net vydanie 305. Odoberaj teraz.
