RequestAnimationFrame недоступен в Safari — как делать плавную анимацию?

Этот сайт без проблем работает в любом браузере, кроме Safari, поскольку в нем нет "RequestAnimationFrame". Обратите внимание, что элементы позиционируются с помощью JavaScript, и без него, вероятно, не обойтись. В Safari я должен использовать window.onscroll для обновления позиций моего элемента, что не дает плавных результатов.

Как я могу это решить?


javascript html jquery safari parallax
person MaiaVictor    schedule 08.06.2013    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Safari 6 имеет префиксную поддержку rAF.

Для кроссбраузерной совместимости для этого существует полифилл, использующий таймеры. Просто вставьте этот код перед использованием rAF.

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function () {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if(!window.requestAnimationFrame)
    window.requestAnimationFrame = function (callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function () {
        callback(currTime + timeToCall);
      },
      timeToCall);
      lastTime = currTime + timeToCall;
      return id;
  };
  if(!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
  };
}());
person Joseph    schedule 08.06.2013