Scattered Elements — это интерактивный веб-эксперимент по визуализации управляемого хаоса. Проект демонстрирует работу с DOM-манипуляциями, сложными CSS-анимациями и асинхронным управлением состояниями элементов в Vanilla JS.
Суть приложения: упорядоченная сетка элементов, которую можно динамически "разбрасывать" по экрану, настраивая параметры физики и таймингов.
- Frontend: HTML5, CSS3 (Flexbox, Keyframes, Backdrop-filter).
- Logic: Pure JavaScript (ES6+ Modules).
- Utilities: Асинхронные цепочки (Promises), делегирование событий, Map для хранения состояний.
- Динамическая генерация: Создание контейнера с сеткой от 1x1 до 10x10 элементов в реальном времени.
- Параметрический хаос:
- Настройка количества элементов в группе выброса (1-100 шт.).
- Контроль времени полета и максимальной задержки старта (Random Start).
- Регулировка радиуса разброса в пикселях.
- Интеллектуальная блокировка: Возможность вручную «закрепить» элементы кликом, исключая их из процесса выброса (визуализируется через смену состояний и анимации).
- Режим восстановления: Алгоритм плавного возврата всех элементов в исходную позицию с соблюдением индивидуальных задержек, зафиксированных при выбросе.
- Интерактивный лог: Детальный вывод статистики о количестве выброшенных и заблокированных элементов в текстовое поле.
index.html— разметка интерфейса и контейнеров.script.js— основная логика, управление жизненным циклом элементов и асинхронные операции.style.css— стилизация интерфейса, работа с текстурами и описание анимаций.function_storage.js— вспомогательные функции (генерация случайных чисел, перемешивание индексов, форматирование текста).
- Клонируйте репозиторий.
- Откройте
index.htmlв любом современном браузере. - Настройте параметры в правой панели и жмите кнопку "Разбросать элементы!".