Trasformazione multipla

[umberto983]

Salve a tutti,
come si applicano contemporaneamente 2 trasformazioni?
Praticamente mi funziona solo la seconda, ma se la elimino, la prima inizia a funzionare.
Ma non funzionano contemporaneamente.

Probabilmente è un problema di scrittura ma non trovo come correggere.
Grazie

var vLamp = hypeDocument.getElementById('lamp');

window.addEventListener('deviceorientation', function(eventData) {
var vBeta = eventData.beta
var vWindowOrientation = window.orientation;
if (vWindowOrientation == 90){
vBeta = vBeta * -1;
};
vLamp.style.webkitTransform = 'rotate(' + vBeta + 'deg)';
vLamp.style.webkitTransform = 'translate(' + vBeta * 3 + 'px)';
});

[KillerWorm]

Ciao, dovresti accorpare le due regole così come si farebbe normalmente per la sintassi css.

In questo caso è da considerare che stiamo pur sempre parlando di JavaScript; la proprietà "webkitTransform" è di fatto una variabile ed è trattata come tale, per cui se si va a sovrascriverla prenderà inevitabilmente l'ultimo valore che le è stato attribuito. Il comportamento che descrivi è quindi normale.

Puoi risolvere semplicemente in questo modo:

vLamp.style.webkitTransform = 'translate(' + vBeta * 3 + 'px) rotate(' + vBeta + 'deg)';

Oppure così, se per qualche motivo vuoi mantenere separate le righe (nota l'operatore += che concatena il valore a quello già attribuito sulla stessa variabile, per cui non va a sovrascriverla):

vLamp.style.transform = 'translate(' + vBeta * 3 + 'px)';
vLamp.style.transform += ' rotate(' + vBeta + 'deg)';

PS: quando posti del codice sul forum è consigliabile usare gli appositi tag di formattazione (vedi regolamento)

[umberto983]

Grazie mille! Quindi riscrivevo la variabile senza rendermene conto con l'ultima assegnazione.

Sulla stessa base del js precedente:

var vTitle = hypeDocument.getElementById('title');
    
    window.addEventListener('deviceorientation', function(eventData) {
        var vParallax = eventData.gamma;
        var vWindowOrientation = window.orientation;
        if (vWindowOrientation == 90){
            vParallax = vParallax * -1;
        };
        
        vTitle.style.webkitTransform = 'translate(' + vParallax   + 'px)';
    });

Stavo provando ad incrementare la variabile costantemente con il device inclinato nella stessa direzione.
Per intenderci, ora l'immagine "title" si muove in parallasse avanti e indietro quando inclino il device e quando lo riporto al suo posto.
Vorrei invece ottenere uno spostamento costante con device inclinato a sinistra e un ritorno con device inclinato sulla destra (ed un finecorsa dell'immagine)

Ho provato una soluzione di questo tipo:

vParallax = vParallax ++10;

Ma non funziona