Прокрутка в IE, Safari, OSX

Question

Я пытаюсь сделать некоторую базовую анимацию параллакса, но движение очень нервное, как только я тестирую в IE или любом браузере OSX - не знаю почему!

http://willmurdoch.com/scrolltest/

$(window).scroll(function(){ 
    $('.hero').each(function(){ 
    if($(this).offset().top - $(window).scrollTop() > -$(window).height() && $(this).offset().top - $(window).scrollTop() < $(window).height()){ 
     var myTranslate = Math.ceil($(window).scrollTop() - $(this).offset().top); 
     $(this).find('.heroSlides').css('-webkit-transform', 'translateY('+myTranslate/2+'px)'); 
     $(this).find('.scrollWrap').css('-webkit-transform', 'translateY('+myTranslate/5+'px)'); 
    } 
    }); 
}); 

Я попытался блокировки функции прокрутки только стрелять каждые 100 мс и переход между ними, добавляя аппаратное ускорение для каждого анимационного элемента, но ничего, кажется, сделать это! Любая помощь будет оценена!

Answer 1

Одна из вещей, которые я нашел, что добавляет плавности мои CSS преобразования, чтобы добавить CSS Transformations

https://www.w3schools.com/css/css3_transitions.asp

Другая вещь, которую вы можете сделать, это посмотреть на skrollr и как это проектные работы , Это облегчает математику для ее плавной прокрутки.

EDIT

На странице вы в курсе, попробуйте изменить следующие функции:

$(window).scroll(function(){ 
    scrollLogic(); 
    console.log($(window).scrollTop()); 
    closeNav(); 
}); 

изменение:

$(window).scroll(function(){ 
    //scrollLogic(); 
    console.log($(window).scrollTop()); 
    closeNav(); 
}); 

var scrollInterval = setInterval(function() { 
    scrollLogic(); 
}, 1000/30); 

Затем измените myTranslate часть scrollLogic. Играйте с разными значениями, чтобы сделать изменение более/менее постепенным.