Интерактивные примеры типографии на HTML5 RUDEBOXВозможно кто-то первый раз сталкивается с таким термином как типография в современном веб-дизайне, но следует отметить, что он далеко не новый, каждый сайт использует типографию, а именно это красивая организация текста и шрифтов у себя на сайте. Это делают, чтобы повысить читаемость сайта, или привлечь внимание к интересно стилизованному тексту. Это весьма простой и удачный аспект в разработке сайте. Правильно подобранная типография это ключ к успеху. Давайте посмотрим, что у нас получилось..

В данном уроке мы рассмотрим интерактивные примеры типографии, реализованные с помощью HTML5. Основная идея состоит в том, что текст красиво реагирует на курсор мыши. Давайте приступим.

Шаг 1. HTML

Разметка очень проста, мы будем выводить ID, всю остальную работу будет выполнять JavaScript.

С разметкой закончили, переходим к следующему шагу.

Интерактивные примеры типографии на HTML5 RUDEBOX

Шаг 2. JavaScript

Как мы заметили выше, всю основную работу мы будем выполнять с помощью js. Но в первую очередь, мы должны проверить, использует ли пользователи современный браузер, который поддерживает графические элементы. Если они не поддерживаются, мы будем подавать статическое изображение. Мы будем использовать плагин Modernizr , чтобы проверить это.

Нам необходимо создать некоторые простые переменные.

Canvas является переменной, которая содержится в структуре HTML. 

Context является тем элементом, который позволит нам писать на баннере.

Density переменная содержит сколько пикселей, сколько мы хотим получить (горизонтально и вертикально) между каждым баннером с частицами.

Particles array будет хранить все частицы и их параметры.

Colour переменная цвета, что каждая частица будет иметь.

Настройка баннера

Для начала нам необходимо задать параметры, которые отвечают за адаптивность.

В функцию перезагрузки мы инициализируем canvas и context и установить соответствующие размеры. Затем мы вызываем prepare , setupParticles и draw функций.

Первое, что нужно отметить, это то, что функция принимает строку переменной, которая должна соответствовать ID элемента в HTML.

Фон холста

После этого мы будет проверять на данные изображения (пиксель за пикселем) холста. 

FillText это команда , принимает три параметра: первый текст для записи, второй и третий являются х и у координат соответственно.

По умолчанию, все полотно ImageData содержит длинный список нулей — опираясь на этом в холсте (в нашем случае, используем fillText ), пиксели теперь будут содержат соответствующие цветовые данные.

Рисуем баннер

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

Теперь самое интересное, давайте добавим интерактивность.

Добавление интерактивности

 Первое, что нам нужно будет сделать,- отслеживать положение мыши пользователя, пока он находится на баннере.

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

Теперь мы должны изменять пиксели в соответствии с движением курсора мыши.

В демонстрации вы можете рассмотреть несколько рабочих версий.

Вот и все. Готово!

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

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