HTML5/CSS3 - come rendere lo sfondo rotante "infinito" - panorama a 360 gradi

Question

Ho un'immagine JPG con la vista a 360 gradi della città (9000px per 1000px). Devo creare una pagina con lo sfondo a rotazione continua - ad esempio, per dare all'utente un'impressione di webcam rotante.

La prima parte - lo scorrimento da sinistra a destra dell'immagine è molto semplice - basta usare jQuery.animate (...). Ma come posso tornare senza problemi all'inizio dell'immagine (dopo aver completato 359 gradi di giro), così l'utente non noterà "salta" o qualcosa del genere?

C'è qualche esempio sul web probabilmente?

Sono destinato solo al browser HTML5/CSS3 (webkit) e posso utilizzare l'ultimo jQuery.

Grazie.

Answer 1

l'idea principale dietro lo sfondo di rotazione è che si disegna due immagini: una alla (x, 0) e un altro a (x - w, 0) con w essendo la larghezza dell'immagine. È possibile aumentare x nel tempo e non appena x === w si ripristina x = 0. Non visualizzerai visivamente questo reset perché la seconda immagine è posizionata nella stessa identica posizione della prima. Dopo il ripristino, è possibile ricominciare tutto da capo, in modo che lo rotante abbia un aspetto infinito pari a.

(sto usando due immagini assumendo width of container <= width of image.)

si potrebbe usare ad es .:

• Tela: http://jsfiddle.net/yQMAG/. Questa animazione è un po 'a scatti sulla mia macchina.
• Animazioni CSS3: http://jsfiddle.net/k5Bug/.

Answer 2

Se si stanno indirizzando solo browser Webkit, è possibile farlo solo con CSS3. CSS3 ha il supporto integrato per le animazioni. Specificando 'infinito' con la proprietà di iterazione-count, l'animazione andrà avanti per sempre e sempre e ... si ottiene il punto ;-)

@-webkit-keyframes rotateEndlessly 
{ 
    from 
    { 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to 
    { 
     -webkit-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

img 
{ 
    -webkit-animation-name: rotateEndlessly; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

} 

E, naturalmente, l'immagine nel tuo HTML:

<img src="image.jpg" alt="image" /> 

Answer 3

Ci sono soluzioni là fuori che chiamano "image-stitching" per le quali le persone hanno creato plug-in.

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

Questo funziona alla grande per il mobile anche. http://spritespin.ginie.eu/examples.html

Answer 4

si può giocare con la posizione di fondo e la funzione jquery animate, vedere l'esempio:

http://jsfiddle.net/DG8PA/3/

Take a sfondo infinito e animare da 0 alla larghezza del fondo nel set evento complete la posizione di sfondo su 0 e attiva un'altra volta l'animazione.

Answer 5

Si potrebbe utilizzare CSS animations per ottenere un tale effetto "guardarsi intorno" - grande per parallasse!

Invece di aggiungere più immagini e animare la loro left ecc, si può solo impostare uno sfondo e animare la sua background-position:

#bgscroll { 
    background:url(/*some nice seamless texture*/); 
    -moz-animation-duration: 13s; 
    -moz-animation-name: bgscroll; 
    -moz-animation-iteration-count: infinite; 
} 
@-moz-keyframes bgscroll{ 
    from {background-position: 0 0;} 
    to {background-position: 100% 0;} 
} 

Questo potrebbe funzionare con i nuovi browser Gecko/cromo (w/prefisso vendor rettificati); fiddled

Answer 6

È possibile fare questo senza jquery utilizzando animazioni CSS3. Sto assumendo l'immagine di sfondo della città è impostato per ripetere-x senza soluzione di continuità sul contenitore.

Imposta i tuoi fotogrammi chiave per animare l'immagine di sfondo della larghezza dell'immagine ripetibile e dirla a loop infinito senza ritardo. Per esempio, la mia immagine nuvole alla deriva è 1456 px di larghezza e ripete x:

@keyframes DriftingClouds { 
    0%  { background-position: 0 0; } 
    100% { background-position: -1456px 0; } 
} 

#wrapper { 
    background: url(/images/clouds.png) repeat-x 0 0; 
    animation: DriftingClouds 165s linear infinite; 
} 

assicurarsi di impostare @ -webkit-fotogrammi chiave, @ -moz-fotogrammi chiave, @ -o-fotogrammi chiave e -webkit-animation, - moz-animation, -o-animation lo stesso per coprire FF, Safari e Chrome.

http://jsfiddle.net/JQjGZ/