Дмитрий Калинник" />
Вы когда-нибудь задумывались, насколько легко интерфейс может манипулировать вашим решением? Сегодня мы создадим мини-проект «Детектор лжи», который наглядно (и очень смешно) это демонстрирует. Это идеальный способ попрактиковаться в работе с координатами, событиями мыши и CSS-анимациями.
В чем фишка?
В отличие от обычных страниц, наш детектор предлагает «честный» выбор. Но как только пользователь пытается нажать «НЕТ», система начинает сопротивляться: заголовок меняется на подозрительный, кнопка ускользает, а интерфейс начинает «глючить».
Разбор ключевых механик
-
Событие
onmouseenter: Мы не ждем клика, мы реагируем на само поднесение мыши к кнопке. -
Генерация случайных координат: Используем
Math.random(), чтобы кнопка летала по всему экрану. -
Эффект Glitch: С помощью теней в CSS создаем ощущение, что компьютер «лагает» от вашей наглой лжи.
Инструкция по кастомизации
-
Изменение фраз: Найдите массив
suspiciousPhrasesи впишите туда свои шутки, понятные вашей аудитории. -
Сложность: Можно изменить количество попыток, после которых кнопка «сдается» или превращается в огромный баннер.
Разбор материала, как создать Страницу-приглашение на прогулку на HTML/JS за 5 минут
