Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2019, 10:36
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 134

Как сделать превращение фоновой картинки в видеофон на всех устройства одинаковым?
Всем привет!
Есть блок с фоновой картинкой, которая во время скроллинга плавно замещается в видеофон и после "отпускает" пользователя читать информацию далее.

На ноутбуке все отрабатывает хорошо, но на больших экранах ПК видео не успевает подгрузиться и первый экран скрывается из видимости раньше, чем человек успевает посмотреть видео.

Как сделать так, чтобы везде отрабатывало одинаково?

UPD: Сделал наглядный пример на демо сайте

Образец: фидл

var videoWrapper = document.querySelector('#h-intro');
var video = document.querySelector('#h-intro-video');
video.play();
var scrollCounter = 0;
window.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    scrollCounter++;
  } else {
    scrollCounter--;
    scrollCounter = scrollCounter < 0 ? 0 : scrollCounter;
  }
  if (scrollCounter <= 10) {
    e.preventDefault();
    var opacity = scrollCounter / 10;
    videoWrapper.style.opacity = opacity;
  }
}, false);

<header>
  <div id="h-header">
    <section id="h-intro" style="opacity: 0;">
      <video id="h-intro-video" src="https://www.w3schools.com/html/mov_bbb.mp4" loop="loop" muted=""></video>
    </section>
  </div>
</header>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>

header {
  background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center;
  background-size: auto;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  z-index: 1;
}

#h-header {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#h-intro {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  background: #212121;
  opacity: 0;
}

#h-intro-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}

Последний раз редактировалось giwuf, 14.05.2019 в 19:10.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2019, 13:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
header {
  background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center;
  background-size: auto;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  z-index: 1;
}

#h-header {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#h-intro {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  background: #212121;
  opacity: 0;
}

#h-intro-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}
</style>
<header>
  <div id="h-header">
    <section id="h-intro" style="opacity: 0;">
      <video id="h-intro-video" src="https://www.w3schools.com/html/mov_bbb.mp4" loop="loop" muted=""></video>
    </section>
  </div>
</header>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>
<script>
var videoWrapper = document.querySelector('#h-intro');
var video = document.querySelector('#h-intro-video');
video.play();
var scrollCounter = 0;
window.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    scrollCounter++;
  } else {
    scrollCounter--;
    scrollCounter = scrollCounter < 0 ? 0 : scrollCounter;
  }
  if (scrollCounter <= 10) {
    e.preventDefault();
    var opacity = scrollCounter / 5;
    videoWrapper.style.opacity = opacity;
  }
}, false);
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2019, 19:08
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 134

Dilettante_Pro,

вы только заменили
var opacity = scrollCounter / 10;

на
var opacity = scrollCounter / 5;

К сожалению, это ничего не дает.
Я воспроизвел пример на сайте для наглядной демонстрации, чтобы мы наглядно видеть проблему (заменил 10 на 5 по вашей рекомендации)
http://a-lot-of-money.ru/templates/demo/
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2019, 19:24
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

giwuf,
Проблема в том, что я так и не понял, в чем проблема. На 5 заменил просто для большей явности процесса
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2019, 20:12
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 134

Сообщение от Dilettante_Pro Посмотреть сообщение
giwuf,
Проблема в том, что я так и не понял, в чем проблема. На 5 заменил просто для большей явности процесса
Dilettante_Pro, проблема в том, что на десктоп экранах при скроллировании не появляется видеофон (только фоновое изображение становится полупрозрачным), а пролистывается уже на сам текст, т.е. посетитель не успевает обнаружить в чем фишка.Только если проскроллить несколько раз вверх-вниз можно обнаружить видеофон.

На ноутбуке же, как и задумано, фон превращается в видео и уже затем посетитель идет ниже по тексту.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2019, 21:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,303

<style>
body {
	margin: 0;
}

header {
	height: 200vh;
	background: black;
	position: relative;
}
	
header::before, header > * {
	position: sticky;
	top: 0;
	bottom: 0;
	height: 50%;
	width: 100%;
}
	
header::before {
	content: "";
	background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center / cover;
	display: block;
}
	
header > section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	text-shadow: 0 0 2px black;
	font-family: system-ui;
	overflow: hidden;
}

header > section > video {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	object-fit: cover;
}

</style>

<header>
	<section>
		<video src="https://www.w3schools.com/html/mov_bbb.mp4" loop muted autoplay></video>
		<section>
			<h1>Hello!</h1>
		</section>
	</section>
</header>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>

<script>
	var video = document.querySelector("header > section > video");
	
	function opacityHandler(event) {
		video.style.opacity = Math.min(1, 4 * document.body.scrollTop/document.body.clientHeight);
	}
	
	addEventListener("scroll", opacityHandler);
	opacityHandler();

</script>

Последний раз редактировалось Malleys, 14.05.2019 в 21:44.
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2019, 12:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от giwuf
на десктоп экранах при скроллировании не появляется видеофон
У меня на десктопе все появляется.
Но вариант Malleys, пожалуй, эффектнее.
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2019, 12:19
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 134

Сообщение от Dilettante_Pro Посмотреть сообщение
У меня на десктопе все появляется.
Но вариант Malleys, пожалуй, эффектнее.
Dilettante_Pro, да, я с вами согласен,
Malleys - спасибо большое за помощь, но здесь есть нюанс в том, что свойства object-fit: cover; и position: sticky; не кроссбраузерные, поэтому я их использовать не могу..

Сделал с вашей помощью реализацию в таком виде
http://a-lot-of-money.ru/templates/demo/, но меня не очень утраивает, что прокрутка начинается прямо со старта, а не происходит с задержкой после появления видеофона.
e.preventDefault();
на событии scroll не работает и как я уже писал выше: хочу добиться кроссбраузерного варианта хотя бы с поддержкой ie10+

P.s. и еще момент - у меня ругается в консоли на document.body.scrollTop (не очень понимаю почему), поэтому заменил его на вариант document.documentElement.scrollTop

Последний раз редактировалось giwuf, 17.05.2019 в 12:21.
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2019, 05:53
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,303

<style>
	
body {
	margin: 0;
}

header {
	height: 200%;
	position: relative;
	overflow: hidden;
}
	
header > section:before, header > * {
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}
	
header > section:before {
	content: "";
	background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center black;
	background-size: cover;
	display: block;
	height: 100%;
	z-index: -1;
	position: absolute;
}
	
header > section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	text-shadow: 0 0 2px black;
	font-family: system-ui;
	position: fixed;
	overflow: hidden;
}

header > section > video {
	position: absolute;
	z-index: -1;
}

</style>

<header>
	<section>
		<video src="https://www.w3schools.com/html/mov_bbb.mp4" loop muted autoplay></video>
		<section>
			<h1>Hello!</h1>
		</section>
	</section>
</header>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>

<script>
	var video = document.querySelector("header > section > video");
	var section = document.querySelector("header > section");
	
	function opacityHandler() {
		var p = document.body.scrollTop / document.body.clientHeight;
		var ratio = Math.max(document.body.clientWidth / video.videoWidth, document.body.clientHeight / video.videoHeight);
		video.style.opacity = Math.min(1, 4 * p);
		video.style.transform = "scale(" + ratio + ")";
		section.style.top = Math.min(1 - p, 0) * document.body.clientHeight;
	}
	
	addEventListener("scroll", opacityHandler);
	addEventListener("resize", opacityHandler);
	video.addEventListener("play", opacityHandler);
	opacityHandler();

</script>
Ответить с цитированием
  #10 (permalink)  
Старый 20.05.2019, 20:51
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 134

Malleys, спасибо вам большое за помощь!
Пытаюсь перенести и адаптировать к себе ваше решение к себе на сайт, но никак не могу понять где у меня проблема
http://a-lot-of-money.ru/templates/demo/
Почему при скролле теперь не докручивает до 2ого экрана?
Ответить с цитированием
Ответ



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

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


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