Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Створюємо навігаційну панель з крутою анімацією за допомогою CSS та jQuery

by
Read Time:13 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Анімація та візуальний зворотний зв'язок – відмінні способи підтримки користувача при навігації та взаємодії з веб-сайтом. Хоча звичайно Adobe Flash (* мультимедійна програмна платформа компанії Adobe Systems для створення веб-додатків, рекламних банерів, анімацій, ігор, десктопних застосувань і також для виконання на веб-сторінках відео- та аудіозаписів. У липні 2017 року Adobe визнала технологію Flash застарілою, її життєвий   цикл буде завершено наприкінці 2020 року, коли Adobe припинить підтримку та розповсюдження Flash. Тут і надалі примітка перекладача) відповідала за анімування будь-чого, у наш час завдяки надзвичайним можливостям JavaScript ми можемо впоратися зовсім без Flash. Сьогодні ми створимо навігаційне меню з дуже крутою анімацією за допомогою CSS та jQuery.

Демоверсія та початковий код


Стислий огляд

На меню, що ми створюємо, можна подивитися на нижченаведеному скриншоті. Також ви можете поглянути на кінцеву працюючу версію за посиланням.

Я розіб'ю цей посібник на п'ять розділів, як викладено нижче:

  • Створення ескіза
  • Створення ресурсів
  • Написання коду HTML
  • Написання коду CSS
  • Створення анімації за допомогою jQuery

Крок 1: Ескіз

Для початку давайте поглянемо, що нам необхідно тут реалізувати.

Отже, ось приблизне представлення того, що нам необхідно буде зробити:

  • Поділити сторінку на чотири частини: header (* с заголовком), navigation (* с навігаційним меню), content header (* для розташування заголовка контенту) та rest of content (* решта контенту).
  • Область для заголовка представити простим контейнером <div>.
  • Область з навігаційним меню поділити на декілька контейнерів <div>, що відповідають елементам меню.
  • Тепер ось що: головним чином ми використовуємо контейнер <ul><li>, проте оскільки кожний елемент меню унікальний,
    то я не бачу вигоди від використання <ul><li>, так що я буду використовувати замість нього контейнер <div>.

  • Контейнер представити простим контейнером <div>.

Підбиваючи підсумки, отримуємо наступне:

Можливо, вам стало би в нагоді, якщо б я показав вам структуру папок, яку використовую. Структура каталогів виглядає наступним чином:

Крок 2: Ресурси

Я припускаю, що у вас є базові уявлення про те, як поводитися з Photoshop, тому я не надам вам вичерпних інструкцій зі створення ресурсів.
Нам необхідно створити наступні ресурси:

  • Фон для заголовка
  • Частину для розміщення заголовка контенту
  • Навігаційне меню
  • Фон зі смугами

Зверніть увагу, що якщо ви хочете пропустити цей етап, то можете скачати архів з усіма файлами наприкінці посібника та витягти мої копії!

Що ж, давайте створимо фон для заголовка. Відкрийте Photoshop та створіть полотно розміром 1x181 px, або ж ви можете створити полотно більших розмірів та потім обрізати зображення.
Створіть шар та задайте для нього лінійний градієнт з установленими наперед значеннями початкового та кінцевого кольорів (Foreground to Background) довжиною 171px, це буде основний градієнт.
Створіть ще один шар та задайте для нього лінійний градієнт з установленими наперед значеннями початкового та кінцевого кольорів (* кінцевий відсутній; прозорість) (Foreground to Transparent) довжиною 10px унизу першого шару для надання певного ефекту затінення.

Ось як повинен виглядати цей фон, тут його розмір 100x181 px, який я пізніше скорочу до 1x181 px.

Збережіть це зображення як 'hdr-bkg.png' у вашій папці 'img'.

Далі ми створимо частину для розміщення заголовка контенту. Знову відкрийте Photoshop та створіть полотно розміром 934x284 px.
Створіть за допомогою відповідного інструмента прямокутник з закругленими куточками, виберіть створену фігуру, створіть новий шар, додайте градієнт і падаючу тінь (* тінь, що відкидається об'єктом).
Після цього ми отримаємо наступне:

Збережіть це зображення як 'content-title.png' у папці 'img'.

Тепер давайте створимо ресурси, потрібні для навігаційного меню. Нам потрібні два набори елементів навігаційного меню та білий прямокутник.

Реалізувати білий прямокутник легко. Потрібно лише створити прямокутник з закругленими куточками розміром 98px x 58px та покрасити його у білий колір. Впевніться, що фон прозорий.

Збережіть це зображення як 'white.jpg' у папці 'img'.

Переходимо до реалізації елемента навігаційного меню. Відкрийте Photoshop та створіть документ розміром 490px x 58px.
Створіть прямокутник з закругленими куточками розміром приблизно 98px x 58px та розташуйте у ньому якийсь текст. Нам будуть потрібні дві копії кожного тексту.
Я додав невелику падаючу тінь для кожного тексту, але це, звісно ж, хто як забажає. Ви можете використовувати для елементів власні кольори.

Тепер просто продублюйте цей шар уздовж горизонтальної лінії. Застосуйте різні кольори та текст.

Збережіть це зображення як 'nav.jpg' у папці 'img'.

Нарешті, для реалізації фону зі смугами я просто скористався онлайн-інструментом під назвою Stripe Generator. Кінцевий результат виглядає наступним чином:

Ви можете ознайомитися з використовуваними мною налаштуваннями за посиланням:
Звісно ж, ви могли би самостійно створити фон зі смугами у Photoshop, але чому би замість цього на скористатися відмінним простеньким веб-інструментом :-)

Крок 3: Код HTML

Тепер давайте начеркаємо наш код HTML.

Це цілком відповідає тому плану дій, що начеркали у Кроці 1.

Я додав посилання на файл 'main.css', який нам ще потрібно буде створити,
і також додав деякі посилання на деякі файли JavaScript. Оскільки кожний елемент навігаційного меню унікальний, то я додав їм ID.
Нам потрібно буде ще додати певне стильове оформлення, що застосовується для кожного елемента меню; завдяки цьому нам легше буде змінювати стильове оформлення надалі.

У нас також буде з'являтися білий прямокутник зверху кожного елемента навігаційного меню при переміщенні курсору поверх меню або при виборі елемента меню, так що нам знадобиться ще один контейнер <div> для нього. Фінальний код HTML буде виглядати наступним чином:

Збережіть його як 'index.html'. Зараз у якості HTML-сторінки ми маємо наступне:

Крок 4: CSS

Давайте застосуємо деяке стильове оформлення до веб-сторінки. Ми почнемо зі встановлення правил для фону та частини із заголовком.

Збережіть цей код як main.css у папці 'css'.

Тепер наша сторінка виглядає наступним чином:

Тепер давайте додамо стильове оформлення для кожного елемента меню. Пам'ятайте, що ми хочемо, щоб білий прямокутник розташовувався зверху кожного елемента меню,
так що в якості значення position встановлюємо absolute. Додайте наступні правила до файлу 'main.css'.

Тепер ми маємо наступне:

Є одна проблемка: посилання розташовується поверх кожного елемента меню; давайте видалимо його за допомогою встановлення для властивості text-indent (* встановлює величину відступу першого рядка блока тексту) величезного значення – гарантовано видаляючи посилання з екрана.
Додайте цей код до вашої таблиці стилів.

Тепер навігаційне меню буде виглядати наступним чином:

У нас є ще одна проблемка: ми би хотіли, щоб навігаційне меню розташовувалося під тінню частини з заголовком. Ми можемо цього домогтися завдяки модифікації нашого стильового оформлення для частини з заголовком.

Оскільки ми скористалися файлом .png з ефектом затінення, то тепер навігаційне меню повинно виглядати наступним чином:

Відмінно! Давайте додамо частину з контентом, так що зможемо приступити до роботи зі скриптом для додавання анімації.

Крок 5:  Скрипт для додавання анімації

Для початку давайте завантажимо останню версію скрипта jQuery та помістимо її до папки 'js'.

По суті анімація зводиться до маніпуляції з позиціонуванням фону.
Нажаль, у jQuery є баг у функціоналі, що відповідає за анімування властивості background-position (* завдяки ньому задається початкова позиція фонового зображення, встановленого за допомогою властивості background-image). Проте не турбуйтеся! Alexander Farkas створив плаґін, завдяки якому ця проблема вирішується.
Завантажте файл, перейменуйте його на jquery-bp.js та збережіть у папці 'js'.

Перед тим, як почати роботу зі скриптом, ви повинні дещо зрозуміти: Нижче наводиться цитата з документації з плаґіна:

Через баги у деяких браузерах (наприклад Firefox) ви повинні встановити (вихідне) значення властивості background-position у самому тегу:
<div style="background-position: 10px 20px"></div>
Звісно ж, ви також можете виконати це й за допомогою JavaScript (jQuery):
$('#background').css({backgroundPosition: '10px 20px'});

Що ж, тепер, коли ви зрозуміли це, давайте почнемо: Ми задамо значення властивості background-position для кожного елемента на початку нашого скрипта.

Збережіть цей код як 'navigation.js' у папці 'js'.

Тепер ми додамо обробник для трьох подій для всіх елементів меню. Ми можемо це виконати за допомогою функції bind ().

Кожного разу, коли користувач переміщує курсор поверх елемента навігаційного меню, буде викликана функція 'mMouseOver' скрипта.
Коли користувач переміщує курсор за межі елемента навігаційного меню, буде викликана функція 'mMouseOut' скрипта.
І коли користувач натискає по елементу навігаційного меню, то буде викликана функція 'mClick' скрипта.

Крок 5.1: Обробник для події mouseover

Давайте створимо розкадровку (* послідовність ескізів (кадрів) для візуального планування сцен перед зйомкою, для графічного представлення кроків вирішення завдання, виконання сценарію, опису поведінки користувача тощо) для анімації, що виконується при виникненні події mouseover.

При переміщенні курсору поверх елемента:

  • Змінити зображення елемента меню (на те, що зі свіченням) та змінити вигляд курсору за налаштуванням на вигляд «курсор-рука».
  • Підняти елемент навігаційного меню трохи угору.
  • Опустити донизу білий прямокутник.
  • Опустити білий прямокутник та елемент навігаційного меню донизу.
  • Підняти білий прямокутник та елемент навігаційного меню угору до кінцевого положення.
  • І замінити зображення елемента меню на початкове.

Що ж, давайте додамо функцію для реалізації цих дій під кодом попереднього скрипта:

Мені потрібно вам пояснити тут декілька моментів:

  1. Функція _getHPos() використовується для підгонки позиції по горизонталі фонового зображення кожного елемента.
    Наприклад: значенням початкового положення фонового зображення елемента «Home» буде 0, значенням початкового положення фонового зображення елемента «About» буде -98px, тощо.
  2. Також зверніть увагу, що на початку функції ми викликаємо функцію «stop». Ми її викликаємо, щоб впевнитися, що всі анімації, виконувані до виникнення події «mouse over», зупинилися.
    Навіщо? Ми пізніше додамо іншу анімацію, що запускається при виникненні події «mouse out».
    Тепер давайте уявимо, що користувач переміщує курсор поверх елемента і потім швидко переміщує курсор кудись ще, а потім повертає його знову поверх того ж елемента.
    Якщо ми не зупинемо поточну анімацію перед викликом обробника для події, що заново виникла, то у нас буде затримка, оскільки частина поточної анімації буде ще знаходитися у черзі або, що ще гірше, анімація стане нелогічною та набридне користувачеві.

Крок 5.2: Обробник для події mouseout

Тепер з цим закінчили. Давайте створимо розкадровку для анімації, що виконується при виникненні події mouseout.

При переміщенні курсору за межі елемента:

  • Опустити донизу елемент навігаційного меню.
  • Опустити донизу білий прямокутник.
  • Підняти елемент навігаційного меню угору.
  • Перемістити елемент навігаційного меню до його початкового положення.
  • Перемістити білий прямокутник до його початкового положення (елемент приховано).
  • Повернути початковий вигляд курсору.

Код для реалізації цих дій наведено нижче:

Крок 5.3: Обробник події сlick

Ми майже закінчили! Тепер нам потрібно додати поведінку для випадку, коли користувач натискає по елементу навігаційного меню.

Звісно ж, ви можете додати замість цього будь-яку потрібну вам адресу. Завдяки цій конкретній функції браузер буде перенаправлено за [current_url]/[navigation_id], так що для елемента «home» адресою буде ‘[current_url]/home’, для «about» – ‘[current_url]/about’ тощо.

Крок 5.4: Вказівник поточної сторінки

Звісно ж, нам потрібен індикатор того, що ми вже знаходимося на якійсь сторінці. Для цього нам потрібен ще один клас CSS.
Ми назвемо його ‘active’. Наприклад: якщо ми знаходимося на сторінці 'home', то код HTML буде наступним:

Або якщо ми знаходимося на сторінці 'about', то код HTML буде наступним:

тощо.

Отже, тепер ідея полягає в тому, що після завантаження сторінки за допомогою нашого скрипта перевіряється, який елемент навігаційного меню має клас 'active.
Потім ми застосовуємо до нього анімаційний ефект. І нам потрібно впевнитися, що при виникненні будь-яких інших подій (‘mouseover’, ‘mouseout’, ‘click’) до елемента з класом 'active' не застосовується ніяких анімаційних ефектів.

Для реалізації вищесказаного нам потрібно трохи змінити наш код: Нижче наведено повний код після внесення змін:

Завершено!

Ось і готове наше стильне невелике меню.

Завантажити початковий код посібника у форматі ZIP

Переглянути демоверсію

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.