Масштабирование и перемещение фонового изображения в библиотеке JavaScript Scroll

Question

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

Некоторые примеры того, что я имею в виду (в них также есть параллакс) - это http://www.flatvsrealism.com/ и DiscoverLab. Флэтсреализм имеет это особенно в конце, когда он превращается в реальную жизнь.

Поскольку я уверен, что это слишком сложно сделать самостоятельно, мне было интересно, есть ли какие-нибудь библиотеки JavaScript, которые могли бы работать. Я знаком со ScrollMagic, но не похоже, что его возможности расширяются до такой степени.

Answer 1

Чтобы сделать это, вы захотите, чтобы ваша прокрутка параллакса изменяла размер фонового изображения в дополнение к его положению. Чтобы сделать это, установите свойство background вашего элемента прокрутки параллакса в Javascript:

[your parallax object].style.background= "color image repeat attachment position size";

Примечание: цвет - это шестнадцатеричный код или rgba(, изображение - это URL, повторение - хотите ли вы, чтобы фон повторялся, вложение будет "прокручиваться", позиция будет позицией вашего фона. изображение, а размер будет "xpx ypx"

Этот код пойдет туда, где ваша прокрутка. Он заменит код, который устанавливает позицию вашего фонового изображения; это будет использовать составное свойство "background". Вам нужно будет установить размер в зависимости от того, как далеко ваши посетители прокручивали страницу вниз.

Точный код будет зависеть от вашей библиотеки и от того, как вы реализуете прокрутку параллакса.

Если вы ищете библиотеки параллакса, я бы порекомендовал написать собственную функцию параллакса в jQuery. Таким образом, вы сможете изменить свою функцию, чтобы изменить размер фона. Здесь представлен полный список руководств по jQuery-параллаксу.