Obsah
- 01. Připravte se
- 02. Dokončete HTML
- 03. Prozkoumejte proměnné Sass
- 04. Upravte styling těla
- 05. Upravte názvy sekcí
- 06. Nechte CTA vyniknout
- 07. Nastavte pozadí a obrazovky kontejneru
- 08. Přidejte obrázky na pozadí
- 09. Přidejte přechody a efekty přechodu
- 10. Přesuňte se do JavaScriptu
- 11. Přidejte a odeberte třídu
- 12. Umožněte to reagovat
Vaše vstupní stránka je zásadním prvkem v rozvržení vašeho webu. Je to první skutečná příležitost, kdy musíte představit své podnikání nebo produkt, který prodáváte, takže jeho design je klíčový. Vstupní stránky jsou navrženy s jediným zaměřeným cílem, který se nazývá výzva k akci (CTA). Použití barev a obrázků k doplnění výzev k akci a uživatelské zkušenosti je nutností.
- Viz pracovní CodePen pro tento kurz
V tomto tutoriálu si projdeme, jak vytvořit poutavou vstupní stránku pro fiktivní módní značku. Bude soustředěno kolem designu rozdělené obrazovky s velkými obrázky a animovanými přechody, ke kterým dochází při přechodu myší.Tato stránka bude mít dvě jasná tlačítka výzvy k akci a budeme používat HTML, Sass pro styling a nádech vanilkového JavaScriptu, který používá syntaxi ES6 (nezapomeňte se ujistit, že váš webhosting vyhovuje vašim potřebám). Příliš složité? Vytvořte si web bez potřeby kódu, vyzkoušejte jednoduchý nástroj pro tvorbu webových stránek.
01. Připravte se
Pokud používáte CodePen, ujistěte se, že je CSS v nastavení pera nastaven na „SCSS“. Tuto změnu můžete provést kliknutím na kartu nastavení, výběrem možnosti „CSS“ a v rozbalovacích možnostech změňte předspracovatel CSS na SCSS.
Pak můžeme začít přidávat do našeho HTML. Ve třídě kontejneru zabalíme sekci nazvanou „vlevo“ a sekci nazvanou „vpravo“, přičemž obě sekce budou mít třídu „obrazovky“.
div> sekce> / sekce> sekce> / sekce> / div>
02. Dokončete HTML
Abychom dokončili náš HTML, přidáme do názvu pro každou sekci pomocí h1 štítek. Pod to budeme muset přidat tlačítko, které by odkazovalo na jinou stránku, pokud by se jednalo o skutečný projekt. Dáme tomu třídu knoflík aby to bylo hezké a jednoduché.
div> sekce> h1> Pánská móda / h1> tlačítko> a href = "#"> Další informace / a> / button> / section> sekce> h1> Dámská móda / h1> tlačítko> a href = "#"> Další informace Více / a> / tlačítko> / sekce>
03. Prozkoumejte proměnné Sass
Jedna věc, kterou na Sassu všichni milujeme, je používání proměnných. I když nativní proměnné CSS získávají větší podporu, pomocí Sass budeme udržovat věci v bezpečí. Dáme je na vrchol našeho .scss, a můžete si vybrat libovolné barvy, které chcete, ale pomocí rgba hodnoty nám poskytnou větší flexibilitu.
/ * * Proměnné * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ left-button-hover: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ right-button-hover: rgba (255, 140, 219, 0,7); $ šířka vznášení: 75%; $ malá šířka: 25%; $ animateSpeed: 1000ms;
04. Upravte styling těla
Nejprve vymažeme všechny výchozí polstrování a okraj k tělu a potom nastavíme rodinu písem na Open Sans. To ovlivní pouze tlačítko, takže příliš nezáleží na tom, jaké písmo použijeme. Pak nastavíme šířku a výšku na 100% a ujistěte se, že vše, co přetéká na ose X, bude skryto.
html, body {odsazení: 0; okraj: 0; rodina fontů: „Open Sans“, sans-serif; šířka: 100%; výška: 100%; overflow-x: skrytý; }
05. Upravte názvy sekcí
Je čas vybrat písmo Google pro názvy sekcí - vybrali jsme Playfair Display. Pak pomocí přeložitX můžeme zajistit, aby názvy sekcí byly vždy vycentrovány na ose X.
h1 {font-size: 5rem; barva: #fff; pozice: absolutní; vlevo: 50%; horní část: 20%; transformace: translateX (-50%); prázdné znaky: nowrap; rodina fontů: „Playfair Display“, patkové; }
06. Nechte CTA vyniknout
Naše tlačítka fungují jako naše výzvy k akci, takže musí být velká, tučná a umístěná tak, aby na ně bylo snadné kliknout. Obě tlačítka budou mít bílý okraj a zajímavý přechodový efekt. Výchozí styly pro obě tlačítka budou stejné, ale při přechodu myší změníme jejich barvy.
.button {display: block; pozice: absolutní; vlevo: 50%; horní část: 50%; výška: 2,6rem; polstrování: 1,2rem; šířka: 15rem; zarovnání textu: na střed; barva bílá; ohraničení: 3px pevné #fff; poloměr ohraničení: 4px; váha písma: 600; textová transformace: velká písmena; textová výzdoba: žádná; transformace: translateX (-50%); přechod: všechny .2s;
Hlavní tlačítka budou mít pěkný jednoduchý efekt vznášení a použijeme proměnné Sass, které jsme zadali pro barvu, což bude barva podobná pozadí 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 pozadí a obrazovky kontejneru
Třída kontejneru bude fungovat jako obálka naší stránky a nastavíme její pozici na relativní, jednoduše proto, že chceme umístit obrazovky do absolutního umístění. Dáme kontejneru výchozí barvu pozadí, ale samozřejmě to nebude vidět, protože nastavíme různé barvy pro obě pozadí obrazovky.
.container {pozice: relativní; šířka: 100%; výška: 100%; pozadí: $ container-BgColor; .screen {pozice: absolutní; šířka: 50%; výška: 100%; přepad: skrytý; }}
08. Přidejte obrázky na pozadí
V levé i pravé části se zobrazí obrázek a na webových stránkách, jako jsou Unsplash, Pixabay nebo Pexels (které jsem použil v tomto výukovém programu), najdete obrázky bez licenčních poplatků. Aby to bylo jednodušší, použil jsem bezplatnou službu hostování a sdílení obrázků nazvanou imgbb, na kterou můžeme odkazovat v našem CSS.
.screen.left {vlevo: 0; background: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') centrum centrum bez opakování; velikost pozadí: obal; &: před {pozice: absolutní; obsah: ""; šířka: 100%; výška: 100%; pozadí: $ left-bgColor; }}
Na pravé straně stránky se také zobrazí obrázek na pozadí pomocí imgbb a barvu pozadí nastavíme na růžovou. Opět jsme nastavili velikost pozadí na Pokrýt. To nám umožní pokrýt celý obsahující prvek, což je v našem případě .obrazovka třída.
.screen.right {vpravo: 0; background: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') centrum centrum neopakovat; velikost pozadí: obal; &: před {pozice: absolutní; obsah: ""; šířka: 100%; výška: 100%; pozadí: $ right-bgColor; }}
09. Přidejte přechody a efekty přechodu
Rychlost animace pro náš efekt vznášení na obou obrazovkách bude řízena přechodem, který udržuje hodnotu naší proměnné $ animateSpeed, což je 1 000 ms (jedna sekunda). Potom to dokončíme tím, že dáme animaci nějaké uvolnění, což je uvolnění a uvolnění, které nám pomůže zajistit plynulejší animaci.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transition: $ animateSpeed all easy-in-out; }
Chceme, aby se to stalo nyní, je to, že když umístíte kurzor na levou obrazovku, do této sekce bude přidána třída pomocí JavaScriptu (kterou napíšeme v pozdějším kroku). Když je přidána tato třída, pak se tato obrazovka roztáhne na jakoukoli šířku proměnné, kterou jsme zadali - což bude 75%, a pak bude pravá strana nastavena na proměnnou menší šířky (25%).
.hover-left .left {width: $ hover-width; } .hover-left. right {width: $ small-width; } .hover-left. right: před {z-index: 2; }
Funguje to přesně stejně jako na levé straně, kde bude přidána nová třída při přechodu myší pomocí JavaScriptu a podle toho se roztáhne pravá obrazovka. Musíme se také ujistit, že z-index je nastaven na 2 takže tlačítko CTA se stává výraznějším.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: before {z-index: 2; }
10. Přesuňte se do JavaScriptu
Budeme používat nádech vanilkového JavaScriptu, který nám pomůže přidávat a odebírat třídy CSS, a budeme také používat některé z nových funkcí ES6. První věcí, kterou musíme udělat, je deklarovat některé konstantní proměnné.
Protože budeme používat dokument více než jednou nastavíme konstantní proměnnou nazvanou doc a dokument v něm uložíme, abychom udrželi slovo „dokument“ pěkné a krátké.
const doc = dokument;
Nyní musíme nastavit další tři konstanty, které budou ukládat .že jo, .vlevo, odjet a .kontejner selektory. Důvod, proč používáme konstanty, je ten, že víme, že nechceme měnit jejich hodnotu, takže použití konstant má smysl. S těmito nyní nastavenými můžeme pokračovat a přidat k nim nějaké události myši.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Za použití vlevo, odjet konstantní proměnnou, kterou jsme deklarovali v posledním kroku, nyní do ní můžeme přidat posluchače událostí. Tato událost bude myši událost a místo použití funkce zpětného volání použijeme jinou funkci ES6 s názvem Funkce šipek ((() =>).
// přidá třídu do prvku kontejneru při přechodu vlevo. addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Přidejte a odeberte třídu
V posledním kroku náš posluchač událostí přidal a myši událost, která cílí na hlavní třídu kontejneru a přidává novou třídu s názvem vznášet se vlevo k prvku levé sekce. S tímto názvem přidáno, nyní musíme odstranit, když se vznášíme mimo něj. Uděláme to pomocí mouseleave událost a .odstranit() metoda.
// odstraní třídu, která byla přidána při přechodu vlevo. addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Až dosud jsme dělali vše na levé obrazovce. Nyní dokončíme JavaScript a přidáme a odebereme třídy na prvcích pravé části. Opět jsme zde použili syntaxi funkce šipek, aby vše vypadalo hezky a uklizeně.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Umožněte to reagovat
Žádný projekt - bez ohledu na to, jak velký nebo malý - by se neměl vyhnout tomu, aby byl reagován. V tomto kroku tedy do našeho CSS přidáme několik mediálních dotazů a uděláme tento malý projekt tak adaptivním pro mobilní zařízení, jak nejlépe umíme. Stojí za to zkontrolovat původní CodePen, abyste zjistili, jak to funguje.
@media (max-width: 800px) {h1 {font-size: 2rem; }. tlačítko {width: 12rem; }
Zajistili jsme, že když se šířka naší stránky sníží na 800 pixelů, zmenší se velikost písma a tlačítek. Abychom to dokončili, chceme také cílit na výšku a ujistit se, že se naše tlačítka pohybují dolů po stránce, když výška stránky klesne pod 700 pixelů.
@media (max. výška: 700 pixelů) {. tlačítko {nahoře: 70%; }}
Chcete uložit své stránky? Exportujte je jako soubory PDF a uložte je do zabezpečeného cloudového úložiště.
Událost webdesignu Generovat Londýn se vrací ve dnech 19. – 21. září 2018 a nabízí nabitý plán předních řečníků v oboru, celodenní workshopy a cenné příležitosti k vytváření sítí - nenechte si ho ujít. Získejte lístek Generate hned teď.
Tento článek byl původně publikován v časopise net číslo 305. Přihlaste se nyní.
