Innehåll
- 01. Kom igång
- 02. Avsluta HTML
- 03. Utforska Sass-variabler
- 04. Justera kroppsstilen
- 05. Stil sektionstitlarna
- 06. Få uppmaningarna att sticka ut
- 07. Ställ in behållarens bakgrund och skärmar
- 08. Lägg till bakgrundsbilder
- 09. Lägg till övergångar och svävaffekter
- 10. Gå till JavaScript
- 11. Lägg till och ta bort en klass
- 12. Gör det lyhört
Din målsida är ett viktigt inslag i din webbplatslayout. Det är den första verkliga möjligheten du har att presentera ditt företag eller den produkt du säljer, så dess design är nyckeln. Målsidor är utformade med ett enda fokuserat mål som kallas en uppmaning till handling (CTA). Användningen av färger och bilder för att komplettera uppmaningarna till handling och användarupplevelsen är ett måste.
- Se den fungerande CodePen för den här handledningen
I den här handledningen går vi igenom hur man bygger en engagerande målsida för ett fiktivt modemärke. Det kommer att vara centrerat kring en delad skärmdesign med stora bilder och animerade övergångar som händer på svävaren.Den här sidan kommer att ha två tydliga uppmaningsknappar och vi använder HTML, Sass för styling och en touch av vanilj JavaScript som använder ES6-syntaxen (kom ihåg att se till att ditt webbhotell passar dina webbplatsbehov). För komplicerat? Skapa en webbplats utan behov av kod, prova en enkel webbplatsbyggare.
01. Kom igång
Om du använder CodePen, se till att CSS är inställt på 'SCSS' i penninställningarna. Du kan göra denna ändring genom att klicka på inställningsfliken, välja ”CSS” och ändra CSS Preprocessor till SCSS i rullgardinsalternativen.
Sedan kan vi börja lägga till i vår HTML. Vi kommer att slå in ett avsnitt som heter 'vänster' och ett avsnitt som heter 'höger' i en behållarklass, med båda sektionerna en klass 'skärm'.
div> avsnitt> / avsnitt> avsnitt> / avsnitt> / div>
02. Avsluta HTML
För att slutföra vår HTML lägger vi till en titel för varje avsnitt med hjälp av en h1 märka. Under det måste vi lägga till en knapp som länkar till en annan sida om detta var ett verkligt projekt. Vi kommer att ge detta en klass av knapp för att hålla saker trevliga och enkla.
div> avsnitt> h1> Herrmode / h1> knapp> a href = "#"> Läs mer / a> / knapp> / sektion> avsnitt> h1> Dammode / h1> knapp> a href = "#"> Lär dig Mer / a> / knapp> / avsnitt>
03. Utforska Sass-variabler
Det enda vi alla älskar med Sass är användningen av variabler. Även om inbyggda CSS-variabler får mer stöd kommer vi att hålla saker säkra genom att använda Sass. Vi kommer att sätta dessa högst upp på vår .scss, och du kan välja vilka färger du vill, men använda rgba värden kommer att ge oss mer flexibilitet.
/ * * Variabler * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ vänster-knapp-svävar: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ höger-knapp-sväva: rgba (255, 140, 219, 0.7); $ svävarbredd: 75%; $ liten bredd: 25%; $ animateSpeed: 1000 ms;
04. Justera kroppsstilen
För det första kommer vi att rensa all standard vaddering och marginal i kroppen och sedan ställa in teckensnittsfamiljen till Open Sans. Detta påverkar bara knappen, så det spelar ingen roll för vilket typsnitt vi använder. Sedan ställer vi in bredd och höjd till 100% och se till att allt som rinner över på X-axeln blir dolt.
html, body {padding: 0; marginal: 0; font-family: 'Open Sans', sans-serif; bredd: 100%; höjd: 100%; overflow-x: dold; }
05. Stil sektionstitlarna
Det är dags att välja ett Google-teckensnitt för sektionstitlarna - vi har valt Playfair Display. Använd sedan translateX vi kan se till att sektionstitlarna alltid är centrerade på X-axeln.
h1 {font-size: 5rem; färg: #fff; position: absolut; vänster: 50%; topp: 20%; transform: translateX (-50%); white-space: nowrap; font-family: 'Playfair Display', serif; }
06. Få uppmaningarna att sticka ut
Våra knappar fungerar som våra uppmaningar till handling, så dessa måste vara stora, djärva och placerade där de är lätta att klicka. Båda knapparna har en vit kant och en intressant övergångseffekt. Standardstilarna för båda knapparna kommer att vara desamma, men vi ändrar deras färger när du svävar.
.knapp {display: block; position: absolut; vänster: 50%; topp: 50%; höjd: 2.6rem; stoppning: 1.2rem; bredd: 15rem; textjustera: centrum; färg vit; gräns: 3px fast #fff; gränsradie: 4 pixlar; font-vikt: 600; text-transform: versaler; text-dekoration: ingen; transform: translateX (-50%); övergång: alla .2s;
Huvudknapparna kommer att ha en fin enkel svävareffekt och vi kommer att använda Sass-variablerna som vi angav för färgen, som kommer att ha en liknande färg som bakgrunden på sidan.
.screen.left .button: sväva {bakgrundsfärg: $ vänster-knapp-sväva; border-color: $ left-button-hover; } .screen.right .button: sväva {bakgrundsfärg: $ höger knapp-sväva; border-color: $ höger-knapp-svävar;
07. Ställ in behållarens bakgrund och skärmar
Containerklassen kommer att fungera som vår sidomslag och vi kommer att ställa in positionen för denna till relativt, helt enkelt för att vi vill placera skärmarna till absolut positionering. Vi kommer att ge behållaren en standardbakgrundsfärg, men detta kommer naturligtvis inte att ses eftersom vi kommer att ställa in olika färger på båda skärmbakgrunderna.
.container {position: relativ; bredd: 100%; höjd: 100%; bakgrund: $ container-BgColor; .screen {position: absolut; bredd: 50%; höjd: 100%; överflöd: dold; }}
08. Lägg till bakgrundsbilder
Både vänster och höger sektion visar en bild och du kan hitta royaltyfria stockbilder från webbplatser som Unsplash, Pixabay eller Pexels (som jag har använt i den här guiden). För att göra det enklare har jag använt en gratis tjänst för webbhotell och delning som heter imgbb som vi kan länka till i vårt CSS.
.screen.left {vänster: 0; bakgrund: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center no-repeat; bakgrundsstorlek: omslag; &: före {position: absolut; innehåll: ""; bredd: 100%; höjd: 100%; bakgrund: $ left-bgColor; }}
På höger sida av sidan visas också en bakgrundsbild med imgbb, och vi ställer in bakgrundsfärgen till rosa. Återigen ställer vi bakgrundsstorleken till omslag. Detta gör att vi kan täcka hela det innehållande elementet, vilket i vårt fall är .skärm klass.
.screen.right {höger: 0; bakgrund: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center no-repeat; bakgrundsstorlek: omslag; &: före {position: absolut; innehåll: ""; bredd: 100%; höjd: 100%; bakgrund: $ right-bgColor; }}
09. Lägg till övergångar och svävaffekter
Animationshastigheten för vår svävareffekt på båda skärmarna styrs av en övergång som håller värdet på vår variabel $ animateSpeed, vilket är 1000 ms (en sekund). Då avslutar vi med att ge animationen lättare, vilket är lätt och in och ut som hjälper oss att få en mjukare animering.
.screen.left, .screen.right, .screen.right: before, .screen.left: före {övergång: $ animateSpeed all eas-in-out; }
Vad vi vill ska hända nu är att när du svävar över den vänstra skärmen kommer det att läggas till en klass i det avsnittet med JavaScript (som vi kommer att skriva i ett senare steg). När den här klassen läggs till sträcker sig skärmen till oavsett bredden på variabeln som vi angav - vilken kommer att vara 75%, och sedan kommer höger sida att ställas in på den mindre breddvariabeln (25%).
. vänster. vänster. vänster {bredd: $ svävarbredd; }. över vänster. höger {bredd: $ liten bredd; }. över vänster. höger: före {z-index: 2; }
Detta fungerar exakt på samma sätt som till vänster, där en ny klass läggs till på musen med JavaScript och den högra skärmen sträcker sig därefter. Vi måste också se till att z-index är satt till 2 så CTA-knappen blir mer framträdande.
.hover-right .right {width: $ hover-width; }. höger-höger. vänster {bredd: $ liten bredd; }. höger-höger. vänster: före {z-index: 2; }
10. Gå till JavaScript
Vi kommer att använda en touch av vanilj JavaScript för att hjälpa oss lägga till och ta bort CSS-klasser och vi kommer också att använda några av de nya ES6-funktionerna. Det första vi behöver göra är att deklarera några konstanta variabler.
Eftersom vi kommer att använda dokumentera mer än en gång kommer vi att ställa in en konstant variabel som kallas dok och lagra dokumentet i det så att vi kan hålla ordet ”dokument” snyggt och kort.
const doc = dokument;
Nu måste vi ställa in ytterligare tre konstanter som kommer att lagra .rätt, .vänster och .behållare väljare. Anledningen till att vi använder konstanter är att vi vet att vi inte vill ändra värdet på dessa, så det är vettigt att använda konstanter. Med dessa inställda kan vi fortsätta och lägga till några mushändelser till dem.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Använda vänster konstant variabel som vi förklarade i det sista steget, kan vi nu lägga till en händelse lyssnare till den. Detta evenemang kommer att bli musenter händelse och istället för att använda en återuppringningsfunktion använder vi en annan ES6-funktion som heter Pilfunktioner ’(() =>).
// lägger till en klass i behållarelementet på hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Lägg till och ta bort en klass
I det sista steget lade vår eventlyssnare till en musenter händelse som riktar sig till huvudbehållarklassen och lägger till en ny klass som kallas sväva-vänster till vänster sektionselement. Med det här kallade tillagda måste vi nu ta bort det när vi svävar av det. Vi gör detta med hjälp av mouseleave händelse och .avlägsna() metod.
// tar bort klassen som har lagts till på hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Hittills har vi gjort allt på vänster skärm. Nu kommer vi att avsluta JavaScript och lägga till och ta bort klasser på höger sektionselement. Återigen har vi använt pilfunktionens syntax här för att hålla allt snyggt och snyggt.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Gör det lyhört
Inget projekt - oavsett hur stort eller litet - bör undvika att bli lyhörd. Så i det här steget kommer vi att lägga till några mediefrågor i vår CSS och göra detta lilla projekt så anpassningsbart till mobila enheter som möjligt. Det är värt att kolla in den ursprungliga CodePen för att se hur detta fungerar.
@media (max-bredd: 800 pixlar) {h1 {font-size: 2rem; } .knapp {bredd: 12rem; }
Vi har försäkrat oss om att teckensnittet och knapparna kommer att minska när bredden på vår sida kommer ner till 800 pixlar. Så för att avsluta sakerna vill vi också rikta in höjden och se till att våra knappar rör sig nedåt på sidan när sidhöjden blir under 700 pixlar.
@media (max-höjd: 700px) {.knapp {topp: 70%; }}
Vill du spara dina sidor? Exportera dem som PDF-filer och spara dem i säkert molnlagring.
Webbdesign händelse Generera London återvänder den 19-21 september 2018 och erbjuder ett fullsatt schema med branschledande talare, en hel dag med workshops och värdefulla nätverksmöjligheter - missa inte det. Skaffa din Generate-biljett nu.
Denna artikel publicerades ursprungligen i nettotidningen nummer 305. Prenumerera nu.
