2 177 Codepen

Рисуем звёздами

Рисуем на канвасе звёздами. Получившийся рисунок можно сохранить, как картинку.

Рисуем звёздами
1 000 Codepen

Одуванчики в траве

Рандомная генерация травы с одуванчиками. При движении курсора, трава реагирует на его положение и отклоняется в противоположные стороны.

Одуванчики в траве
11 227 Codepen

Слайдер продукта на базе swiper.js

Слайдер карточки продукта с демонстрацией выбора нескольких параметров, кнопкой добавить в корзину и анимацией иконки добавления в список желаний. Слайдер сделан на базе скрипта swiper.js

Слайдер продукта на базе swiper.js
8 830 Codepen

Форма оплаты кредитной картой

Интерактивная форма оплаты кредитной картой. При заполнении полей, данные сразу отображаются на SVG изображении карты. При заполнении Security Code срабатывает анимация переворачивания карты, где отображается введенный код. К полям прикручен плагин масок, который позволяет быстро их заполнять. Также от номера карты зависит, какой тип карты отобразится - Visa, MasterCard или другая.

Форма оплаты кредитной картой
2 979 Codepen

SVG morphing с anime.js

При клике по кнопке плавно из левого верхнего угла раскрывается новый блок. Анимация раскрытия сделана с использованием anime.js, которая анимирует svg

SVG morphing с anime.js