I currently am integrating smoothState.js to create seamless page transitions, however it completely breaks the cover video background automatic scaling.
Can someone help me find where the two are clashing?
I am using this HTML5 video background method.
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);
I used that exact same css and it didn't work for me, either. I decided to go the 'absolute' css positioning route, and it works fine for me now.
Hope that helps! (not tested in IE, yet)