Скольжение изображения в вид с помощью скролла

Question

У меня есть div, который расположен по центру на странице, где текст с изображением выровнен вправо, как показано ниже. Проблема, с которой я столкнулся, заключается в том, чтобы заставить изображение скользить справа, когда пользователь прокручивает его вниз и отображает регион.

Я могу успешно изменить прозрачность, но не могу заставить ее работать так, как мне нужно, то есть перемещать изображение справа налево на 50 пикселей.

Я экспериментирую с библиотекой skrollr. Любые предложения, где я иду не так, пожалуйста?

Большое спасибо, Джеймс

пример кода

<div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem felis, ultricies vitae justo sed, rutrum sagittis quam. Cras sodales metus odio, eu rhoncus elit commodo a
   <img src="test.png" align="right" />
</div>

CSS для div

div {
    position: absolute;
    left: 50%;
    padding: 20px;
    margin-left: -485px;
    width: 970px;
}

JS

var s = skrollr.init();

Answer 1

Вам нужно предоставить вашему изображению данные skrller, что-то вроде:

<img style=opacity:0 class="skrollable unrendered" data-bottom-top=right:400px; data-top=right:0; alt="" />

Конечно, вам нужно приспосабливаться к вашим потребностям, но дело в том, что для КАЖДОГО элемента вам нужно применять поведение Skrller, вам нужно дать ему некоторые данные