Отображение различной JS-анимации при изменении размера окна

Question

До минимальной высоты 1200 пикселей У меня есть видео HTML5, воспроизведение или остановка в зависимости от того, где вы находитесь на странице.

Тогда под 1200px вы предположить, чтобы последовательность изображений, определяется как это в HTML:

<div class="col-lg-6 col-md-12 col-xs-12 right"> 
     <video webkit-playsinline loop id="rightVideo" poster="{% static 'home_page/assets/videos/transparent.png' %}"> 
      <source src="{% static 'home_page/assets/videos/720x700.mp4' %}" type="video/mp4"> 
      <source src="{% static 'home_page/assets/videos/720x700.ogg' %}" type="video/ogg"> 
      <source src="{% static 'home_page/assets/videos/720x700.webm' %}" type="video/webm"> 
      Your browser does not support HTML5 video. 
     </video> 
     <img alt="blippar blipp images sequence" id="images-sequence" src=""> 
</div> 

Таким образом, изображения являются нагрузки в JS и отображения с GSAP так:

this.imagesSequence = function(){ 
    var imageSeq = new TimelineMax({repeat: -1}); 
     imageSeq 
      .to(obj, 25, { 
       curImg: imagesSequenceNb.length - 1, 
       roundProps: "curImg", 
       immediateRender: true, 
       ease: Linear.easeNone, 
       onUpdate: function() { 
        //next image on update 
        sequence.src = imagesSequenceNb[obj.curImg];      
       } 
      }, 2); 
}; 

Наконец, мне удалось различный размер экрана:

if (window.innerWidth > 1200) { 
    var imgPath = "{% static 'home_page/assets/' %}", 
     myanimations = new homeAnimations(imgPath); 

    myanimations.loadImages(); 
    {..code...} 
} else if (window.innerWidth > 990 && window.innerWidth <= 1200) { 
    var rightVideo = document.getElementById("rightVideo"); 

    rightVideo.play(); 
} else { 
    var $nav_header = $(".navbar-fixed-top"), 
     header_height = $('.navbar-fixed-top').height(), 
     images_height = $('.header-plugin').height(), 
     offset_val = images_height - header_height; 
    var circleMobile = document.getElementById("circle-mobile"); 
    var birdVideo = document.getElementById("birdVideo"); 

    var imgPath = "{% static 'home_page/assets/' %}", 
     myanimationsMobile = new homeAnimations(imgPath); 

    myanimationsMobile.loadImages(); 
    myanimationsMobile.imagesSequence(); //I want to display this on resize !! 

    birdVideo.play(); 

    TweenLite.to(circleMobile, 1, {rotation: 180}); 
} 

Итак, если экран изменения размера d тогда страница освежает, без проблем. Но переход не является динамическим, если вы вручную изменяете страницу.

Любая идея?

Answer 1

Я думаю, вам нужно иметь динамический контроль:

window.onresize = function() {   
    if (window.innerWidth > 1200) { 
     do somthing 
    } 
}; 

Это будет динамически Lisen для изменения. Надеюсь, это поможет.

Если ваш сайт является hevy, сделайте так, чтобы этот таймер подождал befor onresiz.

function waitForWindowResize() { 
     var rtime; 
     var timeout = false; 
     var delta = 200; 

     function resizeend() { 
      if (new Date().getTime() - rtime < delta) { 
       setTimeout(resizeend, delta); 
      } else { 
       timeout = false; 

       YOUR CODE HERE 

      } 
     } 

     $(window).resize(function() { 
      rtime = new Date(); 
      if (timeout === false) { 
       timeout = true; 
       setTimeout(resizeend, delta); 
      } 
     }); 
    } 

Answer 2

Когда этот код запустится? Положите его в обработчик окне изменения размера событий, как это:

$(window).resize(function() { 

    if (window.innerWidth > 1200) { 
    ... 
});