Създайте напълно анимирани приспособления с Shift.css

Уеб анимация предлага начин за това привлечете вниманието на хората и по-нататък в уебсайт. Има много инструменти създайте безплатни анимации но Shift.css е един от най-новите в групата.

Това е свободна рамка с отворен код направени за създаване динамични анимации във всеки контейнер. И тези анимации не са заключени в една последователност. Всъщност можете да създадете персонализирани анимации за всеки елемент в блока и да ги приложите в определен ред.

Най- Преместете демонстрационната страница може да ви покаже много по-добре, отколкото мога да обясня с думи.

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

Библиотеката идва с два файла: a .CSS и .JS библиотека, и двете трябва да бъдат добавена към главата на документа.

Не мога да намеря нищо GitHub репо за този проект, така че ще трябва да изтеглете файловете директно от уебсайта на Shift.css.

Следващата стъпка е да дефинира елемент на контейнер с малко съдържание. Имената на класовете са важни, така че всеки анимиращ елемент трябва да бъде имат класа .смени елемент приложен.

Наред с тези класове, можете също добавете атрибути за данни от HTML5 да определите как работи анимацията. В момента има само три, но те трябва да бъдат достатъчно, за да персонализирате пълен анимационен ефект.

1. данни анимация: Име на анимацията
2. данни закъснение: Общо закъснение (в секунди) преди да започне анимацията
3. данни продължителност: Обща дължина (в секунди) на анимацията

Името на анимацията трябва да бъде a предварително дефинирана анимация създаден за библиотеката Shift. Точно сега има 15 имена на анимация за избор. Можете да ги видите в долната част на началната страница на Shift.css.

Просто Копирай постави каквото поискаш в настройката за име на анимация и ти трябва да си добър! Например, ако искам да използвам анимацията за изходно избледняване, която бих добавил данни анимация = "shift_exitFade" като атрибут за данни към какъвто и да е елемент, който трябва да анимира по този начин. Лесна работа.

Искам тази библиотека да дойде с повече опции в JavaScript, защото ще позволи на разработчиците да имат много повече контрол върху разположението и функциите. Но за проста (и безплатна) рамка за анимация не мога да се оплача.

Shift.css е идеален за по-нови разработчици които искат да създават по-сложни анимационни стилове без да пише многословен код от нулата.