Как сделать паралакс эффект с минимальной нагрузкой на ЦП и трафик?

Question

[Игорь]

Желательно конечно при прокрутке чтобы каждый лепесток имел свою скорость движения ,но можно ограничится простой прокруткой background`a.
Ташить 3 библиотеки и грузить ими мобилки не охота.

На коленке как сделать такой эффект?

Comments

[Игорь]

hscode ваше вью?

Answer 1

[Роман Дворянов]

$(window).bind('scroll',function(e){
      parallaxScroll(); // при скролле вызываем нашу функцию
  });
       
  function parallaxScroll(){
      var scrolled = $(window).scrollTop(), // определяем текущее положение скролла
          backgroundPositionByX = "0", // позиция фона по горизонтали (не двигаем)
          backgroundPositionByY = (1250 - (scrolled * .4))+'px', // позиция фона по вертикали (тут можно пошаманить с формулой  - стартовое положение фона минус текущее положение скролла, умноженное на 0.4) 0.4 - влияет на скорость поднятия вверх или вниз
          backgroundPosition = backgroundPositionByX +" "+ backgroundPositionByY; // для фаерфокса нужно указывать оба значения, он не понимает свойство background-position-y, но хавает background-position
      
      $('блок_с_фоном').css('background-position', backgroundPosition);
   }

Comments

[Игорь]

Этот код можно запускать в продакшен или что то нужно ещё добавить?

[Роман Дворянов]

Игорь Николаевич: ну класс или айди свой в предпоследнюю строчку. Обратите внимание на комментарии, скорее всего нужно будет шаманииь со скоростью и положением картинки

[Игорь]

Роман Д.: шикарный код,спасибо)