Анимация блока при прокрутке страницы
 

Добрый день!
У себя на странице использую плагин https://github.com/Prinzhorn/skrollr
Но мне нужен только один эффект, необходимо движение при прокрутке страницы только трех блоков, и то на несколько пикселей.

<div class="left" [B]data-bottom="margin-left:50px;" data-center="margin-left:10px;"[/B]><img alt="" src="1.jpg"></div>

<div class="right" [B]data-bottom="margin-right:50px;" data-center="margin-right:10px;"[/B]><img alt="" src="2.jpg"></div>

<div class="top" [B]data-bottom="margin-top:50px;" data-center="margin-top:0px;"[/B]><img alt="" src="3.jpg"></div>

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

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

LADYX,
Ссылка на свою страницу? Или на страницу, где реализовано то, что ты хочешь сделать?

Alexander Belov,
Я вас приветствую! Ссылку на свою страницу дать не могу, она еще не создана, ее нет на сервере, пока что ее создаю у себя на компьютере. У меня этот эффект работает.
Вот на бросал здесь https://jsfiddle.net/LADYX/q7dw096f/ Но там почему-то этот эффект не работает, не могу понять почему.
Смысл вот в чем. У картинки в стиле указано по умолчанию свойство margin-left: 10px; Скрипт должен присваивать этой картинке свойство margin-left: 50px; Когда начинаем прокручивать страницу, докручиваем до картинке, и когда она только появляется внизу экрана, у нее свойство margin-left: 50px; Прокручиваем ее дальше, и картинка доходя до цента экрана (имеется ввиду по вертикали) плавно уменьшает свойство до margin-left: 10px; И тоже самое обратно, от цетра экрана к низу экрана картинка свойство меняет с margin-left: 10px; на margin-left: 50px;

LADYX,
Насколько я понял, Waypoints поможет.

Alexander Belov,
я прошу прощения за долгое молчание, в доме было чп.
Waypoints это тоже целый плагин. А мне нужно гораздо проще. Я вот набросал:

<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>

.person {
  margin-left: 10px;
  transition: margin-left .4s;
}
p {
  height: 700px;
}

$(function() {
$('.person').css({'margin-left':'50px'});
  $(window).on('scroll', function(e) {
    if ($(window).scrollTop() > $('.person').offset().top - $(window).height()) {
      $('.person').css({'margin-left':'10px'});
    }
  });
});

https://jsfiddle.net/LADYX/6smL4jwz/2/

Но у меня получается так, что блок меняет margin сразу же, как только внизу экрана показался его уже первый пиксель. А мне нужно, чтобы он в нижней части экрана был с отступом 50px, и по мере прокрутки вверх до центра экрана он плавно менял отступ до 10px. Помогите мне, пожалуйста.

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

Вот, например, как можно определить тот момент, когда наш элемент попал в нужную область видимости (появился в окне браузера).

Смотреть тут