Интерактивное слайд-шоу с помощью HTML5
Ранее мы уже рассматривали интерактивную типогафику, сейчас мы рассмотрим еще один замечательный пример, который мы просто не могли обойти стороной. Сразу отметим, что это экспериментальный, интерактивный компонент слайд-шоу, который использует HTML5 элемент Canvas. Слайд-шоу состоит из формы и текста, оба сделаны из небольших частиц, с которыми пользователь может взаимодействовать. При помощи Canvas мы можем динамически растягивать 2D элементы, используя JavaScript.
Такой эффект можно использовать для текста на сайте, ключевой особенностью является постоянная анимация и реакция на курсор. Давайте рассмотрим принцип работы. Частицы для фигуры имеют определенный набор цветов, поэтому все они будут окрашены. Текст будет построен из белых частиц.
Когда переходе к следующему или предыдущему слайду, текст и форма будет трансформироваться в новую фигуру, создавая интересный эффект.
Так как частицы текста и формы являются интерактивными, таким образом, мы можем манипулировать ими:
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 05.07.2013 в 12:00, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |