14.05.2019, 09:36
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
|
Как сделать превращение фоновой картинки в видеофон на всех устройства одинаковым?
Всем привет!
Есть блок с фоновой картинкой, которая во время скроллинга плавно замещается в видеофон и после "отпускает" пользователя читать информацию далее.
На ноутбуке все отрабатывает хорошо, но на больших экранах ПК видео не успевает подгрузиться и первый экран скрывается из видимости раньше, чем человек успевает посмотреть видео.
Как сделать так, чтобы везде отрабатывало одинаково?
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 в 18:10.
|
|
14.05.2019, 12:49
|
|
Профессор
|
|
Регистрация: 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>
|
|
14.05.2019, 18:08
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
Dilettante_Pro,
вы только заменили
var opacity = scrollCounter / 10;
на
var opacity = scrollCounter / 5;
К сожалению, это ничего не дает.
Я воспроизвел пример на сайте для наглядной демонстрации, чтобы мы наглядно видеть проблему (заменил 10 на 5 по вашей рекомендации)
http://a-lot-of-money.ru/templates/demo/
|
|
14.05.2019, 18:24
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
giwuf,
Проблема в том, что я так и не понял, в чем проблема. На 5 заменил просто для большей явности процесса
|
|
14.05.2019, 19:12
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
Сообщение от Dilettante_Pro
|
giwuf,
Проблема в том, что я так и не понял, в чем проблема. На 5 заменил просто для большей явности процесса
|
Dilettante_Pro, проблема в том, что на десктоп экранах при скроллировании не появляется видеофон (только фоновое изображение становится полупрозрачным), а пролистывается уже на сам текст, т.е. посетитель не успевает обнаружить в чем фишка.Только если проскроллить несколько раз вверх-вниз можно обнаружить видеофон.
На ноутбуке же, как и задумано, фон превращается в видео и уже затем посетитель идет ниже по тексту. |
|
14.05.2019, 20:32
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
<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 в 20:44.
|
|
15.05.2019, 11:11
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от giwuf
|
|
на десктоп экранах при скроллировании не появляется видеофон
|
У меня на десктопе все появляется.
Но вариант Malleys, пожалуй, эффектнее. |
|
17.05.2019, 11:19
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
|
Сообщение от 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 в 11:21.
|
|
18.05.2019, 04:53
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
<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>
|
|
20.05.2019, 19:51
|
|
Профессор
|
|
Регистрация: 16.05.2017
Сообщений: 167
|
|
Malleys, спасибо вам большое за помощь!
Пытаюсь перенести и адаптировать к себе ваше решение к себе на сайт, но никак не могу понять где у меня проблема
http://a-lot-of-money.ru/templates/demo/
Почему при скролле теперь не докручивает до 2ого экрана?
|
|
|
|
