Как изменять позицию при прокрутке?

Question

[kamisarlapsha]

Привет! Есть блок 1170px и img. Изначально img в правом верхнем углу top: 0; right: 0; (позиция 1). При прокрутке этого блока нужно двигать картинку в нижний левый угол (позиция 2). Понимаю, что нужно делать через scrollTop() и считать одновременно top и left, чтобы она двигалась по диагонали, но как высчитывать насколько должна подвинуться картинка ?

Comments

[Ankhena]

но как высчитывать насколько должна подвинуться картинка ?

По теореме Пифагора? )))
И немножко пропорций.

[kamisarlapsha]

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

[Ankhena]

kamisarlapsha, а дальше...
Пишете где должен оказаться блок при прокрутке на n пикселей.
Возможно, вы сразу знаете (в ТЗ написано или так вычислили), что при прокрутке на 1px блок должен смещаться по горизонтали на 5px, а по вертикали на 1px.
Либо эти коэффициенты зависят от соотношения сторон окна и блока. Либо еще как-то.

[Ankhena]

kamisarlapsha, Вот тут посмотрите, похожий вопрос Постепенное появление элемента при скроле?
Нужно по образцу доделать сдвиг по вертикали.

[Alex]

Вы что-то по типу параллакс-эффекта хотите сделать?

[kamisarlapsha]

Alex, почти, 1170px адаптивный, а картинка при маленькой ширине влезать не будет, поэтому ее надо так прокручивать (чтобы не сжимать)

[kamisarlapsha]

Ankhena, а как добавлять n пикселей при прокрутке на 1px ? Какое должно быть условие ? Грубо говоря когда на 1px прокрутили то добавляем n

[Ankhena]

kamisarlapsha, я дала выше ссылку, там даже готовый код