Использование .pan () плагина jQuery spritely для перехода между заданным пространством

Question

ОК, простите за неуклюжий заголовок!

На мой взгляд, это какая-то уникальная ситуация.

Таким образом, с помощью плагина jQuery Sprither можно вызывать метод / действие .pan (), который позволяет вам (на самом деле не требовать пояснений) перемещать что-либо по экрану.

В настоящее время у меня есть три сцены видеоигры, панорамирование слева направо и наоборот на заднем плане моей страницы, позади моего контента.

Теперь я подумал, что было бы круто, чтобы вместо того, чтобы часть изображения панорамирования передавалась за моим контентом <div> с, он переходил на другую сторону, не переходя за <div> с.

Я бы также хотел, чтобы спрайты могли переходить с левой стороны на правую, поэтому было бы лучше, если бы это не было двумя отдельными экземплярами плагина. Я открыт для любых предложений, хотя!

Есть ли простой способ указать это?

Спасибо!

Answer 1

потому что вы движетесь, я сомневаюсь, что есть простой способ сделать это, кроме использования двух экземпляров плагина.Оба движутся одинаково, но один слева от контента, один справа, и рассчитан так, что он выглядит как один ролик.

Возможно, вы не захотите делать это из-за проблем с производительностью, но какПока вы поддерживаете простой плагин и хорошо оптимизируете свои изображения, я думаю, что у вас все будет хорошо.Эффект.Я бы, вероятно, сохранил HTML-код, как у вас, со всем фоновым изображением в виде отдельных объектов, но я бы использовал js для их клонирования, позиционирования и перемещения.Пример:

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'})});

Естественно, это требует некоторой работы, но я попытался запустить это в firebug на вашем сайте, и это дает эффект более или менее.Расположение фоновых изображений отключено, но я думаю, это из-за запуска функции панорамирования.Если функция панорамирования автоматически размещает фоновые изображения до того, как начинает их перемещать, то желаемый эффект будет еще труднее достичь.

У вас также останется проблема с фоном за закругленными углами, хотяв верхней части я думаю, что это будет просто синий в любом случае.