0

Функция отлично работает в Мозиле и даже IE, но в Хроме лаги. Дергается картинка.

var ypos, image;

function parallex() {
    image = document.getElementById('parallaxHead');
    ypos = window.pageYOffset;
    console.log(ypos);
    image.style.top = ypos * .2 + 'px';
}
window.addEventListener('scroll', parallex), false;

Помогите поправить пожалуйста.

Что смог - закинул https://jsbin.com/tuvuxomado/edit?html,css,js,output
Немного переделал https://jsbin.com/yadijijotu/1/edit?html,css,output

4
  • Проверил в хроме версии 45.0.2454.99 m (64-bit). Все ок. Почистите кэш. 28 сен 2015 в 9:38
  • @Bezarius shopp.art-kos.com Эта фишка используется тут. Очистка кеша не поможет)) 28 сен 2015 в 9:42
  • Cherevatov вот по ссылке дергается. 28 сен 2015 в 9:44
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 28 сен 2015 в 15:22

1 ответ 1

1

Вам нужно разделить вычисления и отрисовку на 2 части. Причем отрисовку желательно вынести в RequestAnimationFrame, это существенно все ускорит и упростит.

Для работы с RequestAnimationFrame воспользуйтесь этим полифилом.

Вот пример итогового кода: http://jsfiddle.net/30sa9ysg/

var image = document.getElementById('parallaxHead'),
  ypos, y;

function parallex() {
  ypos = window.pageYOffset;
  y = ypos * 1.2;
}
window.addEventListener('scroll', parallex), false;

function draw() {
  image.style.top = y + 'px';
}

function animate() {
  requestAnimationFrame(animate);
  draw();
}

animate();

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  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);
    };
}());
.test {
  width: 200px;
  height: 2000px;
}
#parallaxHead {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: #000;
}
<div class="test"></div>
<div id="parallaxHead"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.