Від автора: старі вивіски з Лас-Вегаса 1950-х років спонукали мене створити схожий виблискуючий ефект для тексту. Наше демо візьме частину коду з моєї статті по ТБ шуму.
Створюємо область під текст
Розмітка складається з тега canvas, тексту заголовка і контейнера div. Заголовок h1 має атрибут contentEditable, тобто текст можна редагувати:
Liza
Тег 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:
Liza
В canvas немає концепції центрування тексту. Мені довелося читати розмір тексту JS і підлаштовувати його на полотні для імітації ефекту центрування.
Це не означає, що метод на чистому canvas неправильний. В деяких випадках він підходить набагато краще. Просто у нас не той випадок.
Щось менш помітне
Зменшити яскравість тексту можна кількома способами:
можна знизити ймовірність заповнення комірки кольором, зменшивши значення в Math.random();
можна було працювати з «перехідними» квітами, між фоном і кольором клітинки, що створює ефект уповільнення анімації;
для ще більшого уповільнення анімації можна було скористатися функціями setTimeOut або setInterval.
