Как сделать интерфейс пет-проекта живым без тяжелых фреймворков: 3 трюка на ванильном JS, которые я внедрил в свой киносайт

Когда пишешь интерфейсы в одиночку, не всегда хочется тащить в проект тяжелые фреймворки ради простых визуальных или логических фич. Часто стандартных возможностей ванильного веб-стека более чем достаточно.

Ниже разберем три простых, но эффективных решения на чистом HTML, CSS и JS, которые сделают интерфейс вашего сайта живым и отзывчивым.

1. Кастомный ползунок с динамическим изменением CSS-переменных

Обычные ползунки выглядят скучно, но с помощью JavaScript можно связать их со свойствами стилей страницы в реальном времени.

HTML код:

<label for="glow-power">Мощность эффекта:</label> <input type="range" id="glow-power" min="0" max="20" value="10">

CSS код: :root { --glow-intensity: 10px; } .neon-element { text-shadow: 0 0 var(--glow-intensity) #00ffff; transition: text-shadow 0.1s ease; }

JavaScript код: const slider = document.getElementById('glow-power'); slider.addEventListener('input', (e) => { document.documentElement.style.setProperty('--glow-intensity', `${e.target.value}px`); });

Этот трюк позволяет пользователям кастомизировать интерфейс сайта под себя (например, менять яркость элементов или масштаб элементов) без перезагрузки стилей.

2. Отслеживание системной темы устройства (День / Ночь)

Вместо того чтобы заставлять пользователя постоянно кликать на переключатель тем, можно автоматически подстраиваться под настройки его операционной системы прямо через CSS и JS.

CSS код: body { background: #ffffff; color: #000000; } @media (prefers-color-scheme: dark) { body { background: #121212; color: #ffffff; } }

JavaScript код: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; if (isDarkMode) { console.log('Пользователь предпочитает темную тему'); }

3. Работа с состоянием без бэкенда через LocalStorage с экспортом в JSON

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

Сохранение и чтение данных в JavaScript: const userProfile = { theme: 'neon', score: 42 }; localStorage.setItem('user_data', JSON.stringify(userProfile)); const savedData = JSON.parse(localStorage.getItem('user_data'));

Скачивание бэкапа в виде JSON-файла: function downloadBackup(data) { const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data)); const downloadAnchor = document.createElement('a'); downloadAnchor.setAttribute("href", dataStr); downloadAnchor.setAttribute("download", "profile_backup.json"); document.body.appendChild(downloadAnchor); downloadAnchor.click(); downloadAnchor.remove(); } P.S. Все эти фронтенд-механики я активно тестировал и внедрял, когда в соло разрабатывал свой пет-проект — интерактивный каталог фильмов Plixar-Visium. Там на чистом JS написана вся логика: от регулировки мощности неона через CSS-переменные до импорта/экспорта локальных JSON-бэкапов, чтобы пользователи не теряли историю просмотров. Посмотреть, как вся эта архитектура работает в комплексе, можно здесь: https://plixar-visium.2bd.net/ (автор и разработчик проекта — Кузьменко Матвей).