Задаволены
- 01. Наладжвайцеся
- 02. Скончыце HTML
- 03. Даследуйце зменныя Саса
- 04. Адрэгулюйце стыль цела
- 05. Стылізуйце загалоўкі раздзелаў
- 06. Зрабіце галоўныя заклікі галоўнымі
- 07. Усталюйце фон і экраны кантэйнера
- 08. Дадайце фонавыя выявы
- 09. Дадайце пераходы і эфекты навядзення
- 10. Перайдзіце ў JavaScript
- 11. Дадайце і выдаліце клас
- 12. Зрабіце гэта спагадным
Ваша мэтавая старонка з'яўляецца найважнейшым элементам у макеце вашага сайта. Гэта першая рэальная магчымасць у вас, каб прадставіць свой бізнес альбо прадукт, які вы прадаеце, таму яго дызайн з'яўляецца ключавым. Мэтавыя старонкі распрацаваны з адзінай мэтавай мэтай, вядомай як заклік да дзеяння (CTA). Выкарыстанне кветак і малюнкаў для дапаўнення заклікаў да дзеяння і карыстацкага досведу неабходна.
- Глядзіце працоўны CodePen для гэтага ўроку
У гэтым уроку мы раскажам, як стварыць прывабную мэтавую старонку для выдуманага моднага брэнда. Ён будзе сканцэнтраваны на дызайне з падзеленым экранам з вялікімі малюнкамі і аніміраванымі пераходамі, якія адбываюцца пры навядзенні.На гэтай старонцы будуць дзве зразумелыя кнопкі закліку да дзеяння, і мы будзем выкарыстоўваць HTML, Sass для стылізацыі і налёт ванільнага JavaScript, які выкарыстоўвае сінтаксіс ES6 (не забудзьцеся пераканацца, што ваш вэб-хостынг адпавядае вашым патрэбнасцям). Занадта складаны? Стварыце сайт без неабходнасці выкарыстання кода, паспрабуйце просты канструктар сайтаў.
01. Наладжвайцеся
Калі вы выкарыстоўваеце CodePen, пераканайцеся, што CSS усталяваны ў "SCSS" у наладах Pen. Вы можаце ўнесці гэта змяненне, націснуўшы на ўкладку налад, выбраць «CSS» і змяніць CSS Preprocessor на SCSS у расчыняецца меню.
Тады мы можам пачаць дадаваць у наш HTML. Мы збіраемся разгарнуць раздзел пад назвай "злева" і раздзел "направа" у межах класа кантэйнера, а абодва раздзелы атрымаюць клас "screen".
div> section> / section> section> / section> / div>
02. Скончыце HTML
Каб дапрацаваць наш HTML, мы дадамо загаловак для кожнага раздзела, выкарыстоўваючы h1 пазнака. Пад гэтым нам трэба будзе дадаць кнопку, якая будзе спасылацца на іншую старонку, калі гэта будзе рэальны праект. Мы дамо гэтаму клас кнопка каб усё было проста і проста.
div> section> h1> Мужчынская мода / h1> button> a href = "#"> Даведацца больш / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Даведацца Дадаткова / a> / кнопка> / раздзел>
03. Даследуйце зменныя Саса
Адзінае, што мы ўсе любім у Сасе, - гэта выкарыстанне зменных. Нягледзячы на тое, што ўласныя пераменныя CSS атрымліваюць большую падтрымку, мы будзем сачыць за ўсё, выкарыстоўваючы Sass. Мы паставім іх на вяршыні нашага .scss, і вы можаце выбраць любы колер, які хочаце, але з выкарыстаннем rgba значэнні дадуць нам вялікую гнуткасць.
/ * * Зменныя * * / $ container-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); $ шырыня навядзення: 75%; $ малая шырыня: 25%; $ animateSpeed: 1000 мс;
04. Адрэгулюйце стыль цела
Па-першае, мы ачысцім усе абіўкі і палі па змаўчанні да цела, а потым усталюем сямейства шрыфтоў на Open Sans. Гэта адаб'ецца толькі на кнопцы, таму не мае вялікага значэння, які шрыфт мы выкарыстоўваем. Тады мы ўсталюем шырыню і вышыню 100% і пераканайцеся, што ўсё, што пераліваецца па восі X, будзе схавана.
html, body {адступ: 0; запас: 0; сямейства шрыфтоў: 'Open Sans', sans-serif; шырыня: 100%; вышыня: 100%; overflow-x: схаваны; }
05. Стылізуйце загалоўкі раздзелаў
Час выбраць шрыфт Google для назваў раздзелаў - мы абралі Playfair Display. Потым выкарыстоўваючы translateX мы можам пераканацца, што загалоўкі раздзелаў заўсёды сканцэнтраваны на восі X.
h1 {памер шрыфта: 5рэм; колер: #fff; пазіцыя: абсалютная; злева: 50%; зверху: 20%; пераўтварэнне: translateX (-50%); прабел: зараз; сямейства шрыфтоў: 'Displayfair Display', засечка; }
06. Зрабіце галоўныя заклікі галоўнымі
Нашы кнопкі будуць дзейнічаць як заклік да дзеяння, таму яны павінны быць вялікімі, смелымі і размяшчацца там, дзе на іх лёгка націснуць. Абедзве кнопкі будуць мець белую аблямоўку і цікавы эфект пераходу. Стылі па змаўчанні для абедзвюх кнопак будуць аднолькавымі, аднак мы зменім іх колер пры навядзенні.
.button {адлюстраванне: блок; пазіцыя: абсалютная; злева: 50%; зверху: 50%; вышыня: 2.6рэм; падшэўка: 1.2рэм; шырыня: 15рэм; выраўноўванне па тэксце: па цэнтры; колер: белы; мяжа: 3px цвёрдая #fff; мяжа-радыус: 4px; шрыфт-вага: 600; пераўтварэнне тэксту: вялікая літара; упрыгожванне тэксту: няма; пераўтварэнне: translateX (-50%); пераход: усе .2s;
Асноўныя кнопкі будуць мець прыемны просты эфект навядзення, і мы будзем выкарыстоўваць зменныя Sass, якія мы задалі для колеру, які будзе падобны на колер фону старонкі.
.screen.left .button: hover {фон-колер: $ левая кнопка-навядзенне; колер мяжы: $ левая кнопка навядзення; } .screen.right .button: hover {фон-колер: $ правая кнопка-навядзенне; колер мяжы: $ правая кнопка навядзення;
07. Усталюйце фон і экраны кантэйнера
Клас кантэйнера будзе выступаць у якасці абгорткі старонкі, і мы ўсталюем становішча гэтага як адноснае, проста таму, што мы хочам размясціць экраны ў абсалютным становішчы. Мы дамо кантэйнеру колер фону па змаўчанні, але, вядома, гэтага не будзе відаць, таму што мы будзем усталёўваць розныя колеры для абодвух фонаў экрана.
.container {пазіцыя: адносная; шырыня: 100%; вышыня: 100%; фон: $ container-BgColor; .screen {пазіцыя: абсалютная; шырыня: 50%; вышыня: 100%; перапаўненне: схаванае; }}
08. Дадайце фонавыя выявы
У левым і правым раздзелах будзе адлюстроўвацца малюнак, і вы можаце знайсці бясплатныя выявы запасаў з такіх сайтаў, як Unsplash, Pixabay або Pexels (якія я выкарыстаў у гэтым уроку). Каб зрабіць усё прасцей, я выкарыстаў бясплатны сэрвіс хостынгу і сумеснага выкарыстання малюнкаў пад назвай imgbb, на які мы можам зрабіць спасылку ў нашым 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: before, .screen.left: before {пераход: $ animateSpeed усе зручнасці; }
Цяпер мы хочам, каб пры навядзенні курсора на левы экран у гэты раздзел быў дададзены клас з выкарыстаннем JavaScript (пра што мы напішам на наступным этапе). Пры даданні гэтага класа экран расцягнецца на любую шырыню пераменнай, якую мы ўказалі, - 75%, а ў правай частцы - меншую шырыню (25%).
.hover-злева .left {шырыня: $ hover-width; } .hover-left .right {width: $ small-width; } .наведзіце налева .права: перад {z-index: 2; }
Гэта працуе сапраўды гэтак жа, як і ў левай частцы, дзе пры навядзенні курсора мышы з дапамогай JavaScript будзе дададзены новы клас, і правы экран адпаведна расцягнецца. Мы таксама павінны пераканацца ў z-індэкс усталяваны 2 так кнопка CTA становіцца больш прыкметнай.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: перад {z-index: 2; }
10. Перайдзіце ў JavaScript
Мы будзем выкарыстоўваць дотык ванільнага JavaScript, каб дапамагчы нам дадаваць і выдаляць класы CSS, а таксама будзем выкарыстоўваць некаторыя новыя функцыі ES6. Першае, што нам трэба зрабіць, гэта аб'явіць некаторыя пастаянныя зменныя.
Таму што мы будзем выкарыстоўваць дакумент не раз мы ўсталюем пастаянную зменную з назвай дак і захоўвайце дакумент у гэтым месцы, каб мы маглі зрабіць слова "дакумент" прыемным і кароткім.
const doc = дакумент;
Цяпер нам трэба ўсталяваць яшчэ тры канстанты, якія будуць захоўваць .правільна, .злева і .кантэйнер селектары. Прычына, па якой мы выкарыстоўваем канстанты, заключаецца ў тым, што мы ведаем, што не хочам мяняць іх значэнне, таму выкарыстанне канстант мае сэнс. Цяпер мы можам дадаваць да іх некаторыя падзеі мышы.
const right = doc.querySelector (". справа"); const злева = doc.querySelector (". злева"); const container = doc.querySelector (". кантэйнер");
Выкарыстанне злева пастаянная зменная, якую мы абвясцілі на апошнім этапе, зараз мы можам дадаць да яе слухач падзеі. Гэта падзея будзе мышыны цэнтр і замест выкарыстання функцыі зваротнага выкліку мы будзем выкарыстоўваць іншую функцыю ES6 Функцыі стрэлак '(() =>).
// дадае клас да элемента кантэйнера пры навядзенні курсора left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Дадайце і выдаліце клас
На апошнім этапе наш слухач падзеі дадаў а мышыны цэнтр падзея, якая накіравана на асноўны клас кантэйнера і дадае новы клас пад назвай навядзіце курсор налева да левага раздзела. З даданнем гэтага званка нам зараз трэба выдаліць яго, калі мы наводзім курсор на яго. Мы зробім гэта, выкарыстоўваючы мышыны ліст падзея і .remove () метад.
// выдаляе клас, які быў дададзены пры навядзенні курсора left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Да гэтага часу мы рабілі ўсё на левым экране. Зараз мы дапрацуем JavaScript і дададзім і выдалім класы ў патрэбных элементах раздзела. Тут мы зноў выкарысталі сінтаксіс функцый стрэлак, каб усё выглядала прыгожа і акуратна.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Зрабіце гэта спагадным
Ні адзін праект - незалежна ад таго, наколькі ён вялікі альбо малы - не павінен пазбягаць рэагавання. Такім чынам, на гэтым этапе мы дададзім некалькі мультымедыйных запытаў у наш CSS і зробім гэты невялікі праект максімальна адаптыўным да мабільных прылад. Варта праверыць арыгінальны CodePen, каб убачыць, як гэта працуе.
@media (максімальная шырыня: 800 пікселяў) {h1 {памер шрыфта: 2rem; } .button {шырыня: 12рэм; }
Мы пераканаліся, што калі шырыня нашай старонкі паменшыцца да 800 пікселяў, шрыфт і кнопкі паменшацца. Такім чынам, каб скончыць справу, мы таксама хочам арыентавацца на вышыню і пераканайцеся, што нашы кнопкі перамяшчаюцца ўніз па старонцы, калі вышыня старонкі становіцца ніжэй 700px.
@media (максімальная вышыня: 700 пікселяў) {.button {зверху: 70%; }}
Хочаце захаваць свае старонкі? Экспартуйце іх у выглядзе PDF-файлаў і захавайце ў бяспечным воблачным сховішчы.
Падзея вэб-дызайну Стварыць Лондан вяртаецца 19-21 верасня 2018 г., прапаноўваючы насычаны графік вядучых у галіне дынамікаў, цэлы дзень семінараў і каштоўныя сеткавыя магчымасці - не прапусціце. Атрымай свой білет Generate зараз.
Гэты артыкул быў першапачаткова апублікаваны ў часопісе net выпуск 305. Падпішыцеся зараз.
