0

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

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

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

7
  • Добавьте ваш код, укажите в чём возникло затруднение.
    – UModeL
    13 апр 2020 в 2:54
  • что уж там - давайте по пунктам - как изготовлена каждая секция на этом сайте - в принудительном отпуске за +10 в карму всё напишут :)) 13 апр 2020 в 3:00
  • цветочек меня не интересует. А вообще здесь много чего интересно сделано, чего трудно найти в Интернете качественно сделанного
    – helldrg
    13 апр 2020 в 3:25
  • если ввести в гугле "наклон текста относильно мыши js css", то первой ссылкой будет мой вопрос здесь. Думаю вопрос актуальный
    – helldrg
    13 апр 2020 в 3:28
  • а если написать в codepen.io - 3D mousemove - то появляются результаты: codepen.io/kyiv/pen/MKdBMa 13 апр 2020 в 3:34

1 ответ 1

2

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

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>

9
  • 1
    спасибо большое, у меня не так смотрелось ярко, потому что перспективу не устанавливал
    – helldrg
    13 апр 2020 в 4:06
  • 1
    Даже на телефоне робит... + в репу 13 апр 2020 в 4:10
  • @helldrg: но с "яркость" перебарщивать не стоит, пощадите людей - цветные прыгающие штуки в больших количествах быстро утомляют.
    – UModeL
    13 апр 2020 в 4:14
  • @helldrg: карточки по тому же принципу - ru.stackoverflow.com/a/1094910/265406
    – UModeL
    13 апр 2020 в 4:16
  • 2
    @helldrg: перспектива, тени и градиенты - основа реализма
    – UModeL
    13 апр 2020 в 4:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.