HTML5 Device Orientation API e WebSocket

26 luglio 2012

Ruotiamo le immagini

Anche solo focalizzandoci su di una sola variabile, alpha, possiamo ottenere risultati di tutto rispetto. Ad esempio possiamo utilizzare la potenza dei CSS3 per applicare una rotazione ad una immagine opposta alla rotazione del device dell’utente.

Per fare questo dobbiamo avvalerci di una proprietà chiamata transform: rotateY(deg), che, come il nome suggerisce, applica una rotazione pari al valore di deg sull’asse delle y che attraversa il centro dell’elemento.

Ecco come possiamo agganciare l’evento deviceorientation alla rotazione sulla nostra immagine:

window.addEventListener ("deviceorientation", traccia, false);

function traccia(evento) {
  document.querySelector('img').
  setAttribute('style','-webkit-transform: scale(4) rotateY(' + (360 - evento.alpha) + 'deg);' +
               'transform: scale(4) rotateY(' + (360 - evento.alpha) + 'deg);');
}

Notiamo come al momento non ci preoccupiamo di aggiungere prefissi sperimentali se non quello dedicato Webkit, layout engine che sottende sia il browser di casa Apple che quello di casa Google. Quando si estenderà il supporto per le features in oggetto dovremo ricordarci di aggiungere anche i prefissi sperimentali per eventuali nuovi browsers.

Prima di poter apprezzare il risultato di questo nostro esperimento dobbiamo necessariamente affrontare un altro tema; con le istruzioni fin qui svolte l’immagine ruota in opposizione alla rotazione del device, ma su se stessa e non attorno alla telecamera virtuale dalla quale l’utente sta visualizzando la pagina. Nessun problema, grazie alla proprietà transform-origin possiamo cambiare l’origine della rotazione facendola coincidere con il punto di osservazione dell’utente, ecco quindi il listato HTML di questo nostro secondo esperimento:

<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Level Three</title>
<script>
window.addEventListener ("deviceorientation", traccia, false);
function traccia(evento){
  document.querySelector('img').
  setAttribute('style', 
               '-webkit-transform: scale(4) rotateY(' + (360 - evento.alpha) + 'deg);' +
               'transform: scale(4) rotateY(' + (360 - evento.alpha) + 'deg);'
  );
}
</script>
<style>
html,body { height: 100%; }

body {
  display: box;
  box-align: center;
  box-pack: center;
  perspective: 400px;
  background-image: radial-gradient(center center, white, gray);
}

img {
  display: block;
  transform-style: preserve-3d;
  transform-origin: 225px 150px 400px;
}
</style>
<!-- scaricalo da http://leaverou.github.com/prefixfree/ -->
<script src="../prefixfree.js"></script>
</head>
<body>
<img src="img/panorama.jpg">
</body>
</html>

Notiamo come la componente z della proprietà perspective-origin sia uguale alla distanza imposta dalla direttiva prospective; in questo modo la rotazione avverrà attorno al punto di osservazione dell’utente.

Ecco uno screenshot della pagina in azione:

Figura 1. (clic per ingrandire)

Se vuoi aggiornamenti su HTML5 Device Orientation API e WebSocket inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su HTML5 Device Orientation API e WebSocket

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy