Как реализовать такой скролл в верстке?

Question

[Иван К]

Привет. Столкнулся с такими хотелками, и не совсем понимаю реально ли реализовать такое.
Суть - сперва идет блок первого экрана. За ним идет блок который должен скроллиться по горизонтали и иметь параллакс фон (фон едет медленнее контента) далее при прокрутке этого блока страница скролиться дальше вниз и имеет так же параллакс фон.


Попробовал уже Rellax JS и Locomotive Scroll - обе библиотеки поддерживают горизонтальный скролл сам по себе, но совместить на одной странице вертикальный и горизонтальный не дают. Это вообще возможно?

Answer 1

[profesor08]

https://scrollmagic.io/
https://scrollmagic.io/examples/advanced/section_w...

По сути горизонтальной прокрутки нет, и не должно быть, она не удобная. Но есть эффект перемещения блоков по горизонтали.

Answer 2

[Антон Антон]

scrollmagic.io

Comments

[Иван К]

Смотрел этот плагин, он не совсем подходит под задачу

Answer 3

[Andrew]

Привет. Такой скролл легко сделать с помощью overflow-x: scroll и overflow-y: scroll
https://developer.mozilla.org/en-US/docs/Web/CSS/o...
https://developer.mozilla.org/en-US/docs/Web/CSS/o...

Для мобилок идеально подходит - пример Википедия таблицы так делает.
Но если разбирать десктопную версию, то в разных браузерах будет по разному смотреться. И тогда лучше использовать библиотеку. Тут уже на выбор то что вам нравится.