У нас есть параллакс-прокрутка на нашем сайте.
Это достаточно просто, по 4 слоя на каждой стороне, которые прокручиваются в разных темпах в соответствии с линейной функцией.
Однако, это не так гладко, как я хочуособенно если у меня открыто несколько вкладок.
Вы заметили небольшую задержку между прокруткой и обновлением изображений параллакса, а также уменьшенную частоту кадров.
Частота кадров намного лучше на небольшомэкран (я работаю на 27 "экране), но я хотел бы добиться максимальной производительности на всех экранах.
Вот код для настройки прокрутки:
win = $(window)
footerHeight = $('footer').height()
win.scroll ->
scroll = win.scrollTop()
baseTop = 183 - scroll - 6*scroll/footerHeight
for layer in [0..7]
el = parallaxLayers[layer].element
top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight)
left = parallaxLayers[layer].left
el.style.backgroundPosition = "#{left}px #{top}px"
Это CoffeeScript, но я надеюсь, что он достаточно прост для понимания большинством JS-разработчиков.
То, что я уже делаю:
- Предварительная выборка всех элементов, чтобы к ним можно было мгновенно получить доступ в функции.
- Предварительная выборка
background-position-x, чтобы ее не нужно было извлекать при каждой итерации. - Не используйте jQuery для установки стиля из-за увеличения служебных данных.
- Calculaвсе как можно меньше раз (следовательно,
baseTop)
Каждый слой расположен статически, чтобы он не дрожал, и я обязательно изменю положение фона, чтобы не вызыватьперекомпоновка страницы.
Могу ли я попробовать еще что-нибудь?
Поскольку производительность зависит от размера экрана, я считаю, что это проблема рендеринга больше, чем проблема JS.Может быть, какой-нибудь причудливый CSS3 может помочь?