Visualizzazione dei risultati da 1 a 3 su 3

Visualizzazione discussione

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2013
    Messaggi
    41

    rotate su dispositivi mobili

    Ciao a tutti.
    Devo implementare la rotazione di un immagine anche su dispositivi mobili. Attualmente se ci posiziono il mouse sopra l'immagine simula una rotazione 3d ma su dispositivi mobili non accade niente.
    Ho visto che devo aggiungerci:
    if(window.DeviceMotion) { //Do something }
    Ma non capisco come implementarlo.
    Qualcuno ha idee?
    Grazie

    [CODE]'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');
    });
    Ultima modifica di alex-13; 28-01-2019 a 00:54

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.