Post Image

Существует масса css эффектов для текста используемых дизайнерами в своих проектах. Они обладают разными свойствами, но часто, сильно ограничивают творческую фантазию. Тем не менее, существуют многочисленные примеры дизайнерских работ, где используются более интересные формы комбинации  css свойств с картинками для создания эффектов, которые вызывают нечто более игривое. Именно здесь существует Blotter, чтобы предоставить альтернативу.

GLSL (OpenGL Shading Language) текстовые эффекты

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

Усиление эффектов в одном обратном буфере WebGL

Blotter отображает все тексты в одном контексте WebGL и ограничивает количество вызовов отрисовки, которые он выполняет. Когда несколько текстов имеют одинаковый эффект, они отображаются в одну текстуру и отображаются вместе. Полученные данные изображения затем выводятся в отдельные 2d контексты для каждого элемента.

Цикл анимации

Вместо того, чтобы выполнять анимацию на основе интервала времени, внутренний цикл Blotter использует requestAnimationFrame для соответствия частоте обновления экрана браузера и делает паузу, когда пользователь переходит на другие вкладки браузера; улучшая производительность и сохраняя срок службы батареи на устройстве пользователя.

Пользовательский шрифт для заголовков

Любые тексты, которые вы передаете в Blotter, могут быть индивидуально настроены с использованием свойств знакомого стиля. Вы можете использовать пользовательские шрифты через @font-face спецификацию. Однако в конечном итоге Blotter преобразует передаваемые ему тексты в canvas элементы. Это означает, что отображаемый текст не будет доступен для выбора. Blotter отлично подходит для таких элементов, как заголовки, тексты, используемые в графических целях. Однако не рекомендуется использовать Blotter для длинных текстов.

blotter.js - motive.cafe
Blotter.js

Подключение и готовые эффекты Blotter.js

Итак, что бы начать работу с blotter.js необходимо подключить его в шапке между открывающим и закрывающим тегом head. Далее мы сразу подключим основные эффекты.

blotter.js - motive.cafe
html
blotter.js - motive.cafe
css

Настройка эффектов, вы можете настроить эффекты под себя, полное руководство по эффектам blotter.js читать здесь

blotter.js - motive.cafe
js

Скачать проект здесь

Автор статьи: Denis Motive

Следующая статья
Использование Flexbox