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

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

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

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

Как пример:

Бегающие глаза за кликом на CSS

Установка:

HTML

Код
<div class="kasuva_atulin">
  <div class="kidesa"></div>
  <div class="kidesa"></div>
  </div>

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;
}

JS

Код
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, но и безусловно понятная стилистика. Где вы уже самостоятельно можете изменить оттенки цвета, а также создать большие элементы глаз, а также их уменьшить, точнее подогнать под тот ракурс, где нужно установить данный материал.

Демонстрация
2022-09-14 Просмотров: 245 Комментарий: (0)

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

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

Оставь свой отзыв

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