Разукрасьте свое имя огоньками при помощи HTML5 Canvas и режимов наложения в CSS

Разукрасьте свое имя огоньками при помощи HTML5 Canvas и режимов наложения в CSS

От автора: старые вывески из Лас-Вегаса 1950-х годов побудили меня создать похожий сверкающий эффект для текста. Наше демо возьмет часть кода из моей статьи по ТВ шуму.

Создаем область под текст

Разметка состоит из тега canvas, текста заголовка и контейнера div. Заголовок h1 имеет атрибут contentEditable, т.е. текст можно редактировать:

Тег canvas и текст закрепляются в одном месте при помощи position: absolute:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Дабы сэкономить на времени отрисовки, тегу canvas присвоено изначальное состояние off для подсветки. То есть там не будет света, вместо него будет отрисовываться определенный цвет.

Заголовок h1 задан в единицах измерения vw, чтобы подстраиваться под размер страницы:

Блеск

Скрипт в конце страницы первым делом определяет элемент и устанавливает размер ячейки света, а также ее цвет:

Основная функция:

По порядку, функция:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

очищает холст, удаляя предыдущую картинку;

отрисовывает 60 пикселей от верхней границы холста, экономя время рендеринга (отрисовка закончится за 30 пикселей от нижней границы холста);

рисует световые ячейки по горизонтали;

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

если вычисления попали в область заголовка, рисуется квадратик на 2 пикселя меньше ячейки света, чтобы создать видимый шаблон сетки.

Бродвей

Делаем так, чтобы текст был виден только через canvas при помощи метода, который я подробно описал в предыдущей статье по режимам наложения в CSS. Фон текста заливается определенным цветом с режимом наложения.

Почему CSS?

Разумно спросить, а почему нужно использовать HTML и режимы наложения CSS, когда можно воспользоваться режимами наложения, кадрированием путей и поддержкой текста в Canvas API? Было несколько причин:

Текст в canvas отрисовывается как пиксель. Его нельзя считать, выделить или найти. Если вы хотите создать такой же текст с доступностью в canvas, вам придется писать текст в теге canvas:

В canvas нет концепции центрирования текста. Мне пришлось считывать размер текста в JS и подстраивать его на холсте для имитации эффекта центрирования.

Это не означает, что метод на чистом canvas неправильный. В некоторых случаях он подходит намного лучше. Просто у нас не тот случай.

Что-то менее броское

Уменьшить яркость текста можно несколькими способами:

можно понизить вероятность заполнения ячейки цветом, уменьшив значение в Math.random();

можно было работать с «переходными» цветами, между фоном и цветом ячейки, что создает эффект замедления анимации;

для еще большего замедления анимации можно было воспользоваться функциями setTimeOut или setInterval.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree