Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.05.2019, 23:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать ссылки из файла CSS корректными для всех директрорий сайта? GrEb (X)HTML/CSS 7 28.01.2020 12:56
Как сделать перебор всех вариантов? DJFunGamer Общие вопросы Javascript 5 11.08.2014 16:24
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 02:00
Как сделать, чтоб скрипт работал во всех браузерах? Владимир Седов Элементы интерфейса 2 24.12.2010 12:19