Блог

Страница, над которой я работаю, имеет эффект наклона, который влияет на ориентацию тела сайта. Я хочу отключить это, когда страница достигнет области просмотра мобильного устройства; Я посмотрел и попробовал несколько вещей, но, похоже, не могу добиться желаемого эффекта. Приведенный ниже код — это то, что я использую. Этот скрипт выполняется отдельно от моего основного JS-кода.

 window.addEventListener("mousemove",function(e) {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var clientHeight = document.body.clientHeight;
  var skew = {};
  skew.y = (20 * ((e.x / width) - 0.5));
  skew.x = -(20 * ((e.y / height) - 0.5));

  document.body.style.webkitTransform = "perspective(" clientHeight "px) rotateX(" skew.x "deg) rotateY(" skew.y "deg)";

});
  

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

Проверьте изменение размера окна,

 window.addEventListener('resize', function() {
  if (window.innerWidth < 568) {
    document.body.style.webkitTransform = '';
  }
});
  

А также убедитесь, что вы не применяете его повторно, если пользователь перемещает мышь.

 // This is the function you already have
window.addEventListener('mousemove', function(e) {
  if (window.innerWidth < 568) {
    return;
  }
  ...
}