«Круассан». Лендинг для пекарни «Круассан». Лендинг для пекарни

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

Задача

Одностраничник для пекарни на трёх файлах. Тёплая кремово-шоколадная палитра, рукописный Marck Script для акцентов и Nunito для текста — и ощущение, будто страницу сняли на плёнку, а не отрисовали.

Как делал

Зернистая плёнка — не картинка и не готовый PNG, а SVG-фильтр feTurbulence с фрактальным шумом, вшитый в CSS как data:image/svg+xml. Он растянут на весь экран через position: fixed с pointer-events: none, лежит над контентом на z-index: 9999 и стоит на opacity: 0.06 — едва различимое зерно поверх всей вёрстки.

.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;            /* поверх всего */
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

Параллакс на фотографиях первого экрана сделан вручную и с разной скоростью: большое фото едет медленнее (0.06), маленькое — быстрее (0.1), за счёт чего они расходятся в глубину. Дальше 900 пикселей скролла обработчик выходит сразу и больше не пишет в стили.

window.addEventListener("scroll", () => {
  const y = window.scrollY;
  if (y > 900) return;              // за фолдом фотографий уже не видно — не трогаем DOM
  heroPhotos.forEach((p, i) => {
    const shift = y * (i === 0 ? 0.06 : 0.1);   // разные скорости = глубина
    p.style.transform = `translateY(${shift}px)`;
  });
}, { passive: true });

Бегущая строка с блюдами — два одинаковых набора в одном треке, сдвиг на translateX(-50%). Треку обязателен width: max-content, иначе он схлопнется по ширине контейнера и половина сдвига перестанет совпадать с шириной набора.

.marquee__track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  width: max-content;              /* без этого translateX(-50%) не попадёт в шов */
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

Маленькое фото налезает на большое с наклоном и рамкой в цвет фона: border: 6px solid var(--cream) работает как матовая паспартушка, благодаря ей снимок выглядит наклеенным поверх другого, а не вставленным в сетку.

.hero__photo--small {
  width: 44%; height: 260px;
  bottom: 0; right: 0;
  border: 6px solid var(--cream);   /* рамка-подложка, «наклейка» поверх большого фото */
  transform: rotate(3deg);
}

Каскад появления блоков, как и в остальных лендингах, считается в JS по индексу — но с шагом в три элемента и задержкой 0.09 секунды, потому что сетка меню в четыре колонки и каскад на четыре позиции растягивал бы низ секции на полсекунды.

revealEls.forEach((el, i) => {
  el.style.setProperty("--d", `${Math.min(i % 3, 2) * 0.09}s`);
  io.observe(el);
});

Итог

Лендинг на трёх файлах без зависимостей: HTML, CSS и семьдесят три строки JS. Плёночное зерно, разводы карамели, рукописный шрифт и наклонные штампы — всё сделано стилями, внешних картинок в оформлении нет, фотографии только из Unsplash.