javascript - 尝试平滑滚动动画并理解为什么我的文字会瞬间消失

Question

我正在开发一个网站来学习更多关于 javascript、css 和 html 的知识。该网站的草稿在这里:http://test13111983.free.fr/

我在滚动时遇到了一些问题:上下滚动会触发水平滚动。

当我在笔记本电脑上使用触控板上下滚动时，动画在 Chrome 上非常流畅，但在 Firefox 上却很糟糕。

除了在 Chrome 上，当我向上滚动时，页面的左侧部分往往会瞬间消失。

这是我用于滚动的 js 代码:

var scroll = 0;
var target_page = "";
var round = 0;
var speed=50;
var timeout = null;
var diff = 0;

$('.accueil').on('mousewheel DOMMouseScroll', function(e){
if(typeof e.originalEvent.detail == 'number' && e.originalEvent.detail !== 0) {
  if(e.originalEvent.detail > 0) {
    scroll++;
  } else if(e.originalEvent.detail < 0){
      scroll--;
  }
} else if (typeof e.originalEvent.wheelDelta == 'number') {
  if(e.originalEvent.wheelDelta < 0) {
      scroll++;
  } else if(e.originalEvent.wheelDelta > 0) {
      scroll--;
  }
}

if(scroll>0){
  round = Math.trunc(scroll/speed);
  target_page = '.page:eq('+(numItems-round-2)+')';
  $('.accueil').css("width", (0.32+0.2*(numItems))*$(window).innerWidth()+0.3*$(window).innerWidth()*scroll/speed);
  $('.accueil').css("left", -0.5*$(window).innerWidth()*scroll/speed);
  $(target_page).css("width", 0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
  $(target_page+' .photo').css("height", -0.01*$(window).innerHeight()+0.2*$(window).innerHeight()*(1+1.5*(scroll/speed-round)));
  $(target_page+' .photo').css("width", -0.01*$(window).innerWidth()+0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
  if(scroll/speed- round > 0.5){$(target_page+' .numero').css("color", "#000");}else{$(target_page+' .numero').css("color", "#eaeaea");}
  $(target_page+' .titre, '+target_page+' .date, '+target_page+' .categorie, '+target_page+' .sous_titre, '+target_page+' .numero').css("margin-left", 0.2*$(window).innerWidth()*(0.05+1.5*(scroll/speed-round)));

  clearTimeout(timeout);

    timeout = setTimeout(function() {
        if(scroll/speed- round <= 0.5){scroll=round*speed;$(target_page+' .numero').css("color", "#eaeaea");}
        else{scroll=(round+1)*speed;$(target_page+' .numero').css("color", "#000");};
        $('.accueil').css("width", (0.32+0.2*(numItems))*$(window).innerWidth()+0.3*$(window).innerWidth()*scroll/speed);
        $('.accueil').css("left", -0.5*$(window).innerWidth()*scroll/speed);
        $(target_page).css("width", 0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .photo').css("height", -0.01*$(window).innerHeight()+0.2*$(window).innerHeight()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .photo').css("width", -0.01*$(window).innerWidth()+0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .titre, '+target_page+' .date, '+target_page+' .categorie, '+target_page+' .sous_titre, '+target_page+' .numero').css("margin-left", 0.2*$(window).innerWidth()*(0.025+1.5*(scroll/speed-round)));

    }, 1000);
}
  else{scroll=0;}

    });

代码在滚动上所做的是 1) 加宽一个 div 2) 和页面 3) 并水平移动它

我想要一个跨浏览器的平滑高效的过渡。有什么建议吗？

在此先感谢您。

Answer 1

我自己找到了(痛苦的)解决方案。

1) 首先，我必须更改 css 布局的完成方式。每个应该移动的元素都是带有以下代码的代码:

position:absolute;
top:0;
left:0;

2) 然后大部分动画都是使用 transform : matrix 属性制作的。我尽可能地减少了其他参数动画(如边距、填充等)。最后我只是使用变换:矩阵，动画的一点宽度和不透明度。

好多了。此外，它适用于 Firefox。我不得不重新考虑整个布局，但这是值得的。