- Принципи використання Mouse Over
- Реалізація Mouse Over
- Використання Photoshop
- Крок 1
- крок 2
- крок 3
- крок 4
- крок 5
- Резюмуючи
Успіх дизайну сайту залежить від багатьох аспектів. Але коли мова починає йти про призначеному для користувача досвід, то, як правило, саме деталі і вносять відчутну різницю. Здавалося б, схожі сайти трохи відрізняються один від одного і, відповідно, як результат, мають різну популярність і конверсію. Це, якщо не говорити про маркетинг в цілому. Кожен елемент веб-дизайну впливає на якість кінцевого продукту (будь-який сайт, який створюється майстром - продукт його роботи, творчості), але деякі особливості підсилюють проект набагато більше, ніж все інше.
Динамічні елементи не залишаються непоміченими відвідувачами і завжди кидаються в очі. Вони впливають на емоції, дозволяють поліпшити популярність сайту, роблять інтерфейс в цілому привабливим і привабливим. І це при тому, що анімація може бути як явною, фонової, так і проявляти себе тільки при взаємодії з елементами сайту. Зрозуміло, що від загальної ідеї дизайну залежить велика кількість динамічних ефектів, але з урахуванням останніх стандартів і тенденцій їх намагаються використовувати в невеликій кількості.
Одними з найбільш популярних тенденцій в середовищі веб-дизайнерів є ефекти mouse over або ефекти при наведенні покажчика мишки. Такі ефекти не очевидні відразу, але варто перемістити покажчик на пункт меню, кнопку або інфоблок, то вони змінюються по тональності, кольором, іноді навіть формі або трохи за розміром. Такий ефект є безпрограшним рішенням для підвищення емоційного сприйняття сайту. Постійні читачі нашого блогу напевно згадають різні приклади сайтів, де, так чи інакше, використовуються ефекти mouse over.
Ми ж сьогодні розглянемо найбільш яскраві проекти з різними ефектами для покажчика мишки і подивимося, як найпростіше їх можна створити за допомогою Photoshop, CSS, де взяти ідеї і готові шматочки програмного коду.
Сайт пропонує відвідувачу вибрати назву шрифту з безлічі варіантів іконок. Під час же вибору, пересуваючи курсор, можна побачити, як кожна клітина змінює свій колір і представляє сам шрифт. Особливо красиво виглядає слід руху по клітинам, якщо курсор рухати дуже швидко.
Томер Лернер створив свій сайт практично повністю анімаційним. Під курсором мишки на головній сторінці рухаються геометричні фігури, між сторінками відбувається завантаження, а навколо назви в наступному блоці утворюється прямокутник. Передати словами красу і простотуетого складно, тому найкращим буде побачити на власні очі.
Проект пропонує інтерактивне подорож в стилі Дикого Заходу і вивчення різних новаторських проектів. Відвідувач може вибрати розділ і крізь туман відправитися на вивчення нового. При цьому все це також анимировано.
Команда М11, що займається декораціями для різних заходів, кіно і телебачення, створила сайт, який примудрився отримати відразу кілька нагород. Анімація ж тут використовувалася досить тонко. Кнопочки, іконки змінюються лише при наведенні мишки, а переходи між екранами (сторінками) виглядають вельми жваво і нераздражітельно.
Selfie Collection представляє проект з фотографіями Селфі і предметами з аукціонів. Для нас інтерес представляє дизайнерське рішення, при якому кожне зображення, будучи активним, стає володарем текстового блоку з описом предмета на аукціоні, що дозволяє при натисканні перейти на торги. Кольорові плитки досить популярні в плоскому дизайні і, власне, легка анімація зміни кольорів цих блоків виглядає цілком природно і звично.
Мінімалістичний дизайн, характеризується використанням текстових блоків і меню. Практично весь вигляд сайту є навігаційне меню, причому, інтуїтивне. Зрозуміло, що та чи інша категорія відкриває додаткові сторінки в стороні і вже на них містяться зображення, відео, записи та інше. Але, в цілому, виконано всі вельми оригінально.
Принципи використання Mouse Over
При всій існуючої красі анімації необхідно пам'ятати, що використання на сайті такого ефекту не має бути нав'язливим і дратівливим. Зазвичай використовують для виділення важливих елементів ( «Натисни зараз», «Це цікаво»), для візуального ефекту від наведення курсору, але в тих місцях, де це логічно і де користувач може очікувати, виділення потрібної і важливої посилання, пунктів меню, категорій.
Більш того, ефект повинен працювати тільки тоді, коли під вказівником миші і ніяк інакше: ні до, ні після. Якщо відвідувача зацікавить анімація меню, він сам «посмикає» курсором за іконки, але примушувати його до цього не варто.
Реалізація Mouse Over
Ефект Mouse Over в веб-дизайні зазвичай реалізується чотирма способами:
- HTML (прописати зміна однієї картинки на іншу через властивість посилання)
- Зміна однієї картинки на іншу за допомогою JavaScript
- стилі CSS
- Flash, Shockwave, Java
Але цікаво те, що веб-майстер може скористатися різними ресурсами, де наводяться приклади анімації і відповідний код CSS . А це значно спрощує роботу і прискорює її. Досить потім замінити зображення і, Voi la, ефект готовий і замовник в захваті.
Проект з величезною кількістю прикладів анімаційних ефектів, описаних в CSS3. Потрібно просто підвести курсор до кружечку і ефект з'явиться. При цьому нижче існує список програмного коду, розбитого на колонки і рядки (зліва направо). Знаходите потрібний ефект і дивіться нижче код. Ефекти і справді гарні.
Ще один ресурс з прикладами і кодом для анімації. Сам же код CSS можна знайти за посиланням «VIEW TUTORIAL», а потім просто використовувати підзаголовки з назвою «1 EXAMPLE», «2 EXAMPLE» і так далі.
Анімованими можуть бути і іконки, якщо по ним клікнути мишкою. Приклади можливої анімації представлені на порталі нижче.
Чому ефект анімації не зробити тривимірним? Цілком можна і це нескладно. Приклади представлені за посиланням в заголовку, а вихідних код можна побачити за посиланням у верхньому меню «BACK TO THE CODROPS ARTICLE».
Величезна кількість 2D анімаційних ефектів, таких як зміна фону, рамки, тіні і світіння або створення виносок, загнутих куточків і багато іншого. Всі властивості анімації пропонуються в одному файлі hover.css, який і пропонують творці завантажити і потім веб-дизайнеру залишається тільки вибирати потрібне і підключати до загального свого проекту. Детальніше описано в Tutorial , Де і ази використання CSS теж є.
Використання Photoshop
Незважаючи на те, що ефектів Mouse Overs неймовірну кількість, в веб-дизайні цілком можна створити анімацію і самостійно силами Photoshop. І мова не йде про шкалою анімації, що ми використовували, розглядаючи типографіку . Досить мати плагіни і розширення для роботи з CSS і створити потрібні зображення.
Наприклад, ми створили дві простенькі кнопочки, одна з яких має трохи об'ємний вигляд, а інша - втоплений, немов по ній скликали. Зрозуміло, що сам графічний ефект може використовуватися найрізноманітніший, але для прикладу ми використовуємо найяскравіший.
Крок 1
Створюємо кнопочки, пишемо текст, додаємо ефекти і кольору. Само собою, розповідати докладно вже не будемо.
крок 2
Всі верстви розбили по групах. Потім виділяємо обидві кнопочки і натискаємо Зображення -> Обрізати. Таким чином, у нас на екрані залишається тільки робоча область без фону.
крок 3
Уже її зберігаємо в формат PNG-8, в даному випадку web_button2.png
крок 4
Тепер в тій же папці, де зберегли зображення, створимо файл HTML web_button2.html наприклад, в Блокноті. І пишемо ось такий простенький код HTML, де вказуємо width і height блоку, відповідного розмірами блоку з кнопками, а в якості фону використовуємо створений нами файл PNG.
крок 5
Також у другій частині CSS описуємо дію через властивості a: hove і a: focus і знову використовуємо зображення, але зверніть увагу, вже зрушене по вертикалі на 50px нижче. Тобто при появі курсора мишки, зображення завантажить в цей блок інший вид кнопочки, нижній.
Таким, чином простеньким способом ми створили анімаційну кнопочку засобами Photoshop і CSS / HTML. Зрозуміло, якщо анімація більш складна і зміна картинок або квітів відбувається більш хитромудро, то і сам код буде іншим. Але для цього ми і навели приклади ресурсів вище, де можна знайти і ефекти і приклади коду.
Особливістю ж їх використання може стати той момент, що зображення будуть змінюватися не за допомогою використання готового файлу PNG, а завдання загального візуального стилю через CSS для можливості роботи з будь-якими зображеннями. Для чого і доведеться використовувати плагін, наприклад, той же CSS Hat .
З іншого боку, якщо створюються анімовані ікони меню, то їх зручніше зробити в картинках, бо кожна ікона має своє зображення і сенс.
Резюмуючи
Чи створюються веб-майстрами інтернет-магазин або блог, сайт послуг або візитка для Landing Page, але ефект наведення мишки на зображення mouse hover effects завжди надає проекту витонченість, родзинку і здатний зацікавити відвідувача. З кожним роком ефект стає популярнішим, але використання його таїть в собі безліч умовностей, особливостей і правил. Незважаючи на домінування плоского простого дизайну, легка анімація нібито трошки освіжає проект, а тому нехтувати нею не варто, але і зловживати теж.
Анімовані ікони, що змінюються картинки або поява написів на статичних зображеннях, зміна кольору на кнопочках, або поява тексту поруч із зображенням - все це mouse over effects. Що ж стосується використання CSS, а не JQuery, то перший набагато простіше в обробці і він швидше завантажується. Тим більше що і мова простіше, зручніше розбивати на модулі, є готові функції і властивості, які всього лише і потрібно прописати і описати.
Веб-дизайн - воістину мистецтво створення сайтів, немов би художник творить нове своє полотно. І неважливо, яка тематика проекту - крихітна родзинка прекрасна тільки своїм скромним наявністю.
Чому ефект анімації не зробити тривимірним?
