Анімована панель навігації
У цьому уроці я покажу Вам, як зробити анімовану панель навігації на Ваш сайт. Ця панель буде висуватися при наведенні покажчика миші на невелику видиму частину при цьому змінюючи свій фоновий колір, і засуватися назад, коли Ви забираєте з неї курсор миші. Причому засуватися вона буде з анімованим ефектом «відскакування». А найголовніше - Ви дізнаєтеся про плагіни, за допомогою яких зробити таку панель дуже просто.
Сьогодні ж, я покажу Вам як зробити іншу панель з більш складною і цікавою анімацією. А ще Ви дізнаєтеся про двох плагінах jQuery, які дозволять створити цю анімацію з легкістю. Я думаю, що Ви знайдете застосування такої анімованої панелі на сторінках Вашого сайту або блогу.
Подивитися приклад в дії Ви можете, натиснувши на іконку «Демо» на самому початку уроку, а скачати всі вихідні файли Ви зможете, натиснувши на іконку «Вихідні тексти».
Ну а тепер давайте почнемо!
1. Для початку я створю просту html-сторінку. Цю сторінку між тегами head ми підключимо файл таблиці стилів «animate_style.css», який створимо трохи пізніше. Сам же html-файл я збережу під ім'ям «animate.html».
В цій сторінці буде заголовок, блок div з нашої навігаційною панеллю. У прикладі я використовую в якості посилань для моєї панелі зображення. Я заздалегідь підготувала їх у програмі Photoshop. Зображення повинні бути однакового розміру (в моєму прикладі вони 70 на 70 px). Ви можете знайти їх в вихідним матеріалах в папці «image» або ж підготувати і використовувати свої зображення, також помістивши їх в папку з ім'ям «image».
Наведіть покажчик миші на смугу біля лівого краю сторінки
Якщо ми подивимося нашу сторінку в браузері, то на даному етапі вона буде виглядати ось так:
2. Давайте тепер створимо файл таблиці стилів з ім'ям «animate_style.css», розмістимо його в тому ж каталозі, що і html-файл (якщо Ви будете розміщувати файл таблиці стилів в окремій папці, то не забудьте виправити шлях до нього в html- файлі).
І зараз пропишемо деякі стилі для нашої веб-сторінки, щоб вона виглядала симпатичніше, і щоб підготувати нашу висувну панель до анімації.
У наведеному нижче коді стилів для елементів сторінки Ви можете побачити правила розстановки елементів і надання їм певних стилів. Також я прикрасила написи і деякі блоки тінями (про створення тіней за допомогою css3 можете почитати тут).
Але найбільше Вашу увагу зверніть на стилі для елемента з ідентифікатором «dashboard». тому як саме ці стилі ховають нашу панель з картинками, залишаючи тільки її край в поле нашої видимості.
Отже, код для файлу таблиці стилів:
Якщо ми зараз відкриємо нашу сторінку в браузері, то побачимо, що стилі застосувались, панель із зображеннями захована, і ми бачимо тільки її край.
Приготування закінчені. Приступаємо до програмування.
Але давайте все по порядку.
Насамперед підключимо бібліотеку jQuery і плагіни. Ці файли Ви можете знайти в исходниках до уроку в папці «js». Створіть також і у себе в каталозі, де лежить html-файл папку «js» і скопіюйте в неї файли: «jquery-1.6.3.min.js», «jquery.easing.1.3.js» і «jquery.color. js ».
Тепер між тегами head в html-файлі, відразу після підключення таблиці стилів підключіть три цих файлу:
І зараз, відразу після підключення трьох файлів (з бібліотекою і плагінами), підключіть до html-сторінці і цей файл.
4. Перейдемо в файл «animate.js» і почнемо писати наш код.
Почнемо ми написання нашого коду зі наступних рядків:
Тепер нам потрібно вибрати елемент, який відповідає за висувну панель. Цей елемент має ідентифікатор «dashboard». На елемент ми вішаємо функцію «hover ()», яка приймає в якості параметрів дві анонімні функції. Одна з них буде відповідати за дії, коли ми наводимо покажчик миші на край панелі; інша - за дії, коли ми цей покажчик прибираємо.
$ (Document) .ready (function ()<$('#dashboard').hover( function()<>, function ()<> ); // закінчення функції hover ()>); // закінчення функції ready ()
Поки що функція нічого не робить, так її параметри (анонімні функції) не містять будь-яких команд - вони порожні. Давайте це виправимо.
Спочатку пропишемо дії для ситуації, коли курсор миші наведений на навігаційну панель. Ми будемо використовувати функцію «animate ()» разом з покажчиком «this» ( «this» відноситься до елементу сторінки, до якого прикріплено подія - в даному випадку до блоку з навігаційною панеллю).
У функцію ми передамо три аргументи: перший - об'єктна константа, яка дозволить змінити розташування блоку щодо лівого краю (а попросту, висуне панель) і поміняти колір самої панелі (це стає можливим за допомогою підключеного раніше плагіна); другий - встановить тривалість анімації (500 мілісекунд); третій - встановить тип анімації «easeInSine» (використання цієї анімації можливо завдяки підключеному плагіну).
Якщо зараз оновити сторінку в браузері і навести курсор миші на край панелі, то можна побачити, як вона плавно висувається, змінюючи свій колір.
Вже добре! Але потрібно, щоб панель ще й зарухалася, коли ми відводимо з неї курсор миші. Для цього нам потрібно прописати команди для другої анонімної функції.
Подібно до того як ми прописували код для висунення панелі, ми пропишемо код для того, щоб вона засунулись назад, але тільки тут ми застосуємо ефект «відскакування» (як ніби при задвіженіі навігаційна панель вдаряється об край, відскакує і тільки потім повністю засувається), збільшимо час анімації і повернемо колір і розташування панелі в початковий стан.
Тепер все дуже здорово працює. Можете перевірити сторінку в браузері. Залишилася одна невелика проблема: якщо Ви почнете швидко водити мишкою туди-сюди, наводячи і відводячи її з панелі, то потім, зупинившись, можете виявити, що ще якийсь час панель буде висуватися і засуватися вже без ваших дій. Це відбувається від того, що анімаційний ефект ставиться в чергу і при багаторазовому наведенні покажчика миші створює довгий список ефектів.
Щоб виправити цю ситуацію, потрібно між «this» і «animate» прописати функцію «stop ()». Це вирішить проблему.
Таким чином фінальна версія коду буде виглядати наступним чином:
Ось так, всього 24 рядки коду (буде менше, якщо не писати кожні лапки з нового рядка) і у Вас ефектна анімована панель.
Я думаю, Ви обов'язково знайдете застосування такої панелі у себе на сайті.
Ну ось, напевно, і все. Успіхів Вам друзі і побільше креативних ідей!