изменение позиции фона по скроллу

[kd241286zjv]

добрый день!
у дизайнера появилась идея по скроллингу браузера сделать анимацию фона. вкратце: надо немного масштабировать фон и заставить его по скроллу перемещаться слева-направо и по достижению позиции по горизонтали 100% начинать двигаться справа налево до позиции 0% по горизонтали. всё это дело зациклить. с jquery тесно не приходилось до сих работать, поэтому возникли проблемы. пытался сначала сделать через animate, но он не подходит тк анимация срабатывает на скролл и не останавливается пока не отработает полностью, мне же нужно что бы по остановке скролла, изменение позиции фона так же останавливалось. пришёл к выводу, что нужно делать через изменение background-position.
я так понял что нужно действовать как-то так:

$(window).scroll(function(){
                var posscrollx = $(this).scrollTop();
                $('#block').css({ "backgroundPosition": posscrollx / 50 + 50 + '%' });
            });

но до воплощения идеи дизайнера тут далеко. подскажите как заставить анимацию на позиции 100% остановиться и пойти обратно. да и как зациклить потом всё это.
спасибо

[ksa]

пытался сначала сделать через animate, но он не подходит тк анимация срабатывает на скролл и не останавливается пока не отработает полностью

Отнюдь!
Это ты ее не останавливаешь...
https://jquery-docs.ru/stop/

[kd241286zjv]

ребят, посидел вчера и решил-таки задачу. если кому интересно, использовал не animate, а формулу:

$(document).ready(function(){
            var breakpoint = 180;
            var breakpoint0 = $('#block').offset().top - $(window).height();
            var breakpoint4 = $('#block1').offset().top;
            var paddingY = (breakpoint4 - breakpoint0) / 6;
            var breakpoint1 = breakpoint0 + paddingY;
            var breakpoint2 = breakpoint1 + paddingY * 2;
            var breakpoint3 = breakpoint2 + paddingY * 2;
        $(window).scroll(function(){
            var posscrollY = $(this).scrollTop();
            if(posscrollY >= breakpoint0 && posscrollY <= breakpoint4){
                if(posscrollY < breakpoint1){
                    var offset = (posscrollY - breakpoint0) / paddingY * (- breakpoint / 2) - (breakpoint / 2);
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else if(posscrollY < breakpoint2){
                    var offset = (posscrollY - breakpoint1) / (paddingY * 2) * (breakpoint) - breakpoint;
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else if(posscrollY < breakpoint3){
                    var offset = (posscrollY - breakpoint2) / (paddingY * 2) * (- breakpoint);
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else{
                    var offset = (posscrollY - breakpoint3) / paddingY * (breakpoint / 2) - breakpoint;
                    $('#block').css({'background-position-x': offset + 'px'});
                }
            }
        });

вдруг кому-то поможет

[рони]

kd241286zjv,
сделайте полноценный макет, добавьте html и css, иначе ваш код только для телепатов, будет хотябы понятно, что вы хотели сделать.

[HTML run]код вашей страницы[/HTML]

[laimas]

kd241286zjv,

$(selector).animate({
  properties
}, {
  step: function(properties.values, jQuery.fx ) {
    //проверяйте, действуйте.
  }
});