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

[LADYX]

Добрый день!
У себя на странице использую плагин 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>

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

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

[Alexander Belov]

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

[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;

[Alexander Belov]

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

[LADYX]

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. Помогите мне, пожалуйста.

[Alexander Belov]

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

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

Смотреть тут