Интерактивное Drag&Drop оформление страницы

demosourse

Небольшой эксперимент, где вы можете придать тому или иному элементу страницы какой-то цвет, перетащив его с палитры к объекту.

Вы можете окрашивать как определённые блоки, так и текстовые элементы. Для достижения данного эффекта были использованы SVG элементы, генерируемые на лету, а затем анимированные с помощью CSS.

Вы можете сбросить цвет, нажав на последнюю иконку в палитре.

Для организации перетаскивания используется библиотека interact.js.

Помните, что данный проект является экспериментальным и будет работать не во всех версиях браузеров. IE не поддерживает анимацию SVG элементов, так что в данном браузере эффект не увидеть.

Вот как вот будет окрашена область страницы:

При переносе цвета будет выделена окрашиваемая область:

Сам процесс:

Можете попробовать сами ;)

Надеемся данный эффект вас развлечёт.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/04/22/interactive-drag-drop-coloring-concept/
Перевел: Станислав Протасевич
Урок создан: 27 Апреля 2015
Просмотров: 8271
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^