Как менять контент по скроллу?

Question

[by_steris]

Вопрос наверное больше касающийся анимации, как можно менять контент на месте по скроллу в отдельном блоке? Например, как здесь https://fridaysgames.com/en/
Пробовал использовать fullpage.js, но получается не то, меняются section целиком
Если есть примеры буду благодарен

Comments

[Александр Цымбал]

Ну в примере, который вы указали по ссылке, как раз меняются section целиком. Есть обработчик, который срабатывает на прокрутку колесом мышки (и, вероятно на свайп - не тестил на мобиле).
Вопрос описан не совсем понятно.

[by_steris]

Александр Цымбал, я использую section с background-img и получается, так, что section целиком прокручивается. Можно ли как-то реализовать это с прокруткой на месте. Сейчас получается, как в примерах из fullpage.js (https://alvarotrigo.com/fullPage/examples/continuo...). А хотелось бы чтобы не было этого эффекта прокрутки и менялся контент на месте

[Александр Цымбал]

by_steris, https://alvarotrigo.com/fullPage/extensions/fading... - вот одна из демок Fullpage.js. Слайды меняются не прокруткой, а фэйдом. Ну и можно на элементы внутри слайдом добавлять анимацию, когда слайд обретает класс активности .active или .fp-completely (когда анимация фейда завершается).

[Виталий Першин]

Как вариант вообще использовать swiper с эффектом fade

[by_steris]

Попытался быстро изобразить, что имею. Хотелось бы блоки менялись как то на месте

[by_steris]

by_steris, т.е. по скроллу появлялся другой фон, текст и картинка по центру

Answer 1

[Evtera]

там просто слайдер на всю ширину и высоту страницы.
Подобный функционал можно реализовать с помощью этой библиотеки https://swiperjs.com/demos#vertical
Свайп слайдов по скроллу там так же есть