HTML5/CSS3 - "끝없는"회전 배경 만드는 법 - 360도 파노라마

Question

나는 도시의 360도보기 (9000 x 1000 픽셀)로 JPG 이미지를 가지고 있습니다. 끝없이 배경을 회전하는 페이지를 만들어야합니다. - 회전하는 웹 카메라의 느낌을 사용자에게 전합니다.

첫 번째 부분 - 이미지의 왼쪽에서 오른쪽으로 스크롤하는 것은 매우 간단합니다. jQuery.animate (...)를 사용하십시오. 그러나 (359도 회전이 완료된 후) 이미지의 시작 부분으로 어떻게 원활하게 돌아갈 수 있습니까? 그래서 사용자는 "점프"또는 이와 비슷한 것을 알지 못합니까?

웹에 예제가 있습니까?

HTML5/CSS3 (웹킷) 브라우저 만 타겟팅하고 있으며 최신 jQuery를 사용할 수 있습니다.

감사합니다.

Answer 1

회전 배경 뒤에 주요 아이디어는 두 개의 이미지를 그릴 것입니다. 시간이 지남에 따라 x을 증가시킬 수 있으며 x === w을 재설정하면 x = 0을 재설정합니다. 두 번째 이미지가 첫 번째 이미지와 정확히 같은 위치에 있으므로이 재설정이 시각적으로 표시되지 않습니다. 재설정 한 후에는 다시 시작할 수 있으므로 은 끝이없는 것 같습니다..

(나는 width of container <= width of image 가정이 개 이미지를 사용하고 있습니다.)

당신은 예컨대 사용할 수 있습니다 :

• 캔버스 : http://jsfiddle.net/yQMAG/합니다. 이 애니메이션은 내 컴퓨터에서 약간 이상합니다.
• CSS3 애니메이션 : http://jsfiddle.net/k5Bug/.

Answer 2

웹킷 브라우저 만 타겟팅하는 경우 CSS3만으로이 작업을 수행 할 수 있습니다. CSS3에는 애니메이션 지원 기능이 내장되어 있습니다. 반복 카운트 속성을 '무한'을 지정하여 애니메이션은 영원히 계속 될 것입니다 ... 당신은 포인트 ;-)

@-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; 

} 

그리고 물론, 당신의 HTML에 이미지를 얻을 :

를 w 이미지의 폭 인 상태 (x - w, 0)에 (x, 0)에서, 다른 하나 : 는

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

Answer 3

사람들이 플러그인을 만든 "이미지 스티칭"이라고하는 솔루션이 있습니다.

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

이 사람은 너무 모바일 위대한 작품. http://spritespin.ginie.eu/examples.html

Answer 4

당신이 배경 위치와 JQuery와 애니메이션 기능을 재생할 수 있습니다

, 예를 참조하십시오

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

는 끝없는 배경을 가지고 전체 이벤트 세트에서 배경의 폭을 0에서 애니메이션 배경 위치를 0으로 설정하고 애니메이션을 다시 시작합니다.

Answer 5

"둘러보기"효과를 내기 위해 CSS animations을 사용할 수 있습니다. 시차에 효과적입니다. 대신 여러 개의 이미지를 추가하고 애니메이션의

자신의 left 등, 당신은 단지 배경을 설정하고 애니메이션을 줄 수있는 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;} 
} 

이 (조정/공급 업체 접두사 w) 새로운 게코/크롬 브라우저와 함께 작동합니다; fiddled

Answer 6

CSS3 애니메이션을 사용하면 jquery없이이 작업을 수행 할 수 있습니다. 저는 도시 배경 이미지가 컨테이너에서 반복적으로 반복되도록 설정되어 있다고 가정합니다.

키 프레임을 설정하여 반복 가능한 이미지의 너비를 배경 이미지에 애니메이션으로 적용하고 지연없이 무한 루프하도록 지정합니다. 예를 들어, 내 떠도는 구름 이미지 1456 픽셀 폭 반복 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; 
} 

사용자가 설정해야합니다 @ -webkit-키 프레임, @ -moz-키 프레임, @ -o - 키 프레임 및 -webkit-애니메이션 - moz-animation, -o-animation FF, Safari 및 Chrome에 적용됩니다.

http://jsfiddle.net/JQjGZ/