AniJS – библиотека для декларативного описания CSS-анимации

в 18:44, , рубрики: html

На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!

AniJS – библиотека для декларативного описания CSS анимации

По-моему это прекрасное решение, описывать анимацию в духе:

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Всё максимально интуитивно: при клике на указанном div, делаем анимацию flipInY на элементе .container-box.

Упомяну также о возможности создания очереди событий, например:

<div class="element1" data-anijs="if: click, do: wobble, to: .element2">Нажми меня!</div>
<div class="element2">Здесь будет Wobble!</div>
<div class="element3" data-anijs="if: animationend, on: .element2, do: hinge">А потом я упаду</div>

То есть при клике на .element1, будет применён эффект «потрясывания» (wobble) для .element2, по завершению которого к .element3 будет применён эффект выпадения за нижнюю границу окна браузера.

В общем много интересного!
Заинтересовавшихся прошу ознакомиться.

Автор: uoziod

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js