|
Сообщение от giwuf
|
|
Почему при скролле теперь не докручивает до 2ого экрана?
|
Попробовал вот так...
video.js
var header = document.querySelector("#home header");
var videoWrapper = document.querySelector("#h-intro");
var video = document.querySelector("#h-intro-video");
function opacityHandler() {
var p = document.documentElement.scrollTop / innerHeight;
var ratio = Math.max(innerWidth / video.videoWidth, innerHeight / video.videoHeight);
video.style.opacity = Math.min(1, 4 * p);
video.style.transform = "scale(" + ratio + ")";
videoWrapper.style.top = Math.min(1 - p, 0) * innerHeight + "px";
header.style.height = 2 * innerHeight + "px";
}
addEventListener("scroll", opacityHandler);
addEventListener("resize", opacityHandler);
//video.addEventListener("play", opacityHandler);
opacityHandler();
В
style.css поменяйте...
#h-intro-video {
position: absolute;
z-index: -1;
transform-origin: 0 0; /* добавьте это объявление */
}
#home header {
/* min-height: 1176px; */ /* А это удалите */
display: flex;
align-items: center;
color: white;
position: relative;
z-index: 1;
}
