Բովանդակություն
- 01. Տեղադրեք
- 02. HTML- ն ավարտիր
- 03. Ուսումնասիրեք Sass փոփոխականները
- 04. Կարգավորեք մարմնի ոճավորումը
- 05. Ոճավորիր բաժնի վերնագրերը
- 06. Կատարեք CTA- ների առանձնացում
- 07. Սահմանեք տարայի ֆոնը և էկրանները
- 08. Ավելացնել ֆոնային պատկերներ
- 09. Ավելացնել անցումներ և սավառնել էֆեկտներ
- 10. Տեղափոխեք JavaScript
- 11. Ավելացնել և հանել դասարան
- 12. Դարձրեք այն պատասխանատու
Ձեր վայրէջքի էջը կարևոր տարր է ձեր կայքի դասավորության մեջ: Դա ձեր բիզնեսը կամ ձեր վաճառած ապրանքը ներկայացնելու առաջին իրական հնարավորությունն է, ուստի դրա ձևավորումն առանցքային է: Վայրէջքի էջերը կազմված են մեկ կենտրոնացված նպատակի հետ, որը հայտնի է որպես գործողության կոչ (CTA): Գործողության կոչերն ու օգտագործողի փորձը լրացնելու համար գույների և պատկերների օգտագործումը պարտադիր է:
- Տե՛ս աշխատանքային CodePen- ը այս ձեռնարկի համար
Այս ձեռնարկի ընթացքում մենք կտեսնենք, թե ինչպես կարելի է կառուցել գրավիչ վայրէջքի էջ հորինված նորաձեւության ապրանքանիշի համար: Այն կենտրոնանալու է պառակտված էկրանի դիզայնի շուրջ ՝ մեծ պատկերներով և անիմացիոն անցումներով, որոնք տեղի են ունենում սավառնելիս:Այս էջը կունենա գործողության կոչի երկու հստակ կոճակ, և մենք կօգտագործենք HTML, Sass ոճավորելու համար և վանիլային JavaScript հպում, որն օգտագործում է ES6 շարահյուսությունը (հիշեք, որ ձեր վեբ հոստինգը համապատասխանում է ձեր վեբ կայքի կարիքներին): Չափազանց բարդ Ստեղծեք կայք ՝ առանց կոդի անհրաժեշտության, փորձեք պարզ կայք ստեղծող:
01. Տեղադրեք
Եթե CodePen եք օգտագործում, համոզվեք, որ CSS- ը դրված է «SCSS» գրիչի կարգավորումներում: Այս փոփոխությունը կարող եք կատարել ՝ կտտացնելով պարամետրերի ներդիրին, ընտրեք «CSS» - ը և բացվող ընտրանքներում փոխել CSS- ի նախնական մշակողը SCSS- ի:
Դրանից հետո մենք կարող ենք սկսել ավելացնել մեր HTML- ը: Մենք պատրաստվում ենք փաթեթավորել մի բաժին, որը կոչվում է «ձախ» և մի բաժին, որը կոչվում է «աջ» ՝ տարայի դասի մեջ, և երկու բաժիններին էլ տրված է «էկրանի» դաս:
div> բաժին> / բաժին> բաժին> / բաժին> / div>
02. HTML- ն ավարտիր
Մեր HTML- ը վերջնական տեսքի բերելու համար մենք յուրաքանչյուր բաժնի համար վերնագիր կավելացնենք ՝ օգտագործելով an հ 1 պիտակ Դրա տակ մենք պետք է ավելացնենք կոճակը, որը կապվում է մեկ այլ էջի, եթե սա իրական կյանքի նախագիծ էր: Մենք այս դասին կտանք կոճակ գործերը գեղեցիկ ու պարզ պահելու համար:
div> section> h1> Mens Fashion / h1> կոճակ> a href = "#"> Իմացեք ավելին / a> / կոճակ> / բաժին> բաժին> h1> Womens Fashion / h1> կոճակ> a href = "#"> Իմացեք Ավելին / ա> / կոճակ> / բաժին>
03. Ուսումնասիրեք Sass փոփոխականները
Մի բան, որը մենք բոլորս սիրում ենք Sass- ում, փոփոխականների օգտագործումն է: Չնայած հայրենի CSS փոփոխականներն ավելի շատ աջակցություն են ստանում, մենք Sass- ի միջոցով գործերը կպահպանենք: Մենք դրանք կդնենք մեր գագաթին .scss, և դուք կարող եք ընտրել այն գույները, որոնք ցանկանում եք, բայց օգտագործելով rgba արժեքները մեզ ավելի շատ ճկունություն կտան:
/ * * Փոփոխականներ * * / $ կոնտեյներ-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ ձախ կոճակով սավառնել ՝ rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ աջ կոճակով սավառնել ՝ rgba (255, 140, 219, 0.7); $ hover- լայնությունը `75%; $ փոքր լայնություն `25%; $ animateSpeed: 1000 մմ;
04. Կարգավորեք մարմնի ոճավորումը
Նախ, մենք մաքրելու ենք բոլոր լռելյայն լցոնումը և լուսանցքը դեպի մարմինը, իսկ այնուհետև տառատեսակների ընտանիքը սահմանելու ենք «Բաց սանսներ»: Սա կանդրադառնա միայն կոճակի վրա, ուստի շատ կարևոր չէ, թե ինչ տառատեսակ ենք օգտագործում: Դրանից հետո մենք սահմանելու ենք լայնությունը և բարձրությունը 100% և համոզվեք, որ այն ամենը, ինչ հորդում է X առանցքի վրա, թաքնվում է:
html, body {padding: 0; լուսանցք ՝ 0; font-family: 'Open Sans', sans-serif; լայնությունը `100%; բարձրությունը `100%; overflow-x: թաքնված; }
05. Ոճավորիր բաժնի վերնագրերը
Sectionամանակն է բաժնի վերնագրերի համար ընտրել Google տառատեսակ. Մենք ընտրել ենք Playfair Display: Հետո օգտագործելով թարգմանել X մենք կարող ենք համոզվել, որ բաժնի վերնագրերը միշտ կենտրոնացած են X առանցքի վրա:
h1 {font-size: 5rem; գույնը ՝ #fff; դիրքը ՝ բացարձակ; մնացել է ՝ 50%; վերև ՝ 20%; փոխակերպել. թարգմանել X (-50%); սպիտակ-տարածություն. այժմ font-family: 'Playfair Display', serif; }
06. Կատարեք CTA- ների առանձնացում
Մեր կոճակները գործելու են որպես գործողությունների կոչեր, ուստի դրանք պետք է լինեն մեծ, համարձակ և տեղակայված այնտեղ, որտեղ կտտացնում են դրանք: Երկու կոճակները կունենան սպիտակ եզրագիծ և հետաքրքիր անցումային ազդեցություն: Երկու կոճակների համար լռելյայն ոճերը նույնը կլինեն, սակայն դրանց գույները սավառնելիս կփոխենք:
. կոճակ {ցուցադրում: բլոկ; դիրքը ՝ բացարձակ; մնացել է ՝ 50%; վերև ՝ 50%; բարձրությունը `2.6rem; լցոնման գագաթ. 1.2rem; լայնությունը `15rem; տեքստի հավասարեցում. կենտրոն; գույնը `սպիտակ; եզրագիծ ՝ 3px պինդ #fff; սահման-շառավիղ `4px; տառատեսակի քաշը ՝ 600; տեքստի վերափոխում. մեծատառ; տեքստային զարդարանք. ոչ մեկը; փոխակերպել. թարգմանել X (-50%); անցում ՝ բոլոր .2-երը;
Հիմնական կոճակները կունենան գեղեցիկ պարզ սավառնելու էֆեկտ, և մենք կօգտագործենք գույնի համար նշածս Sass փոփոխականները, որոնք նման կլինեն էջի ֆոնին:
.screen.left. կոճակը ՝ hover {background-color: $ left-button-hover; եզրագույնը ՝ $ ձախ կոճակ-սավառնել; } .screen.right. կոճակը ՝ hover {background-color: $ right-button-hover; եզրագույնը ՝ $ աջ կոճակի սավառնել;
07. Սահմանեք տարայի ֆոնը և էկրանները
Կոնտեյների դասը կգործի որպես մեր էջի փաթաթիչ, և մենք դրա դիրքը կսահմանենք հարաբերականորեն, պարզապես այն պատճառով, որ ցանկանում ենք էկրանները տեղավորել բացարձակ դիրքով: Մենք կոնտեյներին տալու ենք նախադրյալ ֆոնի գույն, բայց, իհարկե, դա չի երեւա, քանի որ տարբեր գույներ ենք դնելու էկրանի երկու ֆոններին:
. կոնտեյներ {դիրքը: հարաբերական; լայնությունը `100%; բարձրությունը `100%; ֆոն `$ կոնտեյներ-BgColor; . էկրան {դիրքը ՝ բացարձակ; լայնությունը `50%; բարձրությունը `100%; վարարում ՝ թաքնված; }}
08. Ավելացնել ֆոնային պատկերներ
Թե ձախ, թե աջ բաժինները կցուցադրեն պատկեր, և դուք կարող եք գտնել ֆոնդային ռոյալթի անվճար պատկերներ կայքերից, ինչպիսիք են Unsplash, Pixabay կամ Pexels (որոնք ես օգտագործել եմ այս ձեռնարկում): Գործերն ավելի հեշտ դարձնելու համար ես օգտագործել եմ իմիջբբ անունով պատկերի հոստինգի և համօգտագործման անվճար ծառայություն, որին կարող ենք կապել մեր CSS- ում:
.screen.left {ձախ: 0; ֆոն ՝ url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) կենտրոնի կենտրոնի կրկնություն; ֆոնի չափը ՝ կազմ; &: նախքան {դիրքը ՝ բացարձակ; բովանդակություն ՝ ""; լայնությունը `100%; բարձրությունը `100%; ֆոն ՝ $ left-bgColor; }}
Էջի աջ կողմում նույնպես ֆոնային պատկեր կցուցադրվի, օգտագործելով imgbb, և մենք ֆոնի գույնը կդնենք վարդագույն: Կրկին, մենք սահմանեցինք ֆոնի չափը ծածկոց, Սա մեզ թույլ կտա ծածկել պարունակող ամբողջ տարրը, որը մեր պարագայում է .էկրան դասարան
.screen.right {աջ: 0; ֆոն ՝ url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) կենտրոնի կենտրոնի անկրկնում; ֆոնի չափը ՝ կազմ; &: նախքան {դիրքը ՝ բացարձակ; բովանդակություն ՝ ""; լայնությունը `100%; բարձրությունը `100%; ֆոն `$ right-bgColor; }}
09. Ավելացնել անցումներ և սավառնել էֆեկտներ
Երկու էկրանների վրա մեր սավառնելի էֆեկտի անիմացիայի արագությունը կկարգավորվի մեր փոփոխականի արժեքը պահող անցումով $ animateSpeed, որը 1000 մմ է (մեկ վայրկյան): Այնուհետև մենք կավարտենք `անիմացիային որոշակի մեղմացում տալով, ինչը հեշտ և հեշտ է, ինչը կօգնի մեզ ավելի հարթ անիմացիա տալ:
.screen.left, .screen.right, .screen.right: առաջ, .screen.left: նախքան {անցումը: $ animateSpeed- ը բոլոր հեշտությամբ դուրս գալը; }
Այն, ինչ մենք հիմա ուզում ենք պատահել, այն է, որ երբ դուք սավառնում եք ձախ էկրանի վրա, այդ հատվածին ավելացվելու է դաս ՝ JavaScript- ի միջոցով (որը մենք կգրենք հետագա քայլով): Երբ այս դասը ավելացվի, այդ էկրանը կձգվի `կախված մեր նշած փոփոխականի լայնությունից, որը կլինի 75%, իսկ հետո աջ կողմը կսահմանվի ավելի փոքր լայնության փոփոխականի (25%):
.փոխել ձախից. ձախից {լայնությունը ՝ $ hover-width; } .փոխեք ձախից. աջից {լայնությունը ՝ $ small-width; } .Շարժեք ձախից. աջից ՝ նախքան {z-index: 2; }
Սա աշխատում է ճիշտ այնպես, ինչպես ձախ կողմում, որտեղ JavaScript- ի միջոցով մկնիկի սավառնելիս կավելացվի նոր դաս, և համապատասխանաբար կտարածվի աջ էկրանը: Մենք նաև պետք է համոզվենք, որ z- ինդեքս դրված է 2 այնպես որ CTA կոճակն ավելի ակնառու է դառնում:
.ասել աջից. աջից {լայնությունը ՝ $ hover-width; } .փոխել աջ-աջ .լախ {լայնությունը `$ փոքր լայնություն; } .փոխել աջ-ձախ. ձախից ՝ նախքան {z- ինդեքսը ՝ 2; }
10. Տեղափոխեք JavaScript
Մենք կօգտագործենք վանիլային JavaScript- ի հպում, որը կօգնի մեզ ավելացնել և հեռացնել CSS դասեր, ինչպես նաև կօգտագործենք որոշ նոր ES6 առանձնահատկություններ: Առաջին բանը, որ մենք պետք է անենք, հայտարարենք որոշ հաստատուն փոփոխականներ:
Քանի որ մենք կօգտագործենք փաստաթուղթ մեկից ավելի անգամ մենք կսահմանենք անընդհատ փոփոխական, որը կոչվում է դոկտ և պահեք փաստաթուղթը դրա մեջ, որպեսզի կարողանանք «փաստաթուղթ» բառը գեղեցիկ և կարճ պահել:
const doc = փաստաթուղթ;
Այժմ մենք պետք է սահմանենք ևս երեք հաստատուններ, որոնք կպահպանեն կայանը .ճիշտ, .ձախ և . տարա ընտրողներ: Անընդհատներ օգտագործելու պատճառն այն է, որ մենք գիտենք, որ չենք ուզում փոխել դրանց արժեքը, ուստի հաստատունների օգտագործումը իմաստ ունի: Սրանք, որոնք այժմ դրված են, մենք կարող ենք առաջ գնալ և դրանց ավելացնել մուկի որոշ իրադարձություններ:
const right = doc.querySelector (". աջ"); const ձախ = doc.querySelector (". ձախ"); const կոնտեյներ = doc.querySelector (". կոնտեյներ");
Օգտագործելով ձախ հաստատուն փոփոխական, որը մենք հայտարարեցինք վերջին քայլում, և այժմ կարող ենք դրան ավելացնել իրադարձության ունկնդիր: Այս իրադարձությունը կլինի մկնիկի կենտրոն իրադարձություն և հետ կանչելու գործառույթ օգտագործելու փոխարեն, մենք կօգտագործենք մեկ այլ ES6 հատկություն, որը կոչվում է Arrow գործառույթներ '(() =>).
// դաս է ավելացնում բեռնարկղի տարրին ՝ hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Ավելացնել և հանել դասարան
Վերջին քայլում մեր միջոցառման ունկնդիրը ավելացրեց ա մկնիկի կենտրոն իրադարձություն, որը ուղղված է հիմնական տարայի դասին և ավելացնում է նոր դաս, որը կոչվում է սավառնել-ձախ դեպի ձախ հատվածի տարր: Այս կոչվածի ավելացմամբ ՝ մենք այժմ պետք է հեռացնենք այն, երբ սավառնել ենք դրա վրայից: Մենք դա կանենք ՝ օգտագործելով մկանը իրադարձությունը և .հեռացնել () մեթոդ
// հեռացնում է այն դասը, որը ավելացվել է hover left.addEventListener- ին ("mouseleave", () => {container.classList.remove ("hover-left");});
Մինչ այժմ մենք ամեն ինչ արել ենք ձախ էկրանին: Այժմ մենք կավարտենք JavaScript- ը և կավելացնենք և կհանենք դասեր աջ հատվածի տարրերի վրա: Կրկին մենք այստեղ օգտագործել ենք սլաքի ֆունկցիայի շարահյուսությունը, որպեսզի ամեն ինչ գեղեցիկ և կոկիկ լինի:
right.addEventListener ("mouseenter", () => {container.classList.add ("սավառնել աջից");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("սավառնել աջից");});
12. Դարձրեք այն պատասխանատու
Ոչ մի նախագիծ, անկախ նրանից մեծ կամ փոքր, չպետք է խուսափի պատասխանատու լինելուց: Այսպիսով, այս քայլում մենք մեր CSS- ին կավելացնենք որոշ լրատվամիջոցների հարցումներ և այս փոքր նախագիծը կդարձնենք հնարավորինս հարմարեցված շարժական սարքերի համար: Արժե ստուգել բնօրինակ CodePen- ը `տեսնելու, թե ինչպես է դա գործում:
@media (առավելագույն լայնությունը ՝ 800px) {h1 {font-size: 2rem; }. կոճակը {լայնությունը ՝ 12 վեր; }
Մենք համոզվել ենք, որ երբ մեր էջի լայնությունը իջնի 800 px, տառատեսակը և կոճակները կկրճատվեն իրենց չափսերից: Այսպիսով, ամեն ինչ ավարտելու համար մենք ուզում ենք թիրախավորել նաև բարձրությունը և համոզվել, որ մեր կոճակները կտեղափոխվեն էջի վրա, երբ էջի բարձրությունը 700 px- ից ցածր լինի:
@media (առավելագույն բարձրությունը ՝ 700px) {. կոճակ {վերև ՝ 70%; }}
Wantանկանու՞մ եք պահպանել ձեր էջերը: Արտահանեք դրանք որպես PDF ֆայլեր և պահեք դրանք ամպային պահեստում:
Վեբ ձևավորման միջոցառում Ստեղծեք Լոնդոն վերադառնում է 2018 թ.-ի սեպտեմբերի 19-21-ը `առաջարկելով ոլորտի առաջատար բանախոսների փաթեթավորված գրաֆիկ, սեմինարների ամբողջ օր և ցանցային արժեքավոր հնարավորություններ` մի կարոտեք այն: Ստացեք ձեր Generate տոմսը հիմա.
Այս հոդվածն ի սկզբանե տպագրվել է net ամսագրում թողարկում 305. Բաժանորդագրվեք հիմա.
