Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2013
    Messaggi
    29

    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

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,441
    Credo che per progetti mobile si usi jQueryMobile e qui mi fermo perché non lo conosco e non l'ho mai usato
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2013
    Messaggi
    29
    Da quello che ho letto in giro dovrei usare questo ma non riesco a implementarlo nel mio codice. Proposte?
    Grazie

    codice:
    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";
                });
             }

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 © 2019 vBulletin Solutions, Inc. All rights reserved.