ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Анимированные глаза следуют за курсором

Анимированные глаза следуют за курсором

В статье узнаете про создание анимированных глаз, которые следуют за курсором мыши в исполнение JavaScript, что как эффект просто прекрасен. Пользователь попадая на страницу, где находиться данный эффект, то сразу заметит глазное яблоко, что будет следовать за его курсором мыши, в тот момент, это когда происходит смена положение курсора мыши. Похожий скрипт мне больше встречался на 404 страницах, но не факт, что его можно увидеть на отдельных страницах сайта.

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

Как пример:

Установка:

HTML

Код

CSS

Код

.kasuva_atulin {
display: flex;
}

.kasuva_atulin .kidesa {
  position: relative;
  width: 99px;
  height: 96px;
  display: block;
  background-color: #f1ecec;
  margin: 0 24px;
  border-radius: 50%;
  box-shadow: 0 5px 45px rgb(50 47 47 / 20%), inset 0 0 15px #976d13, inset 0 0 25px #af7c0e;
}
.kasuva_atulin .kidesa::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #161515;
position: absolute;
border: 10px solid skyblue;
box-sizing: border-box;
}

Код

document.querySelector("body").addEventListener("mousemove", eyeball);

  function eyeball() {
  const eye = document.querySelectorAll(".kidesa");
  eye.forEach(function (eye) {
  let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
  let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;

  let radian = Math.atan2(event.pageX - x, event.pageY - y);
  let rotate = radian * (180 / Math.PI) * -1 + 270;
  eye.style.transform = "rotate(" + rotate + "deg)";
  });
  }

Здесь не нужно подключать библиотеки, все выполнено на чистом JavaScript, но и безусловно понятная стилистика. Где вы уже самостоятельно можете изменить оттенки цвета, а также создать большие элементы глаз, а также их уменьшить, точнее подогнать под тот ракурс, где нужно установить данный материал.

Демонстрация

14 Сентября 2022 Загрузок: 1 Просмотров: 771 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0