Odtnhj

I have a parallax effect on two DIVs - "buisness cards" when i move cursor through entire section, and it is ok! But this effect also triggered when i use my phone and touch in any place on the section. I would't want this effect because i may tilt my phone for parallax. How to disable any touching on current mousemove event?

And second problem related on rotation my device. If i pass through 90 deg on rotation in any axis - my cards become jumping to start point and make a fresh start parallax when continue tilting and vice versa. May i have any beautiful solutions for this issue?

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 + '%)';
 

);