Крестовина фиксированных фоновых изображений на прокрутке

Question

Я ищу, чтобы воссоздать что-то вроде раздела функций на веб-сайте FitBit, где пользователь прокручивает главную страницу, затем попадает в раздел фиксированных изображений, которые пересекаются при прокрутке и сохранении навигационного содержимого прокрутки положение точки:

https://www.fitbit.com/uk/flex

Я смотрел на это на некоторое время теперь и нашел несколько плагинов, но ни один из них совершенно правы. В частности, мне было интересно, видел ли кто-нибудь какие-либо соответствующие комбинации плагинов, которые я мог бы использовать, или первоначальные идеи о том, как сделать перекрестное затухание при навигации во время прокрутки?

Спасибо!

Answer 1

Короткий ответ: Там нет необходимости в каких-либо специальных плагинов, все это может быть сделано с достаточно простой JQuery

Деталь:

Я сомневаюсь, что есть что-то серьезно сложное здесь происходит. Возникает вопрос, который недавно я увидел Here, касающийся запуска изменений в прокрутке, то есть когда высота прокрутки достигает определенного уровня (следующая «страница», на которой вы хотите увидеть другой фон), вы можете инициировать изменения, такие как изменение фоновое изображение.

Для того, чтобы сделать фолд кроссфейдом, используйте JQuery. fadeIn() и .fadeOut() на двух ваших изображениях. Я предполагаю, что вы знаете, как сделать изображение в фоновом режиме каким-то способом (например, z-index).

Остальные кусочки, очевидно, будут иметь свои собственные требования к настройке. Сайт фитинга в целом намного сложнее - он ведет себя по-разному на разных этапах страницы и снова по-разному, если вы просматриваете его с другим размером окна (все это можно контролировать с помощью тегов CSS @media и JQuery). Учитывая, что ваш вопрос задает вопрос о разделе кроссфейдинга, я не рассматривал ни один из этих других аспектов страницы. Я предполагаю, что вы уже знаете, как это сделать или не заинтересованы в их тиражировании :)