修改

Question

我正在尝试做一些基本的视差动画，但是一旦我在IE或任何OSX浏览器中测试，这个动作就会非常紧张 - 不知道为什么！

$(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转换

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

您可以做的另一件事是查看skrollr以及该项目的工作原理。它以平滑滚动为基础进行基于数学的缓动。

修改

在您发布的页面上，尝试更改以下功能：

$(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的{{1}}部分。使用不同的值来进行更多/更少的渐变。

滚动在IE，Safari，OSX中是紧张不安的

1 个答案:

修改