Сегодня мы с вами рассмотрим компактную и удобную библиотеку анимации Bounce.js. Это очень удобный конструктор для создания CSS анимации, с помощью которого вы легко и быстро сможете создать любую анимацию и подключить её для своих элементов.
Ссылка на Bounce.js — http://bouncejs.com
Вся анимация в Bounce.js прописывается CSS кодом, вы легко сможете скопировать код, который будет собран, после того как вы закончите редактировать вашу анимацию.
Как работать с Bounce.js
Перейдите на страницу данной библиотеки. Здесь страница разделена визуально на 2 области. Слева находится область редактирования, здесь у вас будут появляться этапы анимации. В центре находится окно предпросмотра, здесь анимация накладывается на блок.
Слева вы можете создать новый компонент и задать ему определенные параметры или же вы можете использовать готовую анимацию из списка.
Давайте попробуем создать собственную анимацию. Вы нажимаете на кнопку «Add component» и у вас в поле редактирования добавляется новый блок.
Теперь нам нужно задать ему значения положения и основные настройки.
Здесь вы можете выбрать один из типов анимации. В зависимости от выбранного типа, вам будут представлены разные дальнейшие настройки.
Если вы выберите масштаб, то вам нужно указать размеры, в пропорциях, если выберите движение или скок, то нужно указать координаты, если вращение — градусы.
Далее вы можете указать задержку перед началом анимации и скорость анимации. Вы можете указать количество отскоков, и сделать более динамичную анимацию.
После того как мы отредактировали первый компонент, необходимо создать второй. Здесь мы также задает ему параметры, только теперь сделаем его пропорции больше, чтобы создать эффект масштабирования.
Для примера двух компонентов думаю будет достаточно, теперь вы можете просмотреть получившуюся анимацию нажав на кнопку воспроизведения в окне предпросмотра.
Если все отлично тогда нажимаем на кнопку «EXPORT CSS» чтобы получить CSS код. Здесь по умолчанию анимация задается на элемент с классом .animation-target. Вы можете заменить данный класс на свой или просто добавить этот класс к элементу у которого должна срабатывать анимация.
