eye

Задача 2. Зомбирующий глаз

В рамках домашнего задания к лекции «Работа с медиа-ресурсами»

Описание

Юзабилити-тесты показали, что если внимательно наблюдать за посетителем сайта, то он начинает смущаться и делать что-то, чего делать не планировал. Например, оформить заказ на книгу, которую не хотел покупать. Поэтому владельцы интернет-магазина «Фрай, без штанов и Бендер» просят нас добавить на страницу книги глаз, который бы внимательно наблюдал за курсором мыши.

Интерфейс

Наш верстальщик уже реализовал глаз, и зрачок, и даже подмигивание при помощи CSS. И даже сделал заготовку для его перемещения, использовав 3 собственных CSS-свойства для задания позиции и размера:

• --pupil-x — смещение зрачка от центра по оси X;
• --pupil-y — смещение зрачка от центра по оси Y;
• --pupil-size — размер зрачка;

Вам остаётся только задать эти свойства для узла .big-book__pupil с помощью метода setProperty свойства style. Например, этот код увеличит размер зрачка в два раза:

document.querySelector('.big-book__pupil').style.setProperty('--pupil-size', 2);

Значения свойств

Размер зрачка должен меняться в диапазоне от 1 до 3. При этом должно быть значение 1, когда курсор мыши находится близко к краю окна браузера. А значение 3 — когда курсор мыши находится непосредственно около глаза.

Смещения по обеим осям должны находиться в диапазоне от -30px до 30px. Пропорционально тому, насколько курсор мыши далеко от центра глаза.

Реализация

При реализации нельзя изменять HTML-код и CSS-стили.

Локально с использованием git

Реализацию необходимо поместить в файл ./js/animation.js. Файл уже подключен к документу, поэтому другие файлы изменять не требуется.

В песочнице CodePen

Реализуйте функционал во вкладке JS.

В онлайн-песочнице на CODEPEN.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

1. Открыть код в песочнице.
2. Нажать кнопку «Fork».
3. Выполнить задание.
4. Нажать кнопку «Save».
5. Скопировать адрес страницы, открытой в браузере.
6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
2. Перейти в папку задания cd hj-homeworks/media/eye.
3. Выполнить задание.
4. Создать репозиторий на GitHub или BitBucket.
5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.