Пытаясь сгладить анимацию прокрутки и понять, почему мой текст мгновенно исчезает - PullRequest
Новая
       22

Пытаясь сгладить анимацию прокрутки и понять, почему мой текст мгновенно исчезает

2 голосов
/ 06 июля 2019

Я разрабатываю веб-сайт, чтобы узнать немного больше о 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) и перемещает его горизонтально

Я бы хотел кросс-браузерный плавный и эффективный переход.Любой совет?

Заранее благодарю.

1 Ответ

0 голосов
/ 07 июля 2019

Я сам нашел (болезненное) решение.

1) Сначала мне пришлось изменить способ создания макета CSS.Каждый элемент, который должен был быть перемещен, был кодом с: 

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

2) Затем большая часть анимации была сделана с использованием свойства transform: matrix.Я уменьшил как можно больше других параметров анимации (таких как margin, padding и т. Д.).Наконец, я просто использую transform: matrix, немного ширины и непрозрачности для анимации.

Это намного лучше.Кроме того, это хорошо работает для Firefox.Мне пришлось переосмыслить весь макет, но оно того стоило.

...