Створити повністю анімовані віджети за допомогою Shift.css

Веб-анімація пропонує шлях привернути увагу людей і потягніть їх далі на веб-сайті. Є багато інструментів створювати безкоштовні анімації але Shift.css є одним з найновіших у збірці.

Це вільний каркас з відкритим вихідним кодом зроблено для створення динамічні анімації в будь-якому контейнері. І ці анімації не заблоковані в одній послідовності. Ви можете створити власні анімації для кожен елемент в блоці і застосувати їх в певному порядку.

The Зсув демонстраційної сторінки може показати вам набагато краще, ніж я можу пояснити словами.

Одна річ ви помітите, що кожен елемент всередині контейнера окремий елемент HTML. Незалежно від того, чи це SVG, чи зображення, ви можете анімувати все окремо створити свій власний ефект анімації.

Бібліотека постачається з двома файлами: a .css і .js бібліотеки, і обидві повинні бути до голови документа.

Я не можу знайти репо GitHub для цього проекту, тому вам потрібно завантажити файли безпосередньо з веб-сайту Shift.css.

Наступний крок - це визначають елемент контейнера з деяким вмістом. Імена класів важливі для кожного елемента анімації мають клас .shift-елемент застосовано.

Поряд з цими класами можна також додайте атрибути даних HTML5 щоб визначити, як працює анімація. Зараз є тільки три, але вони повинні бути достатньо, щоб налаштувати повний ефект анімації.

1. анімація даних: Назва анімації
2. затримка даних: Загальна затримка (в секундах) перед початком анімації
3. тривалість даних: Загальна довжина (в секундах) анімації

Назва анімації повинна бути a попередньо визначена анімація створено для бібліотеки Shift. Зараз є 15 назв анімації на вибір. Їх можна побачити в нижній частині домашньої сторінки Shift.css.

Просто Копіювати Вставити що завгодно налаштування імені анімації і ви повинні бути добре йти! Наприклад, якщо б я хотів використовувати анімацію виходу fade, яку я б додав data-animation = "shift_exitFade" як атрибут даних до будь-якого елемента, який повинен анімувати таким чином. Простенька.

Я бажаю, щоб ця бібліотека прийшла з додатковими опціями в JavaScript, тому що це дозволить розробникам набагато більше контролювати розташування та функції. Але для простої (і вільної) рамки анімації я не можу поскаржитися.

Shift.css ідеально підходить для нові розробники які хочуть створити більш складні стилі анімації без написання детального коду з нуля.