Counter. Лендинг для типографии Counter. Лендинг для типографии

Скриншот сайта+

Задача

Одностраничник для типографии на трёх файлах. Вместо картинок-баннеров — демонстрация самой типографики: каскад размеров, бегущая строка, спецификация сетки и живой образец, на котором видно, как работают трекинг и вес.

Как делал

Бегущая строка сделана в два span с одинаковым текстом внутри одного трека. Анимация сдвигает его на translateX(-50%) — ровно на ширину половины, поэтому второй span становится первым и цикл замыкается без единого разрыва. Один span со второй копией сделал бы рывок в конце каждого прохода.

.type__marquee-track {
  display: inline-flex;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* ширина ровно одного span из двух */
}

Образец в секции типографики реагирует на курсор без единой строки JS: letter-spacing переходит с 0 на 0.1em, и разрядка разъезжается прямо в глазах. Растянутый трекинг съел бы правый край, поэтому text-align: center и padding по вертикали страхуют от переполнения.

.type__specimen {
  font-weight: 900;
  font-size: clamp(5rem, 15vw, 12rem);
  text-align: center;
  padding: var(--space-section) 0;
  transition: letter-spacing 0.4s ease;
  user-select: none;
}

.type__specimen:hover { letter-spacing: 0.1em; }

Глитч на ссылках — четыре кадра text-shadow, где красный и голубой расходятся на пару пикселей и снова сходятся. Эффект держится 0.3 секунды на ховере, а не горит постоянно.

.glitch-link:hover { animation: glitch 0.3s ease; }

@keyframes glitch {
  0%   { text-shadow:  2px 0 var(--color-accent), -2px 0 cyan; }
  25%  { text-shadow: -2px 0 var(--color-accent),  2px 0 cyan; }
  50%  { text-shadow:  2px 2px var(--color-accent), -2px -2px cyan; }
  75%  { text-shadow: -2px 2px var(--color-accent),  2px -2px cyan; }
  100% { text-shadow: none; }
}

Появление секций идёт через IntersectionObserver, но каскад внутри секции раздаёт сам обсервер: он находит всех детей с .reveal-child и проставляет каждому transitionDelay по индексу. Так задержки считаются от фактического DOM, а не пишутся инлайном в разметку.

const children = entry.target.querySelectorAll(`.reveal-child`);
children.forEach((child, index) => {
  child.style.transitionDelay = `${index * 0.1}s`;
  child.classList.add(`revealed`);
});

Фотографии приходят обесцвеченными и оживают на ховере: фон первого экрана — grayscale(1) на opacity: 0.06, карточки проектов — grayscale(0.6), снимок в «О себе» — grayscale(0.3). Чтобы одна страница не выглядела галереей случайных снимков, а держалась одного тона.

Итог

Лендинг работает на трёх файлах без зависимостей: HTML, CSS и семьдесят пять строк JS. Вся типографика — настоящая, а не картинка: Playfair Display для акцентов, DM Sans для текста, оба с Google Fonts.