Question

我目前正在集成smoothState.js以创建无缝页面转换，但它完全打破了封面视频背景自动缩放。

有人可以帮我找到两者发生冲突的地方吗？

HTML：

<body id="main" class="m-scene">
<div class="scene_element scene_element--fadeinright">
    <video autoplay poster="video.jpg" id="bgvid" loop >
        <source src="img/video.webm" type="video/webm">
        <source src="img/video.mp4" type="video/mp4">
    </video>
    <div id="content">
        <h1>Title</h1>
    </div>
</div>

CSS：

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('/img/video.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
.m-scene .scene_element {
  animation-duration: .25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}
.m-scene .scene_element--fadeinright {
  animation-name: fadeInRight;
}
@keyframes fadeInRight {
   0% {
     opacity: 0;
     transform: translate3d(100%, 0, 0);
   }
   100% {
     opacity: 1;
     transform: none;
   }
}

JS：

    (function($) {
      'use strict';
      var $body = $('html, body'),
          content = $('#main').smoothState({
            // Runs when a link has been activated
            onStart: {
              duration: 250, // Duration of our animation
              render: function (url, $container) {
                // toggleAnimationClass() is a public method
                // for restarting css animations with a class
                content.toggleAnimationClass('is-exiting');
                // Scroll user to the top
                $body.animate({
                  scrollTop: 0
                });
              }
            }
          }).data('smoothState');
          //.data('smoothState') makes public methods available
    })(jQuery);

Answer 1

我使用了完全相同的CSS，但它也不适用于我。我决定采用'绝对'的css定位路线，现在它对我来说很好。

video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    background: url(../img/static_picture_background.jpg) no-repeat;
    background-size: cover;
}

希望有所帮助！（尚未在IE中测试）

HTML5视频封面背景打破了smoothState.js

1 个答案: