在 window 调整大小时显示不同的 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);
            }
        });
    }

Answer 2

这段代码什么时候运行？像这样将其放入 window 调整大小事件处理程序中：

$(window).resize(function() {

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

在 window 调整大小时显示不同的 JS 动画

Displaying different JS animation on window resize

javascript

jquery

gsap