ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффект движения элемента за курсором

Эффект движения элемента за курсором

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

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

Старался подобрать разные по тематике, но все же идет одна фактура, это лицо или шар, но уже мимика совершенно другая. Это такой легкий материал, который уже сам веб мастер решит устанавливать на свой сайт, ведь его можно как уменьшить или увеличить, но точно для гостей и пользователей сайта будет что-то необычное, как они увидят движение за курсором.

1. Сердитые глаза

Глаза следуют за курсором мыши, но когда вы наводите курсор на середину секции двух глаз, глаза становятся красными. Красные глаза показывают злое настроение.

HTML

Код

CSS

Код

.kasdexon-sazogted {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.degtukas {
  width: 100px;
  height: 100px;
  float:left;
}

.eye {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 25%;
  top: 40%;
  background-color: white;
  pointer-events: none;
}

.eye + .eye {
  left: 55%;
}

.vadesdes {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  transition: all .5s ease;
}

.medukus {
  width: 150px;
  height: 100px;
  background-color: black;
  position: absolute;
  left: 20%;
  top: 25%;
  pointer-events: none;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 4.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay: 1s;
  -webkit-transition: all .5s ease;
}

.medukus + .medukus {
  left: 50%;
}

@-webkit-keyframes blink {
  0% {
  top: 25%;
  }
  95% {
  top: 25%;
  }
  100% {
  top: 40%;
  }
}

.degtukas:hover ~ .medukus {
  -webkit-transform: rotate(-10deg);
}

.degtukas:hover ~ .medukus:nth-of-type(2n+1) {
  -webkit-transform: rotate(10deg);
}

#c-3:hover ~ .medukus {
  -webkit-transform: rotate(15deg);
}

#c-3:hover ~ .medukus:nth-of-type(2n+1) {
  -webkit-transform: rotate(-15deg);
}

#c-3:hover ~ .eye .vadesdes {
  background-color: red;
}

#a-1:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(60deg) translate(-30px);
}

#a-2:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(80deg) translate(-30px);
}

#a-3:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(90deg) translate(-30px);
}

#a-4:hover ~.eye > .vadesdes {
  -webkit-transform: rotate(100deg) translate(-30px);
}

#a-5:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(120deg) translate(-30px);
}

#b-1:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(50deg) translate(-25px);
}

#b-2:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(70deg) translate(-25px);
}

#b-3:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(90deg) translate(-25px);
}

#b-4:hover ~.eye > .vadesdes {
  -webkit-transform: rotate(110deg) translate(-25px);
}

#b-5:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(130deg) translate(-25px);
}

#c-1:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(0deg) translate(-25px);
}

#c-2:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(0deg) translate(-10px);
}

#c-3:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(0deg) translate(20px);
}

#c-3:hover ~ .eye:nth-of-type(2n+1) > .vadesdes {
  -webkit-transform: rotate(0deg) translate(-20px);
}

#c-4:hover ~.eye > .vadesdes {
  -webkit-transform: rotate(0deg) translate(10px);
}

#c-5:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(0deg) translate(25px);
}

#d-1:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-50deg) translate(-25px);
}

#d-2:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-70deg) translate(-25px);
}

#d-3:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-90deg) translate(-25px);
}

#d-4:hover ~.eye > .vadesdes {
  -webkit-transform: rotate(-110deg) translate(-25px);
}

#d-5:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-130deg) translate(-25px);
}

#e-1:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-40deg) translate(-30px);
}

#e-2:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-60deg) translate(-30px);
}

#e-3:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-80deg) translate(-30px);
}

#e-4:hover ~.eye > .vadesdes {
  -webkit-transform: rotate(-100deg) translate(-30px);
}

#e-5:hover ~ .eye > .vadesdes {
  -webkit-transform: rotate(-120deg) translate(-30px);
}

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

2. Круглые следящие глаза

Это эффект круглых глаз, глаза следуют за курсором мыши.

See the Pen
Эффект следуя за глазами by Kocsten (@kocsten)
on CodePen.

3. Смайлик эмоджи после глаз

Это версия смайликов, следующая за эффектом курсора мыши, где глаза смайлика следуют за вашим курсором, и даже есть мимика удивление с открытым ртом. Где как по мне на большой размере не очень смотрятся, тут безусловно лучше уменьшить и где-то на дизайн сайте расположить.

See the Pen
Following Eyes by Kocsten (@kocsten)
on CodePen.

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

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

21 Июля 2019 Загрузок: 3 Просмотров: 6848 Комментариев: (3)

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

СКАЧАТЬ

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

Kosten

Комментарии: 3
Порядок вывода комментариев: Koneko 21 Июля 2019 20:16¹ +1 Крутой материал. -SAM- 22 Июля 2019 01:47² +1 Сразу вспоминается системная страничка "Сайт не найден" от uCoz, что кот следит за тобой (только там скриптом, а здесь на стилях). Kosten 25 Июля 2019 23:50³ 0 Больше всего такая аннотация в большинстве подойдет на страницу, которая не существует, а точнее была слита сайта.