Зміст
- 01. Налаштуйся
- 02. Завершіть HTML
- 03. Дослідіть змінні Сасса
- 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 = "#"> Докладніше / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Дізнатися Більше / a> / button> / section>
03. Дослідіть змінні Сасса
Єдине, що ми всі любимо в 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); $ ширина наведення: 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. Потім використовуючи перекластиX ми можемо забезпечити, щоб заголовки розділів завжди були центровані на осі X.
h1 {розмір шрифту: 5rem; колір: #fff; позиція: абсолютна; ліворуч: 50%; зверху: 20%; перетворення: translateX (-50%); пробіл: nowrap; сімейство шрифтів: ‘Playfair Display’, зарубка; }
06. Виділіть CTA
Наші кнопки будуть діяти як наші заклики до дії, тому вони повинні бути великими, сміливими та розташованими там, де їх легко натиснути. Обидві кнопки матимуть білу облямівку та цікавий ефект переходу. Стилі за замовчуванням для обох кнопок будуть однаковими, однак ми змінимо їх кольори при наведенні.
.button {дисплей: блок; позиція: абсолютна; ліворуч: 50%; зверху: 50%; висота: 2.6рем; підкладка: 1.2rem; ширина: 15рем; вирівнювання тексту: по центру; колір: білий; межа: 3px суцільний #fff; радіус межі: 4 пікселі; шрифт-вага: 600; перетворення тексту: великі літери; оформлення тексту: жодного; перетворення: translateX (-50%); перехід: усі 0,2 секунди;
Основні кнопки матимуть приємний простий ефект наведення курсору, і ми будемо використовувати змінні 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; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) center center no-repeat; розмір фону: обкладинка; &: перед {позицією: абсолютна; зміст: ""; ширина: 100%; висота: 100%; фон: $ left-bgColor; }}
У правій частині сторінки також буде відображатися фонове зображення за допомогою imgbb, і ми встановимо колір тла на рожевий. Знову ж таки, ми встановили розмір фону покриття. Це дозволить нам охопити весь вміщуючий елемент, який у нашому випадку є .screen клас.
.screen.right {праворуч: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) center center no-repeat; розмір фону: обкладинка; &: перед {позицією: абсолютна; зміст: ""; ширина: 100%; висота: 100%; фон: $ right-bgColor; }}
09. Додайте переходи та ефекти наведення
Швидкість анімації для нашого ефекту наведення на обох екранах буде контролюватися переходом, який містить значення нашої змінної $ animateSpeed, що становить 1000 мс (одна секунда). Тоді ми закінчимо, додавши анімації деяке полегшення, що є легкістю входу та виходу, яка допоможе нам отримати більш плавну анімацію.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {перехід: $ 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 так кнопка заклику до дії стає більш помітною.
.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 left = doc.querySelector (". left"); const container = doc.querySelector (". контейнер");
Використання зліва константа змінної, яку ми оголосили на останньому кроці, тепер ми можемо додати до неї прослуховувач події. Ця подія буде мишоцентр події і замість функції зворотного виклику ми будемо використовувати іншу функцію ES6, яка називається Функції стрілок ’(() =>).
// додає клас до елемента-контейнера при наведенні курсору вліво.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Додавання та видалення класу
На останньому кроці наш слухач події додав a мишоцентр подія, яка націлена на основний клас контейнера та додає новий клас з назвою наведення вліво до елемента лівого розділу. З додаванням цього під назвою, нам тепер потрібно видалити його, коли ми наведемо курсор на нього. Ми зробимо це за допомогою листя миші подія та .remove () метод.
// видаляє клас, доданий при наведенні курсору вліво.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 {font-size: 2rem; } .button {ширина: 12рем; }
Ми переконалися, що коли ширина нашої сторінки зменшиться до 800 пікселів, шрифт та кнопки зменшаться. Отже, щоб закінчити справу, ми теж хочемо орієнтуватися на висоту та переконайтеся, що наші кнопки рухаються вниз по сторінці, коли висота сторінки опускається нижче 700 пікселів.
@media (max-height: 700px) {.button {top: 70%; }}
Хочете зберегти свої сторінки? Експортуйте їх як PDF-файли та збережіть у безпечному хмарному сховищі.
Подія веб-дизайну Генеруйте Лондон повертається 19-21 вересня 2018 року, пропонуючи насичений графік провідних спікерів, цілий день семінарів та цінні можливості для спілкування - не пропустіть. Отримайте свій квиток Generate зараз.
Ця стаття спочатку була опублікована в журналі net випуск 305. Підпишись зараз.
