Lecaw

Учимся создавать Web-сайты

Интерактивное слайд-шоу частиц на HTML5 Canvas

July 4, 2013
CSS
478hits

Это – экспериментальный, интерактивный компонент слайд-шоу, который использует HTML5 элемент canvas. Слайд-шоу состоит из формы и текста, оба сделаны из небольших частиц, с которыми пользователь может взаимодействовать. При помощи Canvas мы можем динамически растягивать 2D элементы, используя JavaScript.

ДЕМО Исходные файлы

 

Частицы для фигуры имеют определенный набор цветов, поэтому все они будут окрашены. Текст будет построен из белых частиц:

При переходе к следующему (или предыдущему) слайду, текст и форма будет трансформироваться в новую фигуру, создавая интересный эффект:

После преобразования, мы можем увидеть новую форму и текст на следующем слайде:

Частицы текста и формы являются интерактивными, таким образом, мы можем манипулировать ими:

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий