javascript - 在窗口大小调整时显示不同的JS动画

Question

在最小高度 1200px 之前，我有一个 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});
}

因此，如果调整屏幕大小然后刷新页面，没有问题。但是，当您手动调整页面大小时，过渡不是动态的。

有什么想法吗？

Answer 1

我认为你需要动态控制:

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

这将动态地倾听变化。 希望对您有所帮助。

如果您的网站很繁忙，请在 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);
            }
        });
    }