В этой статье мы создадим смайл в окне, который будет следить глазами за курсором мыши. А если мы захотим закрыть, окно смайл будет злиться. Итак, создадим структуру проекта, которая будет состоять из двух папок: css и js, а также из трех фалов: index.html, style.css и main.js
В файле index.html создадим начальную разметку и подключим файлы style.css и main.js
Теперь в теге body файла index.html создадим вот такой код:
DIV с классом win будет окном. DIV с классом btn-closse - это кнопка для закрытия окна, в диве будет крестик (×). DIV с классом smile будет нашим улыбающимся смайлом, а DIV с классом angry будет злым смайлом. DIV с классом eyebrow_left - это левая бровь, а DIV с классом eyebrow_right - это правая бровь. DIV с классом eye_left - это левый глаз, а DIV с классом eye_right правый. DIV с классом pupil_eye_left - это левый зрачок, а DIV с классом pupil_eye_ right правый. DIV с классом mouth - это рот нашего смайла.
Теперь перейдем к стилям в файле style.css
Уберем отступы у документа и зададим ширину и высоту документа в 100%. Затем настроим кнопку. Позицию кнопки устанавливаем в absolute, расположим кнопку с права на 6px. Цвет зададим светло-серый, а размер шрифта сделаем в 30px и сделаем его жирным. Курсор сделаем по умолчанию.
Теперь настроим окно.
Позиционируем окно абсолютно, сдвигаем сверху и слева на 50%. Затем при помощи свойства transform располагаем окно в центре. Устанавливаем бордюр у окна в 4px и скругление углов на 18px. Ширину и высоту делаем в 500px. Фон делаем черным.
Теперь настроим стили улыбающегося смайла.
Позиционируем абсолютно, сдвигаем сверху и слева на 50%. Ширину и высоту устанавливаем в 200px, скругление углов делаем 50%. Располагаем смайл по центру окна, сдвигая по вертикале и горизонтали на -50%. Фон сделаем радиальным градиентом. Центр градиента сдвинем на 65% по горизонтали и на 15% по вертикале. Цвет градиента сделаем от ярко-желтого (ffff00) к более темному (ff7700).
Перейдем к настройке стилей для злого смайла.
Позиционируем абсолютно. Cверху и слева устанавливаем в ноль. Ширину и высоту устанавливаем в 200px и скругление углов сделаем в 50%. Фон сделаем радиальным градиентом от ярко-красного (ff0000) к черному (000000). Свойство z-index установим в единицу, а прозрачность в ноль. Зададим плавный переход в 0.3 секунды.
Теперь настроим рот нашего смайла.
Позиционируем абсолютно, сдвигаем сверху и слева на 50%. Ширину устанавливаем в 140px, а высоту устанавливаем в 100px, скругление углов делаем 50%. Сдвигаем по горизонтали на -50%, а по вертикале на -40%. Сделаем бордюр снизу в 10px. Свойство z-index устанавливаем 2 и делаем плавный переход в 0.3 секунды.
Перейдем к настройке левого глаза.
Позиционируем абсолютно, сдвигаем сверху на 60px а слева на 40px. Ширину и высоту устанавливаем в 50px, скругление углов делаем 50%. Фон делаем белым (fff). Свойство overflow устанавливаем в hidden, а свойство z-index устанавливаем 4.
Точно также настроим правый глаз.
Здесь делаем всё тоже самое что и с левым глазом, только вместо свойства left используем свойство right.
Настроим стили левой брови.
Позиционируем абсолютно, сдвигаем сверху на 50px, а с лева на 34px. Ширину устанавливаем в 60px, а высоту устанавливаем в 30px, скругление углов делаем 50%. Делаем верхний бордюр в 4px черного цвета. Плавный переход сделаем в 0.3 секунды и свойство z-index ставим в 3.
Всё то же самое сделаем и для правой брови. заменив свойство left на right.
Осталось настроить стили зрачков.
Позиционируем абсолютно, сдвигаем сверху и слева на 50%. Располагаем каждый зрачок по центру при помощи свойства transform. Ширину и высоту устанавливаем в 20px, скругление углов делаем 50%. Цвет зададим черный (121212) и сделаем бордюр в 6px голубого цвета (9edbff). На этом со стилями всё.
Перейдем к файлу main.js и запишем код.
На body вешаем событие mousemove. Внутри события проверяем, имеет ли элемент. над которым перемещается курсор, класс win и, если это так, координаты курсора по горизонтали умножаем на 100 и делим на ширину клиентской части. Прибавляем к результату знак "%" и сохраняем в переменную x, то же самое делаем для переменной y, но берем координаты курсора по вертикали и делим на высоту клиентской области. Получаем все элементы с классом eye и сохраняем в переменную eye. Приходимся по полученным элементам при помощи метода forEach. Каждому элементу меняем свойства left, top и transform. Если курсор перемещается над элементом кнопки "закрыть", ничего не делаем.
На кнопку закрытия повесим событие mouseover и, при возникновении этого события, делаем следующее: у рта нашего смайла уберем border-radius установив это свойство в ноль, а свойство width установим в 70px. У левой брови также убираем border-radius, свойство width устанавливаем в 40px и поворачиваем на 30 градусов при помощи свойства transform, задав значение rotate(30deg). То же самое делаем и с правой бровью, но разворачиваем на -30 градусов. Уберем прозрачность у злого смайла, установив свойство opacity в единицу.
И в завершении повесим на кнопку событие mouseleave.
При возникновении этого события просто вернем все стили по умолчанию.
В результате должно получиться следующее:
А при наведении курсора на кнопку "закрыть" будет следующий результат:
