Страница-Детектор лжи «Иллюзия выбора» на HTML/JS — Создаем веб-розыгрыш 0.1

Вы когда-нибудь задумывались, насколько легко интерфейс может манипулировать вашим решением? Сегодня мы создадим мини-проект «Детектор лжи», который наглядно (и очень смешно) это демонстрирует. Это идеальный способ попрактиковаться в работе с координатами, событиями мыши и CSS-анимациями.

В чем фишка?

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

Разбор ключевых механик

1. Событие onmouseenter: Мы не ждем клика, мы реагируем на само поднесение мыши к кнопке.

2. Генерация случайных координат: Используем Math.random(), чтобы кнопка летала по всему экрану.

3. Эффект Glitch: С помощью теней в CSS создаем ощущение, что компьютер «лагает» от вашей наглой лжи.

Инструкция по кастомизации

• Изменение фраз: Найдите массив suspiciousPhrases и впишите туда свои шутки, понятные вашей аудитории.

• Сложность: Можно изменить количество попыток, после которых кнопка «сдается» или превращается в огромный баннер.

Разбор материала, как создать Страницу-приглашение на прогулку на HTML/JS за 5 минут