Съдържание
- 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 Preprocessor на SCSS в падащите опции.
След това можем да започнем да добавяме в нашия HTML. Ще обгърнем раздел, наречен „наляво“ и раздел, наречен „надясно“ в клас на контейнер, като на двете секции е даден клас на „екран“.
div> section> / section> section> / section> / div>
02. Завършете HTML
За да завършим нашия HTML, ще добавим заглавие за всеки раздел, използвайки h1 етикет. Под това ще трябва да добавим бутон, който ще води към друга страница, ако това е проект от реалния свят. Ще дадем на този клас бутон за да запазите нещата хубави и прости.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Learn More / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Научете Още / a> / бутон> / раздел>
03. Разгледайте променливите на Sass
Единственото нещо, което всички обичаме в Sass, е използването на променливи. Въпреки че родните 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); $ hover-width: 75%; $ малка ширина: 25%; $ animateSpeed: 1000ms;
04. Регулирайте стила на тялото
Първо, ще изчистим всички подложки и полета по подразбиране към тялото и след това ще зададем семейството на шрифтовете на Open Sans. Това ще засегне само бутона, така че няма голямо значение какъв шрифт използваме. След това ще зададем ширината и височината на 100% и се уверете, че всичко, което прелива по оста X, се скрива.
html, body {подложка: 0; марж: 0; семейство шрифтове: ‘Open Sans’, sans-serif; ширина: 100%; височина: 100%; overflow-x: скрит; }
05. Оформете заглавията на секциите
Време е да изберете шрифт на Google за заглавията на раздели - избрахме Playfair Display. След това използвайте translateX можем да се уверим, че заглавията на разделите винаги са центрирани по оста X.
h1 {размер на шрифта: 5rem; цвят: #fff; позиция: абсолютна; ляво: 50%; отгоре: 20%; преобразуване: translateX (-50%); бяло пространство: сега семейство шрифтове: ‘Playfair Display’, засечка; }
06. Направете CTA да се открояват
Нашите бутони ще действат като нашите призиви за действие, така че те трябва да бъдат големи, смели и позиционирани там, където лесно да щракнете върху тях. И двата бутона ще имат бяла граница и интересен ефект на преход. Стиловете по подразбиране за двата бутона ще бъдат еднакви, но ние ще променим цветовете им при нанасяне на курсора на мишката.
.button {дисплей: блок; позиция: абсолютна; ляво: 50%; отгоре: 50%; височина: 2.6rem; подложка: 1.2rem; ширина: 15rem; подравняване на текст: център; цвят: бял; граница: 3px плътно #fff; граница-радиус: 4px; шрифт-тегло: 600; преобразуване на текст: главни букви; декорация на текст: няма; преобразуване: translateX (-50%); преход: всички .2s;
Основните бутони ще имат приятен лесен ефект на задържане и ще използваме променливите Sass, които сме посочили за цвета, който ще бъде подобен на фона на страницата.
.screen.left .button: hover {background-color: $ left-button-hover; цвят на границата: $ ляв бутон на мишката; } .screen.right .button: hover {background-color: $ 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 клас.
.screen.right {вдясно: 0; фон: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) център център без повторение; размер на фона: корица; &: преди {позиция: абсолютна; съдържание: ""; ширина: 100%; височина: 100%; фон: $ right-bgColor; }}
09. Добавете преходи и ефекти на курсора на мишката
Скоростта на анимация за нашия ефект на задържане на двата екрана ще се контролира от преход, който съдържа стойността на нашата променлива $ animateSpeed, което е 1000ms (една секунда). След това ще завършим, като дадем на анимацията малко улеснение, което е лекота навлизане и излизане, която ще ни помогне да получим по-плавна анимация.
.screen.left, .screen.right, .screen.right: преди, .screen.left: преди {преход: $ animateSpeed всички лекота на излизане; }
Това, което искаме да се случи сега, е, че когато задържите курсора на мишката върху левия екран, към този раздел ще бъде добавен клас, използващ JavaScript (който ще напишем в по-късна стъпка). Когато този клас се добави, тогава този екран ще се разтегне до каквато и да е ширината на променливата, която сме посочили - която ще бъде 75%, а след това дясната страна ще бъде настроена на по-малката променлива на ширината (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: преди {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 вдясно = doc.querySelector (". дясно"); const вляво = doc.querySelector (". ляво"); const контейнер = doc.querySelector (". контейнер");
Използвайки наляво постоянна променлива, която декларирахме в последната стъпка, вече можем да добавим слушател на събитие към нея. Това събитие ще бъде mouseenter събитие и вместо да използваме функция за обратно извикване, ще използваме друга ES6 функция, наречена Функции със стрелки ’(() =>).
// добавя клас към елемента на контейнера на курсора наляво.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Добавете и премахнете клас
В последната стъпка нашият слушател на събития добави a mouseenter събитие, което е насочено към основния клас контейнер и добавя нов клас, наречен задържане наляво до левия елемент на секцията. С това призовано добавяне, сега трябва да го премахнем, когато задържим курсора на мишката. Ще направим това, като използваме миши лист събитие и .Премахване() метод.
// премахва класа, който е добавен при нанасяне на курсора наляво.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 (максимална ширина: 800px) {h1 {размер на шрифта: 2rem; } .button {ширина: 12rem; }
Уверили сме се, че когато ширината на нашата страница стане до 800px, шрифтът и бутоните ще намалят по размер. Така че, за да довършим нещата, искаме да насочим и височината и да се уверим, че бутоните ни се придвижват надолу по страницата, когато височината на страницата стане под 700px.
@media (max-height: 700px) {.button {отгоре: 70%; }}
Искате ли да запазите страниците си? Експортирайте ги като PDF файлове и ги запазете в защитено облачно съхранение.
Събитие за уеб дизайн Генериране на Лондон връща се на 19-21 септември 2018 г., предлагащ пълен график на водещи в бранша говорители, цял ден семинари и ценни възможности за работа в мрежа - не го пропускайте. Вземете вашия Generate билет сега.
Тази статия първоначално е публикувана в списание net брой 305. Абонирай се сега.
