HTML5/CSS3 - cómo hacer que el fondo "infinito" gire - panorama de 360 ​​grados

Question

tengo una imagen JPG con la vista de 360 ​​grados de la ciudad (9000px por 1000px). Necesito crear una página con interminablemente girando el fondo - dando al usuario una impresión de cámara web rotativa, por ejemplo.

La primera parte, desplazándose de la izquierda a la derecha de la imagen, es muy simple: solo use jQuery.animate (...). Pero, ¿cómo puedo volver sin problemas al comienzo de la imagen (después de haber completado 359 grados de giro), para que el usuario no note "saltar" o algo así?

¿Hay algún ejemplo en la web probablemente?

Me estoy dirigiendo al navegador HTML5/CSS3 (webkit) solamente, y puedo usar la última jQuery.

Gracias.

Answer 1

la idea principal detrás del fondo rotatorio es que se dibuja dos imágenes: una en (x, 0) y otro en (x - w, 0) con w siendo el ancho de la imagen. Puede aumentar x con el tiempo, y tan pronto como x === w restablezca x = 0. No verás visualmente este restablecimiento porque la segunda imagen está posicionada exactamente en la misma posición que la primera. Después de reiniciar, puede comenzar de nuevo, de modo que el giratorio se ve sin fin.

(estoy usando dos imágenes asumiendo width of container <= width of image.)

usted podría utilizar ej .:

• lona: http://jsfiddle.net/yQMAG/. Esta animación es un poco desigual en mi máquina.
• animaciones CSS3: http://jsfiddle.net/k5Bug/.

Answer 2

Si solo está apuntando a webkit-browsers, puede hacerlo solo con CSS3. CSS3 tiene soporte incorporado para animaciones. Al especificar 'infinito' con la propiedad iteración de conteo, la animación continuará para siempre y siempre, y ... usted consigue el 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; 

} 

Y, por supuesto, la imagen en el código HTML:

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

Answer 3

Hay soluciones que ellos llaman "creación de imágenes" para las que las personas han hecho complementos.

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

Ésta funciona muy bien para móviles también. http://spritespin.ginie.eu/examples.html

Answer 4

se puede jugar con la posición de fondo y la función jQuery animado, véase el ejemplo:

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

Tome un fondo sin fin y animar desde 0 hasta el ancho de fondo en el conjunto de eventos completa la posición de fondo a 0 y dispara otra vez la animación.

Answer 5

Puede usar CSS animations para lograr un efecto de "mirar alrededor" - ¡excelente para paralaje!

En lugar de añadir varias imágenes y animación de su left etc, sólo podría establecer un fondo y animar su 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;} 
} 

Esto funcionaría con nuevos navegadores Gecko/cromo (w/prefijo de proveedor ajustado); fiddled

Answer 6

Puede hacer esto sin jquery mediante el uso de animaciones CSS3. Supongo que la imagen de fondo de la ciudad está configurada para repetir x sin interrupciones en el contenedor.

Configura los fotogramas clave para animar la imagen de fondo con el ancho de la imagen repetible e indicarle que lance un ciclo infinito sin demora. Por ejemplo, mi imagen de las nubes a la deriva es 1456 píxeles de ancho y repite: 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; 
} 

asegúrese de configurar @ webkit-fotogramas clave, @ -moz-fotogramas clave, @ -O-y-animación de fotogramas clave, webkit - moz-animation, -o-animation lo mismo para cubrir FF, Safari y Chrome.

http://jsfiddle.net/JQjGZ/