Sử dụng plugin .pan() của jQuery spritely plugin để bỏ qua giữa một khoảng trống được xác định

Question

OK, xin lỗi vì tiêu đề khó xử!

Đó là loại tình huống độc đáo theo ý kiến ​​của tôi. Vì vậy, về cơ bản, với plugin jQuery Spritely, bạn có thể gọi phương thức/hành động .pan() cho phép bạn (tự giải thích thực sự) xoay cái gì đó trên màn hình.

Tôi hiện đang có ba cảnh quay trò chơi video từ trái sang phải và ngược lại trong nền của trang, sau nội dung của tôi.

Bây giờ, tôi đã nghĩ rằng nó sẽ rất tuyệt, thay vì khi một phần của hình ảnh được chuyển qua phía sau nội dung của tôi <div> s, nó sẽ chuyển sang phía bên kia, mà không đi sau <div> s.

Tôi cũng muốn cho sprites để có thể đi từ phía bên trái sang bên phải, vì vậy nó sẽ đẹp hơn nếu nó không phải là hai trường hợp riêng biệt của các plugin. Tôi mở cửa cho bất kỳ đề xuất mặc dù!

Có cách nào dễ dàng để xác định điều này không?

Cảm ơn!

Answer 1

vì bạn đang di chuyển hình ảnh Tôi nghi ngờ có một cách dễ dàng để thực hiện việc này ngoài việc sử dụng hai phiên bản của plugin. Cả hai di chuyển theo cùng một cách nhưng một ở bên trái của nội dung, một ở bên phải, và hẹn giờ để nó dường như chỉ là một cuộn.

Bạn có thể không muốn làm điều này vì vấn đề hiệu suất nhưng miễn là bạn giữ phần còn lại của plugin đơn giản và tối ưu hóa hình ảnh của bạn tốt, tôi nghĩ bạn nên ổn.

EDIT

Tuy nhiên nghĩ rằng đây là cách duy nhất để đạt được hiệu quả. Tôi có lẽ sẽ giữ html như bạn có nó với tất cả các hình ảnh nền như các thực thể duy nhất nhưng tôi sẽ sử dụng js để sao chép chúng, định vị chúng và di chuyển chúng. Ví dụ:

var windowSize = $(document).width(); 
var elementSize = (windowSize - $('#header').width())/2; 

$('#bg_1').addClass('bg_1').css('background-position','right top').width(elementSize+'px').clone().css({'left':'auto','right':'0','background-position':'left top'}).insertAfter('#bg_1'); 

$('.bg_1').each(function(){$(this).pan({fps: 3, speed: 2, dir: 'right'})}); 

Tự nhiên điều này cần một số công việc nhưng tôi đã thử chạy điều này trong firebug trên trang web của bạn và nó đạt được hiệu quả nhiều hơn hoặc ít hơn. Vị trí của hình nền bị tắt nhưng tôi cho rằng đó là do chức năng pan đã bắt đầu. Nếu chức năng xoay tự động định vị các hình nền trước khi nó bắt đầu di chuyển chúng thì hiệu ứng bạn muốn sẽ khó đạt được hơn.

Bạn cũng sẽ bị bỏ lại với vấn đề nền phía sau các góc tròn, mặc dù ở trên cùng, tôi nghĩ rằng điều này sẽ chỉ là màu xanh.