Движение текста отзывающееся на курсор

Question

Такая фишка реализована у citronium.ru, в исходном коде мало, что понятно.

Как это реализовывать? Что лучше, через js или css? У моего текста уже задан определенный magrin, как его не повредить при движении?

Ищу в интернете методы анимации в сss но чего-то ничего не находится

Answer 1

Вариант на jQuery

$(window).on('mousemove', function(e){
  let wx = $(this).width() / 2 - e.clientX,
      wy = $(this).height() / 2 - e.clientY;
  
  $('.block-1').css('transform', 'translate('+(wx * .1)+'px,'+(wy * .1)+'px)');
  
  $('.block-2').css('transform', 'translate('+(-wx * .05)+'px,'+(wy * .05)+'px)');
});

.block-1 {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: red;
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

.block-2 {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 50%;
  top: calc(50% - 55px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block-1"></div>
<div class="block-2"></div>

БЛОГ НА HUSL

Движение текста отзывающееся на курсор

Ответы (1 шт):