Tartalom
- 01. Állítsa be
- 02. Fejezze be a HTML-t
- 03. Fedezze fel a Sass változókat
- 04. Állítsa be a test stílusát
- 05. Stílusolja a szakaszok címeit
- 06. Tegye kiemelkedővé a CTA-kat
- 07. Állítsa be a tároló hátterét és a képernyőket
- 08. Adjon hozzá háttérképeket
- 09. Adjon átmenetet és lebegő effektusokat
- 10. Mozgás a JavaScript-be
- 11. Adjon hozzá és távolítson el egy osztályt
- 12. Legyen érzékeny
A céloldal döntő eleme a weboldal elrendezésének. Ez az első igazi lehetőség, amellyel bemutathatja vállalkozását vagy az eladott terméket, ezért annak kialakítása kulcsfontosságú. A céloldalakat egyetlen fókuszált céllal tervezik, amelyet cselekvésre ösztönzésnek (CTA) neveznek. Színek és képek használata a cselekvésre ösztönzés és a felhasználói élmény kiegészítésére elengedhetetlen.
- Az oktatóanyagot lásd a működő CodePen-ben
Ebben az oktatóanyagban bemutatjuk, hogyan lehet egy kitalált divatmárka számára vonzó céloldalt készíteni. A megosztott képernyős tervezés köré fog állni, nagy képekkel és animált átmenetekkel, amelyek lebegnek.Ennek az oldalnak két világos cselekvésre ösztönző gombja lesz, és a HTML-t, a Sass-t fogjuk használni a stílushoz, és egy kis vaníliás JavaScript-t használunk, amely az ES6 szintaxist használja (ne felejtse el megbizonyosodni arról, hogy webtárhelye megfelel-e a webhely igényeinek). Túl összetett? Hozzon létre egy weboldalt kód nélkül, próbáljon ki egy egyszerű webhely-készítőt.
01. Állítsa be
Ha CodePent használ, győződjön meg arról, hogy a CSS beállítása „SCSS” a Toll beállításai között. Ezt a módosítást úgy végezheti el, hogy a beállítások fülre kattint, kiválasztja a „CSS” lehetőséget, és a legördülő menüben megváltoztatja a CSS előfeldolgozót SCSS-re.
Ezután elkezdhetjük hozzáadni a HTML-t. A „bal” és a „jobb” nevű szakaszt be fogjuk csomagolni egy konténer osztályba, mindkét szakasznak megadva a „képernyő” osztályt.
div> szakasz> / szakasz> szakasz> / szakasz> / div>
02. Fejezze be a HTML-t
A HTML véglegesítéséhez minden szakaszhoz hozzáadunk egy címet egy h1 címke. Alatta hozzá kell adnunk egy gombot, amely egy másik oldalra mutat, ha ez egy valós projekt volt. Osztályt adunk ennek gomb hogy a dolgok szépek és egyszerűek maradjanak.
div> szakasz> h1> Férfi divat / h1> gomb> a href = "#"> További információ / a> / gomb> / szakasz> szakasz> h1> Női divat / h1> gomb> a href = "#"> Tudjon meg Tovább / a> / gomb> / szakasz>
03. Fedezze fel a Sass változókat
Az egyetlen dolog, amit mindannyian szeretünk Sassban, a változók használata. Annak ellenére, hogy a natív CSS-változók egyre nagyobb támogatást kapnak, a Sass használatával biztonságban tartjuk a dolgokat. Ezeket tesszük a tetejére .scss, és kiválaszthatja a kívánt színeket, de használhatja rgba az értékek nagyobb rugalmasságot biztosítanak számunkra.
/ * * Változók * * / $ container-BgColor: # 444; $ left-bgSzín: rgba (136, 226, 247, 0,7); $ bal gomb-lebeg: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ jobb egérgombbal: rgba (255, 140, 219, 0,7); $ lebeg-szélesség: 75%; $ kis szélesség: 25%; $ animateSpeed: 1000ms;
04. Állítsa be a test stílusát
Először töröljük az összes alapértelmezett kitöltést és margót a törzsből, majd a betűtípuscsaládot Open Sans értékre állítjuk. Ez csak a gombot érinti, ezért nem túl fontos, hogy milyen betűtípust használunk. Ezután beállítjuk a szélességet és a magasságot 100% és ügyeljen arra, hogy minden, ami túlcsordul az X tengelyen, el legyen rejtve.
html, body {kitöltés: 0; margó: 0; font-family: ’Nyílt Sans’, sans-serif; szélesség: 100%; magasság: 100%; overflow-x: rejtett; }
05. Stílusolja a szakaszok címeit
Itt az ideje, hogy válasszon egy Google betűtípust a szakaszok címeihez - a Playfair Display-t választottuk. Ezután használja lefordítaniX megbizonyosodhatunk arról, hogy a szakaszok címei mindig az X tengely középpontjában állnak.
h1 {font-size: 5rem; szín: #fff; pozíció: abszolút; maradt: 50%; teteje: 20%; transzformáció: translateX (-50%); white-space: nowrap; font-family: ’Playfair Display’, serif; }
06. Tegye kiemelkedővé a CTA-kat
A gombjaink cselekvésre ösztönzésként működnek, ezért ezeknek nagynak, merésznek és olyan helyen kell lenniük, ahol könnyen kattinthatók. Mindkét gombnak fehér szegélye és érdekes átmeneti hatása lesz. Mindkét gomb alapértelmezett stílusa ugyanaz lesz, azonban a színüket lebegve megváltoztatjuk.
.gomb {display: block; pozíció: abszolút; maradt: 50%; teteje: 50%; magasság: 2,6rem; padding-top: 1.2rem; szélesség: 15rem; text-align: center; fehér szín; szegély: 3px szilárd #fff; határ-sugár: 4px; betű súlya: 600; szöveg-átalakítás: nagybetű; szövegdíszítés: nincs; transzformáció: translateX (-50%); átmenet: mind .2s;
A fő gomboknak szép egyszerű lebegő hatása lesz, és a színhez megadott Sass változókat fogjuk használni, amelyek hasonló színűek lesznek, mint az oldal háttere.
.screen.left .button: lebeg {háttér-szín: $ bal-gomb-lebeg; szegély-szín: $ bal-gomb-lebeg; } .screen.right .button: lebeg {háttér-szín: $ jobb-gomb-lebeg; border-color: $ jobb gomb-lebeg;
07. Állítsa be a tároló hátterét és a képernyőket
A tároló osztály az oldal burkolójaként fog működni, és ennek helyzetét relatívra állítjuk, egyszerűen azért, mert a képernyőket abszolút helyzetbe akarjuk helyezni. Alapértelmezett háttérszínt adunk a tárolónak, de ez természetesen nem lesz látható, mert mindkét képernyő hátteréhez különböző színeket állítunk be.
.konténer {pozíció: rokon; szélesség: 100%; magasság: 100%; háttér: $ container-BgColor; . képernyő {pozíció: abszolút; szélesség: 50%; magasság: 100%; túlcsordulás: rejtett; }}
08. Adjon hozzá háttérképeket
A bal és a jobb oldali szakasz egyaránt megjelenít egy képet, és jogdíjmentes stock képeket találhat olyan webhelyekről, mint például az Unsplash, a Pixabay vagy a Pexels (amelyeket ebben az oktatóanyagban használtam). A dolgok megkönnyítése érdekében az imgbb nevű ingyenes képtárhely-megosztó szolgáltatást vettem igénybe, amelyre a CSS-ben hivatkozhatunk.
.screen.left {balra: 0; háttér: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center no-repeat; háttérméret: borító; &: előtt {pozíció: abszolút; tartalom: ""; szélesség: 100%; magasság: 100%; háttér: $ left-bgColor; }}
Az oldal jobb oldalán egy háttérkép is megjelenik az imgbb használatával, és a háttér színét rózsaszínre állítjuk. Ismét a háttérméretet állítottuk be borító. Ez lehetővé teszi számunkra, hogy lefedjük a teljes tartalmazó elemet, amely esetünkben az .képernyő osztály.
.screen.right {right: 0; háttér: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center no-repeat; háttérméret: borító; &: előtt {pozíció: abszolút; tartalom: ""; szélesség: 100%; magasság: 100%; háttér: $ right-bgColor; }}
09. Adjon átmenetet és lebegő effektusokat
A lebegő hatás animációs sebességét mindkét képernyőn egy átmenet szabályozza, amely megtartja a változónk értékét $ animateSpeed, ami 1000 ms (egy másodperc). Aztán befejezzük, hogy az animációnak adunk némi könnyítést, ami egy egyszerű be- és kikapcsolás, amely simább animációt nyújt nekünk.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {átmenet: $ animateSpeed all easy-in-out; }
Amivel most szeretnénk történni, az az, hogy amikor a bal képernyő fölé viszi az egérmutatót, akkor egy osztály hozzá lesz adva ehhez a szakaszhoz a JavaScript használatával (amelyet később írunk). Ha ezt az osztályt hozzáadjuk, akkor az a képernyő a megadott változó szélességéig nyúlik - amely 75% lesz, majd a jobb oldalt a kisebb szélességű változóra (25%) állítja.
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-bal .jobb: {z-index: 2 előtt; }
Ez pontosan ugyanúgy működik, mint a bal oldal, ahol egy új osztályt adunk az egérmutatón a JavaScript használatával, és a jobb képernyő ennek megfelelően kinyúlik. Arra is ügyelnünk kell, hogy a z-index értékre van állítva 2 így a CTA gomb egyre hangsúlyosabbá válik.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .balra: a {z-index: 2 elé; }
10. Mozgás a JavaScript-be
Egy kis vaníliás JavaScript-t fogunk használni a CSS osztályok hozzáadásához és eltávolításához, valamint néhány új ES6 funkciót is használni fogunk. Az első dolog, amit meg kell tennünk, deklarálnunk kell néhány állandó változót.
Mert használni fogjuk dokumentum nem egyszer állítunk be egy állandó változót, amelyet hívunk doc és azon belül tárolja a dokumentumot, hogy a „dokumentum” szót szépen és röviden tudjuk tartani.
const doc = dokumentum;
Most még három állandót kell beállítanunk, amelyek a .jobb, .bal és .tartály válogatók. Azért használunk konstansokat, mert tudjuk, hogy nem akarjuk megváltoztatni ezek értékét, ezért az állandók használatának van értelme. Ezekkel a beállítással előre léphetünk, és hozzáadhatunk néhány egéreseményt hozzájuk.
const right = doc.querySelector (". right"); const balra = doc.querySelector (". balra"); const tároló = doc.querySelector (". tároló");
Használni a bal állandó változó, amelyet az utolsó lépésben deklaráltunk, most hozzáadhatunk hozzá eseményhallgatót. Ez az esemény lesz a egérközpont eseményt, és ahelyett, hogy visszahívási funkciót használnánk, egy másik ES6 funkciót fogunk használni Nyílfüggvények ’(() =>).
// hozzáad egy osztályt a bal oldali egérrel a tároló elemhez.addEventListener ("mouseenter", () => {container.classList.add ("lebegés-bal");});
11. Adjon hozzá és távolítson el egy osztályt
Az utolsó lépésben rendezvényhallgatónk hozzáadta a egérközpont esemény, amely a fő tárolóosztályt célozza meg, és egy új osztályt ad hozzá lebeg-balra a bal oldali szakasz elemre. Ezzel az úgynevezett hozzáadással most el kell távolítanunk, amikor lebegünk róla. Ezt a egérlevél esemény és a .remove () módszer.
// eltávolítja azt az osztályt, amelyet a bal egérgombbal adtak hozzá left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Eddig mindent megtettünk a bal oldali képernyőn. Most befejezzük a JavaScript-et, és hozzáadunk és eltávolítunk osztályokat a jobb szakaszelemeken. Itt is a nyíl függvény szintaxisát használtuk, hogy minden szép és rendben legyen.
right.addEventListener ("mouseenter", () => {container.classList.add ("lebeg-jobbra";}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Legyen érzékeny
Egyetlen projekt sem - függetlenül attól, hogy mekkora vagy kicsi - ne kerülje el a reagálást. Tehát ebben a lépésben hozzáadunk néhány média kérdést a CSS-hez, és ezt a kis projektet a lehető legjobban adaptáljuk a mobil eszközökhöz. Érdemes megnézni az eredeti CodePen-t, hogy lássa, hogyan működik ez.
@media (max-width: 800px) {h1 {font-size: 2rem; } .gomb {szélesség: 12rem; }
Gondoskodtunk arról, hogy amikor oldalunk szélessége 800 képpontosra csökken, a betűtípus és a gombok mérete csökken. Tehát, hogy befejezzük a dolgokat, meg akarjuk célozni a magasságot is, és győződjünk meg arról, hogy gombjaink lefelé mozognak az oldalon, amikor az oldal magassága 700 képpont alatt van.
@media (max-magasság: 700px) {.gomb {felső: 70%; }}
Menti az oldalait? Exportálja őket PDF-ként, és mentse őket biztonságos felhőalapú tárolóba.
Webdesign esemény Generálja Londonot 2018. szeptember 19-21-én tér vissza, csomagolt menetrendet kínálva az iparág vezető előadóinak, egész napos műhelyfoglalkozásokkal és értékes hálózati lehetőségekkel - ne hagyja ki. Most szerezze be Generate jegyét.
Ez a cikk eredetileg a net magazinban jelent meg 305. szám. Iratkozz fel most.
