Frontend&You

​Недавно мне нужно было сделать забавный интерфейс. Страница 404, на ней есть SVG фигура крота, и надо сделать так, чтобы глаза у этого крота перемещались вслед за движением мыши! Сначала посмеялась над фантазией дизайнера, а потом подумала: «почему бы и нет».

Идея пришла следующая. На SVG-изображение кладем canvas, который следит за курсором мыши. Позиционируем его относительно SVG-картинки, таким образом накладывая canvas-глаза на реальные глаза крота. Сам canvas стилизуем, чтобы элемент был круглым (белки глаза) с черной точкой внутри (зрачок). И далее вычисляем, в какую сторону эта точка должна двигаться. На самом деле, реализация не сложная, если подсмотреть подробный туториал.

А то, что получилось, вы можете наблюдать в видео ниже.

0:06

www.tgoop.com/code_and_travel/380

1.7K viewsFeb 9, 2024 at 06:40

​Недавно мне нужно было сделать забавный интерфейс. Страница 404, на ней есть SVG фигура крота, и надо сделать так, чтобы глаза у этого крота перемещались вслед за движением мыши! Сначала посмеялась над фантазией дизайнера, а потом подумала: «почему бы и нет».

Идея пришла следующая. На SVG-изображение кладем canvas, который следит за курсором мыши. Позиционируем его относительно SVG-картинки, таким образом накладывая canvas-глаза на реальные глаза крота. Сам canvas стилизуем, чтобы элемент был круглым (белки глаза) с черной точкой внутри (зрачок). И далее вычисляем, в какую сторону эта точка должна двигаться. На самом деле, реализация не сложная, если подсмотреть подробный туториал.

А то, что получилось, вы можете наблюдать в видео ниже.

BY Frontend&You