[CSS/JS] Fluidité d'une animation et disparition momentanée de texte

Bonjour à tous,

Je m'entraîne à programmer un site avec du html/css/js/jquery. Le site en question est ici : http://test13111983.free.fr/

C'est un brouillon pour le moment. Mon problème actuellement est le défilement à l'aide de la molette de la souris. En utilisant celle-ci la page est censée translatée horizontalement et développer certaines colonnes. Pour info, j'utilise le trackpad de mon ordinateur portable.

1er problème : l'animation est assez fluide sous chrome mais c'est un vrai foutoir sur firefox. Ca saccade, ca déforme la page...mais je ne sais pas pourquoi.

2e problème : quand je reviens en arrière avec la molette, la partie la plus à gauche peut disparaître momentanément. Pourquoi.

Je ne sais pas quelle partie de mon code est la plus pertinente, mais voilà celle concernant la gestion de l'animation via jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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;}
 
    });

En vous remerciant d'avance pour votre aide.