Удалите любые осязательные события в случае перемещения мыши и устраните проблему с ориентацией устройства на 90 градусов. - PullRequest
Новая
       21

Удалите любые осязательные события в случае перемещения мыши и устраните проблему с ориентацией устройства на 90 градусов.

0 голосов
/ 12 ноября 2018

У меня есть эффект параллакса для двух DIV - «карт бизнеса», когда я перемещаю курсор по всему разделу, и это нормально! Но этот эффект также срабатывает, когда я использую свой телефон и касаюсь в любом месте раздела. Я не хотел бы этого эффекта, потому что я могу наклонить свой телефон для параллакса. Как отключить любое прикосновение к текущему событию мыши?

И вторая проблема, связанная с вращением моего устройства. Если я прохожу поворот на 90 градусов на любую ось - мои карты начинают прыгать в начальную точку, и параллакс начинается заново, когда продолжается наклон, и наоборот. Могу ли я найти красивые решения для этой проблемы? 

var     genSection = document.querySelector('.general'),
        cardOne = document.getElementById('card1'),
        cardTwo = document.getElementById('card2'),
        shadow = document.querySelector('.c__shadow');


// On cursor move
genSection.addEventListener('mousemove', function(e){

        var pageX = e.clientX,
        pageY = e.clientY;

        cardOne.style.transform = 'translateX(' + pageX/50 + '%) translateY(' + pageY/40 + '%)';
        cardTwo.style.transform = 'translateX(' + pageX/150 + '%) translateY(' + pageY/250 + '%)';
        shadow.style.transform = 'translateX(' + pageX/150 + '%)';

});


// On accelerometer!
window.addEventListener('deviceorientation', function(e){

var   pageX = e.gamma,//Гамма - крутим вокруг оси Y
      pageY = e.beta; //Бета - крутим вокруг оси X

      cardOne.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/4 + '%)'; 
      cardTwo.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/5 + '%)';
      shadow.style.transform = 'translateX(' + pageX/2 + '%)';

    //Inverse in landscape
    if(window.innerWidth > window.innerHeight){
        cardOne.style.transform = 'translateX(' + pageY*2 + '%) translateY(' + pageX/4 + '%)'; 
        cardTwo.style.transform = 'translateX(' + pageY + '%) translateY(' + pageX/5 + '%)';
        shadow.style.transform = 'translateX(' + pageY + '%)';
    }

});
...