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

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

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

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

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

Глаза следуют за курсором мыши

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

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

HTML

Код
<div class="kasdexon-sazogted">
  <div class="degtukas" id="a-1"></div>
  <div class="degtukas" id="a-2"></div>
  <div class="degtukas" id="a-3"></div>
  <div class="degtukas" id="a-4"></div>
  <div class="degtukas" id="a-5"></div>
  <div class="degtukas" id="b-1"></div>
  <div class="degtukas" id="b-2"></div>
  <div class="degtukas" id="b-3"></div>
  <div class="degtukas" id="b-4"></div>
  <div class="degtukas" id="b-5"></div>
  <div class="degtukas" id="c-1"></div>
  <div class="degtukas" id="c-2"></div>
  <div class="degtukas" id="c-3"></div>
  <div class="degtukas" id="c-4"></div>
  <div class="degtukas" id="c-5"></div>
  <div class="degtukas" id="d-1"></div>
  <div class="degtukas" id="d-2"></div>
  <div class="degtukas" id="d-3"></div>
  <div class="degtukas" id="d-4"></div>
  <div class="degtukas" id="d-5"></div>
  <div class="degtukas" id="e-1"></div>
  <div class="degtukas" id="e-2"></div>
  <div class="degtukas" id="e-3"></div>
  <div class="degtukas" id="e-4"></div>
  <div class="degtukas" id="e-5"></div>
  <div class="eye">
  <div class="vadesdes"></div>
  </div>
  <div class="eye">
  <div class="vadesdes"></div>
  </div>
  <div class="medukus"></div>
  <div class="medukus"></div>
</div>

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.



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

Вероятно и вам понравится эта необычная коллекцию пера из глаз, которые разгуливают за курсора мыши, ведь на сайте кроме самого материала должно что-то и для отвлечения от темы, так сказать снятие напряжение и немного улыбнуться. Если у вас есть какие-либо вопросы или предложения, прокомментируйте их ниже.
2019-07-21 Загрузок: 2 Просмотров: 5368 Комментарий: (3)

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

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

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

Комментарий: 3
Koneko
Koneko 2019-07-21 20:161
+1
Крутой материал.
-SAM-
-SAM- 2019-07-22 01:472
+1
Сразу вспоминается системная страничка "Сайт не найден" от uCoz, что кот следит за тобой (только там скриптом, а здесь на стилях).
Kosten
Kosten 2019-07-25 23:503
0
Больше всего такая аннотация в большинстве подойдет на страницу, которая не существует, а точнее была слита сайта.
avatar