анимация плагина jelly.js

Jelly.js — рисование и анимирование фигур с желейным эффектом Canvas

Плагин JavaScript для рисования и создания анимации элементов с «желейным» эффектом. Используется Canvas. Руководство по использованию + примеры.

В последнее время мы чаще видм, что WEB не использует статические квадратные элементы. Каждый день появляются все новые разработки, которые включают нерегулярные формы блоков.

В данном посте содержится информация о том, как создать фигуры с jelly-эффектом. На основе демонстрационных примеров Вы сможете создавать свои фигуры и анимировать их так, как посчитаете нужным.

Вот один из результатов работы плагина:

пример-анимация работы плагина

Определяем код HTML, используя элементы SVG:

Далее указываем структуру нашего блока и определяем элемент Canvas.

Добавляем базовые стили к нашим блокам:

Устанавливаем опции плагина и создаем сам jelly-эффект:

Реализация перетаскивания блока:

Вот и вся магия. Что касается поддержки кроссбраузерности, то здесь все шикарно. Элементы корректно отображаются во всех популярных обозревателях. Однако производительность будет зависеть от железа пользователя и его операционной системы.

Скачать файлы плагина можно по ссылке выше. Подробное руководство в оригинале можно найти на страничке Github проекта.

В поисках шаблона для сайта?