|| Онлайн калькулятори || Web-інструменти || Довідник || Кросворди
Дата і час Випадковий блок новин
Версія PHP: 8.0.11
Світова статистика online
Присутні в розділі: 3

Анімація за допомогою Animate.css

анiмацiя css Візуальний інструмент для створення різних анімаційних ефектів на сайтах за допомогою CSS.
Використовуються: крос-браузерна бібліотека CSS-анімації (Animate.css) і скрипт, що спрацьовує при прокручуванні сторінки (WOW.js).
Виберіть потрібний вам ефект анімації і надайте стиль до того елемента на HTML сторінці, який ви хочете анімувати (оживити). Ви можете анімувати будь-яку кількість (в розумних межах) елементів HTML.
стиль для початкового екрану задається для видимих елементів при завантаженні сторінки. Стилі при прокручуванні для елементів, які повинні бути анімовані при прокручуванні. За допомогою CSS тепер ви можете додати фантастичну анімацію до свого проекту, нижче ви знайдете 36 різних прикладів анімації з чистим кодом CSS. Весь код знаходиться в одному файлі CSS, який можна завантажити за посиланням нижче. Завдяки Даніелу Едену CSS генератор ефектів онлайн

Бібліотека Animate.css (Приклад)

Бібліотека Animate.css, як не важко здогадатися з назви допомагає привласнювати елементам анімацію. Вона складається всього з одного файлу css. При належній вправності його не важко відтворити самому. Animate.css надає заздалегідь приготовані класи для анімації, якими можна користуватися за принципом Bootstrap. В першу чергу бібліотека потрібна для дуже швидкої верстки, в основному для односторінкових додатків. Сама бібліотека доступна за посиланням: Animate.css.

Для роботи досить додати посилання на файл.

<link rel="stylesheet" href="animate.min.css">
Анімувати блок просто, достатньо присвоїти йому обов'язковий клас animated. Яку саме анімацію матиме блок визначають додаткові назви класів. infinite робить анімацію нескінченною, а bounce привласнює ефект підстрибування, як в наступному прикладі:


АНІМАЦІЯ #bounce

<h1 class="animated infinite bounce">Приклад</h1>

АНІМАЦІЯ #1

<h1 class="animated infinite fadeIn">АНІМАЦІЯ #1</h1>

АНІМАЦІЯ #2

<h1 class="animated infinite  slideInLeft">АНІМАЦІЯ #2</h1>

АНІМАЦІЯ #3

<h1 class="animated infinite  zoomIn">АНІМАЦІЯ #3</h1>

АНІМАЦІЯ #4

<h1 class="animated infinite  jackInTheBox">АНІМАЦІЯ #4</h1>

Animate.css


Анімація від Daniel Eden.

Розміщено на UACMS

Знайшли помилку? Повідомте нас!
Оцініть наші старання:
Оцінoк немає
Ви користуєтесь броузером ||
WEB Tools - розділ сайту з інструментарієм для розробників: кодери та декодери, шифрувальники, редактори інформери, відладка, скрипт, код на javascript.
Сайт працює на UACMS
Сторінка онлайн інструментів для WEB
Несвіч-Городище2-Посада
ІНФОРМАЦІЙНО-ОСВІТНІЙ САЙТ
К-сть відвідувачів по країнах
Відвідувачі WEB-інструментів
» 1 - онлайн » 4 - сьогодні
» 17 - вчора » 40 - за тиждень
» 419 - в місяць » 3473 - в рік
» 5137 - всього
» рекорд: 57 (09.10.2021)
Україна Google:21.10-22:42 || Yandex:16.07-16:26 || Bing:23.10-06:27
Інформаційно-освітній сайт © 2013 - 2021