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

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

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

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

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

<div id="allofthelights">
    <canvas width="800" height="350"></canvas>
    <h1 contenteditable="true">Liza</h1>
</div>

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

#allofthelights {
    position: relative;
    overflow: hidden;
}
#allofthelights canvas, #allofthelights h1 {
    width: 100%;
    position: absolute;
    top: 0;
}

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

#allofthelights canvas {
    background: #e97f7b;
}

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

#allofthelights h1 {
    font-size: 10vw;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 2rem;
}

Блеск

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

var nameLights = document.querySelector("#allofthelights canvas"),
context = nameLights.getContext("2d"),
lightSize = 6;
context.fillStyle = "#fbe1ca";

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

function drawLights() {
    context.clearRect(0, 0, nameLights.width, nameLights.height);
    for (var v=60; v < nameLights.height - 30; v += lightSize){
        for (var h=0; h < nameLights.width; h += lightSize){
            if (Math.random()<.5) {
                context.fillRect(h + 1,v + 1, lightSize -1, lightSize - 1);
            }
        }
    }
    requestAnimationFrame(drawLights);
}
drawLights();

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

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

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

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

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

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

Бродвей

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

#allofthelights h1 {
    background: #fff;
    mix-blend-mode: lighten;
}

Почему CSS?

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

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

<canvas width="800" height="350">Liza</canvas>

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

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

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

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

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree