CSS анімація на сайті за допомогою бібліотеки
Вітаю, дорогі друзі! Сьогодні поговоримо на дуже актуальну тему у верстці – анімація. Чесно сказати таке бачив в інтернеті, і я навіть не підозрював, що це все можливо, використовуючи чистий css3 без використання java скриптів. Ось у цій статті хочу поділитися з вами, як зробити різні ефекти на сайті, використовуючи css3, не володіючи при цьому достатніми знаннями в css-анімації. Допоможе нам у цьому бібліотекаanimate.css.
До цього часу анімацію в css, вірніше стилі для анімації писав сам, користуючись різними довідниками, типу htmlbook.ru. Але одного разу натрапив на сайт https://daneden.me/animate, де зібрані вже готові різні ефекти на css. Бери та застосовуй.
Для нашого вибору є дві версії цієї бібліотеки:
Повна версія - має безліч рядків коду. Підійде тим, хто хоче детально вивчити анімацію, оскільки код читаємо легко. Об'єм файлу складає
Як ви помітили, проект доданий до GitHub.
Отже, як змусити анімацію працювати після завантаження файлів? Все, що нам необхідно, це підключити файл стилів
і додати потрібному блоку два класи - animated і другий клас залежно від того, який ефект використовуєте.
Давайте подивимося на приклад. У цьому випадку я використав анімацію - slideInLeft.
Я використав один ефект, тому мені вистачило шматочка коду, який відповідає саме на цю анімацію. Я скачав на GitHub всі файли даної бібліотеки і підключив з папки "Source" потрібний мені ефект, далі до свого файлу стилів я додав наступний код:
Можна звичайно було просто скомпілювати потрібні ефекти в один файл і підключити тільки його, але мені чомусь так зручніше.
Можна такожвстановити ефект і при наведенні курсору миші.
Достатньо було додати псевдоклас «hover» класу ефекту:
Також можна використовуючи java скрипт зробити так, щоб при наведенні курсору клас додавався, а при відведенні миші знову видалявся. Тут доведеться ще додатково підключити бібліотеку jQuery, але якщо вона у вас вже підключена, то вдруге підключати її не потрібно.
Можна також поєднати кілька ефектів. Ось що вийшло:
Ви можете самостійно регулювати за своїм смаком час затримки та анімації:
Ось такі дива можна творити за допомогою маленької бібліотеки animate.css. Вона значно спрощується життя верстальнику і дуже економить час.
Ну, що скажете колеги? Як вам такий підхід?
Заур Магомедов
Верстальник із великим досвідом роботи. Займаюся створенням сайтів із 2009 року. Постійно навчаюсь та вдосконалюю свої навички. Веду свої проекти, у тому числі і цей блог.