Задача
Сделать одностраничный лендинг магазина игрушек: капсульный стиль, рукописный шрифт, «наклеечная» графика. Чистая вёрстка — HTML, CSS, JS.
Как работает
Свёрстано с нуля на чистой троице. Только HTML5, CSS3 и vanilla JavaScript — без фреймворков и библиотек.
Навигация: фиксированная шапка с blur-эффектом. При скролле меняет прозрачность. На мобилке — гамбургер, открывает полноэкранное меню.
Hero: крупный рукописный заголовок с наклоном слов, наклейка-акцент, CTA-кнопка с «вайблом» (покачивание). Вокруг — анимированные кляксы-капсулы.
window.addEventListener("mousemove", (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 2;
const y = (e.clientY / window.innerHeight - 0.5) * 2;
blobs.forEach((b, i) => {
const depth = (i + 1) * 8;
b.style.marginLeft = `${x * depth}px`;
b.style.marginTop = `${y * depth}px`;
});
}, { passive: true });Категории: чипсы-категории с индивидуальным покачиванием. У каждой — свой цвет.
Игрушки: сетка карточек с разным «дрожанием» (каждая карточка качается со своей задержкой). Hover — карточка поднимается и наклоняется, картинка увеличивается.
Почему мы: три карточки с CSS-мордашками (глаза и улыбка на градиентах, без картинок).
Отзывы детей: блок с цитатами в рукописном стиле.
Форма заказа: простая форма с валидацией и сообщением об успехе.
Анимации: Intersection Observer для появления с пружинкой + каскадная задержка. Параллакс клякс на движение мыши.
Адаптив: 3 брейкпоинта — 1024, 768, 480px. Сетка перестраивается, меню превращается в бургер.
Итог
Готовый лендинг магазина игрушек: капсульный стиль, «наклеечная» графика, вайбль-анимации, пружинящий reveal. Весь интерактив — на vanilla JS, без зависимостей. Работает быстро, легко кастомизируется.
