Параллакс и Safari

on

Люблю параллакс-эффект на больших фоновых картинках. Но в Safari на OS X картинка “дергается” (“jitter”) – гугл выдает нам много постов на github и stackowerflow, с аналогичной проблемой. Вот это самое подергивание изображения неистово бесило слегка раздражало меня, но без параллакса оставаться не хотелось.

Ранее я использовал js-плагин Simple Parallax, поэтому предполагал, что это мои кривые руки, либо же просто проблема несовместимости данного плагина и Safari. Решив найти ему замену, я выбрал более популярный Stellar.js, который работает даже на iOS (чего предыдущий плагин делать не мог), но он оказался всего лишь чуточку лучше, чем Simple Parallax.
В итоге, совершенно случайно наткнулся на простейшее решение – с помощью JS изменять положение картинки во время прокрутки.

(function(){

  $(window).scroll(function () {
			// значение, на которое сместилась страница при прокрутке
  		var top = $(document).scrollTop();

    $('.site-header').css({
      //скорость регулируется изменением делителя в выражении top/3
      'background-position': '0px -'+(top/3).toFixed(2)+'px'
    });
  });

})();

UPD: во всех браузерах, кроме Google Chrome данный скрипт работает идеально. В Хроме же страничка дергается, анимация не плавная. Возможно, стоит использовать для Safari простой JS-код, а для остальных браузеров (ну, или только для Chrome) – Simple Parallax.

Поделиться:

Добавить комментарий