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

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

Интерактивное слайд-шоу с помощью HTML5 Canvas | RUDEBOXКогда  переходе к следующему или предыдущему слайду, текст и форма будет трансформироваться в новую фигуру, создавая интересный эффект.

Интерактивное слайд-шоу с помощью HTML5 Canvas | RUDEBOX

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

Интерактивное слайд-шоу с помощью HTML5 Canvas | RUDEBOX

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: