Попробую этот код уже утром. Спасибо!
|
Цитата:
Никак не могу понять в чем дела, поменял значение на .1 в intersectionRatio работает по лучше, только теперь уже срабатывает когда блок только входит в поле зрения а не когда он полностью! Может вы знаете в чем проблема и как это исправить? Буду очень благодарен! P.S можете рассказать по подробнее про эти параметры, на что они влияют, может удастся настроить как надо: el.intersectionRatio > .4; threshold: [0.1, 0.8] |
Кажется нашел в чем проблема, я пробовал другой код, там была такая же проблема с запуском видео. Проблема в том что видео большое и выходит за пределами блока, хоть он и скрыт через css, но код определяет сам размер видео судя по всему.
https://i.ibb.co/6HdzY69/vid.png В вашем коде наверное такая же проблема, можете пжл переделать его, сделать наверное для класса и видео отдельный код или как то по другому на ваше усмотрения. С меня советник по JS так себе! Может можно сделать что б сработал когда сам блок будет в поле зрения, не учитывая ту часть видео которое выходит за пределами. Вот сам html блока если нужен:
<div class="site--image---video">
<img src="images/01.jpg" alt="Image 01">
<video class="site--video" controls muted loop>
<source src="images/video.mp4" type="video/mp4">
</video>
</div>
|
Цитата:
el.intersectionRatio > .4; --- любое число больше .1 и меньше .8 --- блок виден если true. нужен полноценный макет с css. попробуйте так ...
document.addEventListener('DOMContentLoaded', function() {
const lazyAnimate = divs => {
divs.forEach(el => {
let isInView = el.intersectionRatio > .4;
let div = el.target;
if (div.classList.contains('site--image---video')) div.classList.toggle('show', isInView);
let video = div.querySelector('.site--video');
if (isInView) {
video.play();
//$(video).bgVideo();??
} else {
video.pause();
video.currentTime = 0;
}
});
}
let observer = new IntersectionObserver(lazyAnimate, {
rootMargin: "0px",
threshold: [.1, .9] //настроить видимость
});
let container = document.querySelectorAll('.site--image---video');
container.forEach(div => observer.observe(div))
});
|
|
Не работает так как надо. Пытаюсь настроить, но не очень выходит. К примеру, при загрузке страницы если блок частично в поле зрения то он срабатывает.
Вот тут сам код как на сайте, может вам удастся настроить https://codepen.io/ethereal94/pen/vYyRoMv Было бы хорошо чтоб он работал так: Вход - при прокрутке по вертикали и горизонтали сработать сразу когда будет на 100% виден блок. Выход - при прокрутке по вертикали скрыть когда блок уйдет на 70%; Выход - при прокрутке по горизонтали скрыть сразу когда блок не будет виден на все 100%; Если можно так сделать |
ethereal,
лучше скопировать код и создать отдельную страницу для просмотра
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
width: 4000px;
height: 2000px;
}
.container {
position: relative;
width: 1000px;
height: auto;
border: 1px solid gray;
margin: 0 auto;
}
.container > div {
margin: 10px;
display: inline-block;
background: gray;
}
.site--image---video video::-webkit-media-controls ,.jquery-background-video-pauseplay {
display:none !important;
}
.site--image---video {
position: relative;
overflow: visible;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.site--video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
.site--image---video img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 800ms ease;
transition-delay: 0ms;
z-index: 10;
}
.show.site--image---video img {
opacity: 0;
transition: all 800ms ease;
transition-delay: 1200ms;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const lazyAnimate = divs => {
divs.forEach(el => {
let isInView = el.intersectionRatio > .8;
let div = el.target;
let site = div.querySelector('.site--image---video');
site.classList.toggle('show', isInView);
let video = div.querySelector('.site--video');
if (isInView) {
video.play();
} else {
video.pause();
video.currentTime = 0;
}
});
}
let observer = new IntersectionObserver(lazyAnimate, {
rootMargin: "0px",
threshold: [.7, .9] //настроить видимость
});
let container = document.querySelectorAll('.container > div');
container.forEach(div => observer.observe(div))
});
</script>
</head>
<body>
<div class="container">
<div style="width: 980px; height: 560px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
<div style="width: 475px; height: 360px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
<div style="width: 475px; height: 360px;">
<div class="site--image---video">
<img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
<video class="site--video" controls muted loop>
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:51. |