Как реализовать горизонтальное движение при вертикальном скролле?

Question

[swks]

Как реализовать горизонтальное движение при вертикальном скролле, что бы движение происходило по прямой и в одном блоке, а не происходило по всей странице ?

Comments

[Денис]

Думаю, что вам надо смотреть в сторону параллакса

[swks]

Денис: не тут параллакс не подходи, тут нет работы со слоями, есть страница которая скроллиться вертикально и на этой страницы допустим в середине есть имейдж который должен двигаться горизонтально вправо тогда когда страница скроллиться вниз

Answer 1

[hime2]

Вот почитайте
Еще советую почитать про scrollleft

Вот еще одни вариант
https://github.com/kasparsj/jquery-data-parallax вот готовый пример, но он лагает, как мне кажется.

Comments

[swks]

hime2: спасибо, дата паралакс помог

[hime2]

swks: Да не за что)

Answer 2

[Light Air]

https://css-tricks.com/snippets/jquery/horz-scroll...

Comments

[swks]

Light Air: видел, но тут все атачиться к боди, то бишь будет скролиться вся страница, а мне нужно всего лишь 1 элемент из все страницы что бы скролился горизонтально, а все остальное вертикально

[Light Air]

swks: swks: так что мешает навесить соответствующее событие на нужный блок?

[swks]

Light Air: ок, по пробую.

[Light Air]

swks: так? jsfiddle.net/LightAir/h9mLnbcm

[swks]

Light Air: да примерно так, но тут скролл продолжается горизонтально в бесконечность, а нужно что бы когда обект ушел с поля видимости то бишь с экрана, скролл продолжался вертикальный

[Light Air]

swks: ну всё в ваших руках =) Я же привёл пример, остальное дело за вами. jsfiddle.net/LightAir/h9mLnbcm/1
Только ради ктулху, не юзайте этот черновой пример накиданный на скорую руку.

Answer 3

[Денис]

Если я правильно понял, то в принципе, сюда можно прикрутить , решение которое я давал на похожий вопрос. Только заменить scrollTop на scrollLeft
Пример в песочнице

UPD jsfiddle.net/27mz45L2/1

var elH = horizontal.offsetHeight,
    elTop = horizontal.offsetTop,
    winH = window.innerHeight,
    factor = horizontal.scrollWidth / (elH * 2 + winH);
window.addEventListener('scroll', function (e) {
    var elPosTop = horizontal.getBoundingClientRect().top + elH,
        elPosBot = horizontal.getBoundingClientRect().bottom - elH;
    if ((elPosTop >= 0) && (elPosBot <= winH)) {
        var dE = document.documentElement,
            top = (this.pageYOffset || dE.scrollTop) - (dE.clientTop || 0);
        horizontal.scrollLeft = Math.abs(elTop - winH - top) * factor;
    }
}, false);

Comments

[swks]

Денис: да, но почему горизонтальный скролл происходить только по наведению мыши, нужно что бы он начинался когда обьект попадает в поле видимости экрана (вы листаете страницу вертикальным скролом и тут в видимость экрана попадает наш обьект и начинаеться уже горизонтальный скрол) и заканчивался когда обьект уходит с экрана, и продолжался вертикальный скрол

[Денис]

swks: Дополнил ответ. Может пригодится.