CODEWITHSUNDEEP
javascriptmousemove
Alex1919
Alex1919

Reputation: 13

Mousemove on mobile devices

I have to implement the rotation of an image even on mobile devices. Currently if we place the mouse on the image simulates a 3D rotation but on mobile devices nothing happens. I saw that I have to add: if (window.DeviceMotion) {// Do something} But I do not understand how to implement it. Does anyone have any ideas? Thank you

use strict';

$(document).on('mousemove', function (e) {
$('.light').css({
left: e.pageX - 300,
top: e.pageY - 300
});
});


var el = $('.js-tilt-container');


el.on('mousemove', function (e) {
var _$$offset = $(this).offset();


var left = _$$offset.left;
var top = _$$offset.top;


var cursPosX = e.pageX - left;
var cursPosY = e.pageY - top;
var cursFromCenterX = $(this).width() / 2 - cursPosX;
var cursFromCenterY = $(this).height() / 2 - cursPosY;


$(this).css('transform', 'perspective(500px) rotateX(' + cursFromCenterY / -40 + 'deg) rotateY(' + -(cursFromCenterX / -40) + 'deg) translateZ(-45px)');


var invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs(cursFromCenterX) : Math.abs(cursFromCenterX);


//Parallax transform on image
$(this).find('.js-perspective-neg').css('transform', 'translateY(' + cursFromCenterY / 10 + 'px) translateX(' + -(invertedX / 10) + 'px) scale(1.15)');


$(this).removeClass('leave');
});


el.on('mouseleave', function () {
$(this).addClass('leave');
});

OK thanks. I've tried setting the "deviceorientation" code in various ways but it does not work. I used these variables. How could I integrate them in my code? thank you

   if (!('ondeviceorientation' in window)) {
            document.getElementById('do-unsupported').classList.remove('hidden');
         } else {
            document.getElementById('do-info').classList.remove('hidden');

            window.addEventListener('deviceorientation', function(event) {
               document.getElementById('cube').style.webkitTransform =
               document.getElementById('cube').style.transform =
                       'rotateX(' + event.beta + 'deg) ' +
                       'rotateY(' + event.gamma + 'deg) ' +
                       'rotateZ(' + event.alpha + 'deg)';

               document.getElementById('beta').innerHTML = Math.round(event.beta);
               document.getElementById('gamma').innerHTML = Math.round(event.gamma);
               document.getElementById('alpha').innerHTML = Math.round(event.alpha);
               document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
            });
         }

Upvotes: 1

Views: 2463

Answers (1)

P Varga
P Varga

Reputation: 20269

On mobile, you need to listen for the touchmove or pointermove events. See caniuse for the corresponding browser support: Touch events, Pointer events

By the way, from a user experience perspective you might want to try rotating based on device orientation (the deviceorientation event), rather than touch.

Upvotes: 2

Related Questions