Как раздвинуть два элемента при прокрутке страницы вниз?

Question

Может кто-нибудь помочь предложить хороший способ добиться следующего, пожалуйста?

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

Из другого сценария я думаю, что это может быть достигнуто путем адаптации следующего, но я все еще не могу разобраться с этим:

var top = $('.container').offset().top - parseFloat($('.container').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
  $('.imageA').addClass('moveLeft');
  $('.imageB').addClass('moveRight');
  }
else {
  $('.imageA').removeClass('moveLeft');
  $('.imageB').removeClass('moveRight');
  }
});

Но это вызовет событие только один раз, когда появится .container.

Как сделать так, чтобы чем больше контейнер прокручивался в поле зрения, тем больше увеличивалось расстояние между изображениями?

Answer 1

Вы просто устанавливаете / удаляете класс, поэтому вы не получите анимированное движение.Вам следует попробовать установить позицию или поля относительно переменной y.

Простой пример, чтобы дать вам представление:

.left {
    width: 100px;
    height: 100px;
    background-color: #f99;
    position: absolute;
    right: 50%;
    bottom: 0;
}

.right {
    width: 100px;
    height: 100px;
    background-color: #9f9;
    position: absolute;
    left: 50%;
    bottom: 0;
}

$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    $('.left').css('marginRight', y/5);
    $('.right').css('marginLeft', y/5);
});

См. JsFiddle здесь