时间戳

首页 > 解决方案 > 试图平滑滚动动画并理解为什么我的文字会瞬间消失

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

问题描述

我正在开发一个网站来了解更多关于 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) 并水平移动它

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

提前谢谢你。

标签： javascriptjqueryhtmlcsscss-animations

解决方案

我自己找到了（痛苦的）解决方案。

1) 首先，我必须改变 CSS 布局的方式。假设要移动的每个元素都是带有以下代码的代码：

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

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

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

推荐阅读