Question

直到min-height 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).resize(function() {

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

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

2 个答案: