HTML5/CSS3 - cách tạo nền xoay "vô tận" - toàn cảnh 360 độ

Question

tôi có hình ảnh JPG với chế độ xem 360 độ của thành phố (9000px x 1000px). Tôi cần phải tạo một trang với nền xoay không ngừng - ví dụ: cho người dùng ấn tượng về quay webcamera.

Phần đầu tiên - cuộn từ trái sang phải của hình ảnh rất đơn giản - chỉ cần sử dụng jQuery.animate (...). Nhưng làm thế nào tôi có thể trở lại liền mạch để bắt đầu hình ảnh (sau khi nó đã hoàn thành 359 độ biến), do đó, người dùng sẽ không nhận thấy "nhảy" hoặc một cái gì đó như thế?

Có ví dụ nào trên web có thể không?

Tôi chỉ nhắm mục tiêu trình duyệt HTML5/CSS3 (webkit) và tôi có thể sử dụng jQuery mới nhất.

Cảm ơn bạn.

Answer 1

Ý tưởng chính đằng sau nền xoay là bạn vẽ hai hình ảnh: một ở số (x, 0) và một hình ảnh khác tại (x - w, 0) với độ rộng của hình ảnh là w. Bạn có thể tăng x theo thời gian và ngay sau khi x === w bạn đặt lại x = 0. Bạn sẽ không nhìn thấy thiết lập này một cách trực quan bởi vì hình ảnh thứ hai được đặt ở vị trí chính xác giống như vị trí đầu tiên. Sau khi đặt lại, bạn có thể bắt đầu lại từ đầu, để quay trông vô tận.

(Tôi đang sử dụng hai hình ảnh giả định width of container <= width of image.)

Bạn có thể sử dụng ví dụ .:

• Canvas: http://jsfiddle.net/yQMAG/. Hoạt hình này hơi giật trên máy của tôi.
• Hoạt ảnh CSS3: http://jsfiddle.net/k5Bug/.

Answer 2

Nếu bạn chỉ nhắm mục tiêu trình duyệt webkit, bạn có thể thực hiện việc này chỉ với CSS3. CSS3 có hỗ trợ tích hợp cho hoạt ảnh. Bằng cách xác định 'vô hạn' với tài sản lặp đếm, hình ảnh động của bạn sẽ đi mãi mãi và không ngừng và ... Bạn sẽ có được điểm ;-)

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

} 

Và tất nhiên, những hình ảnh trong HTML của bạn:

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

Answer 3

Có các giải pháp mà họ gọi là "ghép hình ảnh" mà mọi người đã tạo plugin.

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

Cái này hoạt động tuyệt vời cho điện thoại di động quá. http://spritespin.ginie.eu/examples.html

Answer 4

bạn có thể chơi với vị trí nền và chức năng jquery animate, xem ví dụ:

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

Hãy nền vô tận và động từ 0 đến chiều rộng của nền trong sự kiện tập hợp hoàn chỉnh vị trí nền tới 0 và kích hoạt một lần nữa hoạt ảnh.

Answer 5

Bạn có thể sử dụng CSS animations để đạt được hiệu ứng "nhìn xung quanh" như vậy - tuyệt vời cho thị sai!

Thay vì thêm nhiều hình ảnh và hiệu ứng động của họ left vv, bạn có thể chỉ cần đặt một nền tảng và động của nó 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;} 
} 

này sẽ làm việc với các trình duyệt Gecko/Chromium mới (w/vendor tiền tố điều chỉnh); fiddled

Answer 6

Bạn có thể thực hiện việc này mà không cần làm phiền bằng cách sử dụng hoạt ảnh CSS3. Tôi giả sử hình nền của thành phố được thiết lập để lặp lại liên tục trên vùng chứa.

Bạn thiết lập khung hình chính để tạo hiệu ứng hình nền cho chiều rộng của hình ảnh lặp lại và cho nó lặp vô hạn mà không bị trễ. Ví dụ, trôi mây hình ảnh của tôi là 1456 px rộng và lặp đi lặp lại 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; 
} 

Hãy chắc chắn rằng bạn thiết lập @ -webkit-keyframes, @ moz-keyframes, @ -o-keyframes và -webkit-hoạt hình, - moz-animation, -o-hoạt hình tương tự để bao gồm FF, Safari và Chrome.

http://jsfiddle.net/JQjGZ/