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

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, вам нужно дать ему несколько данных