Наклон текста относительно мыши

Question

Как реализовать наклон текста относительно мыши, как здесь У меня скрипт такой

var $text = $('.text'),
  w = $(window).width(), //window width
  h = $(window).height(); //window height

$(window).on('mousemove', function(e) {
  var offsetX = 0.5 - e.pageX / w,
    offsetY = 0.5 - e.pageY / h,
    transform = 'rotateX(' + (-offsetY) + 'deg) rotateY(' + (offsetX * 2) + 'deg)';

  $text.css('transform', transform);
});

Мне он он не нравится, так как ярко не выражена трансформация

Answer 1

Запускаем, открываем на весь экран, водим курсором и радуемся:

const wrap = document.querySelector(".txt");

function fCardRotate(ev) {
  wrap.style.transform = `perspective(2000px) rotatey(${(ev.offsetX - wrap.offsetWidth / 2) / 10}deg) rotatex(${((ev.offsetY - wrap.offsetHeight / 2) / 10) * -1}deg)`;
}

document.addEventListener("mousemove", fCardRotate);

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  height: 100vh;
}

.txt {
  transform: perspective(2000px) rotatey(0deg) rotatex(0deg);
  transition: transform 0.3s ease;
  font: bold 7vh/1em 'Arial';
  pointer-events: none;
}

<div class="txt">
  <p>Нужно пытаться, что-то делать самому.</p>
  <p>Прилагать хотя бы минимальные усилия.</p>
  <p>Тогда и результат будет обязательно.</p>
</div>

БЛОГ НА HUSL

Наклон текста относительно мыши

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