Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать превращение фоновой картинки в видеофон на всех устройства одинаковым? (https://javascript.ru/forum/misc/77503-kak-sdelat-prevrashhenie-fonovojj-kartinki-v-videofon-na-vsekh-ustrojjstva-odinakovym.html)

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

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

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

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;
}

Dilettante_Pro 14.05.2019 12:49 
<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>

giwuf 14.05.2019 18:08
Dilettante_Pro,

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

на 
var opacity = scrollCounter / 5;

К сожалению, это ничего не дает.
Я воспроизвел пример на сайте для наглядной демонстрации, чтобы мы наглядно видеть проблему (заменил 10 на 5 по вашей рекомендации)
http://a-lot-of-money.ru/templates/demo/

Dilettante_Pro 14.05.2019 18:24
giwuf,
Проблема в том, что я так и не понял, в чем проблема. На 5 заменил просто для большей явности процесса

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

На ноутбуке же, как и задумано, фон превращается в видео и уже затем посетитель идет ниже по тексту.

Malleys 14.05.2019 20:32 
<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>

Dilettante_Pro 15.05.2019 11:11
Цитата:
Сообщение от giwuf
на десктоп экранах при скроллировании не появляется видеофон
У меня на десктопе все появляется.
Но вариант Malleys, пожалуй, эффектнее.

giwuf 17.05.2019 11:19
Цитата:
Сообщение от Dilettante_Pro (Сообщение 507780)
У меня на десктопе все появляется.
Но вариант 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

Malleys 18.05.2019 04:53 
<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>

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


Часовой пояс GMT +3, время: 10:30.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице