0

Происходит встряска контента из-за функции скролла, в чем может быть дело? Кто не против, может протестировать сам скролл.

$(window).scroll(function (event) {

   var st = $(this).scrollTop();
   // вниз

   if (st > scrollPos && window_width >= 1024) {

       // если мы в первой секции
       if (st < main_height && !flag) {
           // движемся ко второй секции
           flag = 1;

           $page.animate({
               scrollTop: ($('section.about').offset().top) + 10
           }, 3000, function () {
               if (window_width >= 1200) {
                   $('section.about .video').css({
                       'width': '893px'
                       , 'height': '506px'
                   }).addClass('opened');
                   //player.play();
                   // запускаем видео, как доскролили    
               }
               flag = 0;
               console.log('.');
           });

           // анимация гор, облаков и т д
           $('.clouds-front').css('top', '-295px');
           $('.clouds-back').css('top', '-273px');
           $('.clouds-front2').css('top', '95px');
           $('.clouds-back2').css('top', '73px');
           $('.mountain').css('top', '400px');
           $('.logo').css('top', '500px');
       }
       // вверх 
       // если мы во второй секции, движемся к началу страницы
   }
   else if ((st <= main_height) && !flag && window_width >= 1024) {
       flag = 1;
       $page.animate({
           scrollTop: 0
       }, duration, function () {
           flag = 0;
       });
       // анимация гор, облаков и тд
       $('.clouds-front').css('top', '195px');
       $('.clouds-back').css('top', '273px');
       $('.clouds-front2').css('top', '295px');
       $('.clouds-back2').css('top', '373px');
       $('.mountain').css('top', '324px');
       $('.logo').css('top', '135px');
   }
   scrollPos = st;
});
2
  • Выводите в консоль все переменные, смотрите что происходит. Попробуйте останавливать анимацию перед стартом - $page.stop(true, true).animate(...). И вынесите в самое начало if (!flag && window_width >= 1024) return; - неудобно читать и лишние действия. 4 мая 2018 в 4:24
  • Присвой всем элементам *{transition:all ease .5s;} - допустим, если исчезнет проблема, значит дело в том, что не всем элементам задана анимация. И второй вариант. В условиях if (window_width >= 1200) { пропущены промежуточные варианты
    – Air
    4 мая 2018 в 5:36

1 ответ 1

0

Дело в анимации перехода-движения ко второй секции. Когда анимация прокрутки запущена события скролла окна заставляют трястись так контент. Необходимо запретить скролл во время этой анимации-перехода. Т.е. как только запустили анимацию скролл окна пользователем должен быть недоступен пока анимация перехода не завершится.

Как временно отключить скролл вы можете узнать в ответе на вопрос https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.