Створення анімації з
Незважаючи на всі труднощі, що виникають при створенні анімації, безумовно варто прагнути до отримання навичок, набуття впевненості та досягнення майстерності в цій галузі. Ден Еден – дизайнер та студент із Манчестера (Великобританія) – створив своєрідну бібліотеку анімації Animate.css. За його словами, спочатку ідея виникла для оптимізації власного часу на розробку проектів, а потім набула великих масштабів. Тепер усі охочі можуть ознайомитися з нею та використати у своїх проектах.
«Під час реалізації кількох своїх проектів я працював з анімацією CSS3 за ключовими кадрами і помітив, що повторюю код. Щоб не робити це в майбутньому, я почав створювати анімаційну бібліотеку. Після завершення я був задоволений собою і випустив код на GitHub, де його можна взяти».
Як же на практиці використовувати бібліотеку Animate.css? Насправді все відбувається досить просто, треба лише один раз пройти всі етапи, а потім за аналогією повторювати деякі дії.
1. Для початку слід завантажити та підключити бібліотеку. Є три варіанти.
Далі підключаємо файл animate.css через тег, як це робиться з будь-яким іншим стильовим файлом.
2. Щоб застосувати ефект анімації до бажаного елементу, додаємо до нього два класи – animated та клас з назвою ефекту. Наприклад, ви хочете додати мерехтіння до всіх зображень на сторінці. У HTML записуємо наступне:
3. Сама анімація включається автоматично під час завантаження сторінки. Це зручно для повідомлень, що спливають, покликаних привернути увагу користувача (приклад 1).
Приклад 1. Спливаюче повідомлення
Приклад 2. Галерея
У цьому прикладі при наведенні курсору на зображення з animated класом додається ще один клас bounce; якщо курсор прибрати, токлас bounce також забирається.
4. Остаточно можна налаштувати анімацію на свій смак, змінивши її швидкість, а також задавши час затримки через CSS. І те, й інше не обов'язково і застосовується за необхідності.