Javascript-форум - Почему не работает jquery inview?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Почему не работает jquery inview? (https://javascript.ru/forum/dom-window/82004-pochemu-ne-rabotaet-jquery-inview.html)

Почему не работает jquery inview?

Помогите найти почему не работает, все вроде сделал как надо!

Вот сам плагин ---> https://github.com/zuk/jquery.inview/
Тут демо ---> https://codepen.io/ethereal94/pen/yLVvxmo

Сам плагин должен определить если блок полностью в поле зрения!

P.S есть другая модификация этого плагина, она работает, но не так как мне надо. Тот плагин определяет когда блок только входит в поле зрения, мне нужно что б когда блок будет полностью в поле зрения.
https://github.com/protonet/jquery.inview

Спасибо!

ethereal,
вам же показали, как сделать это без плагина https://javascript.ru/forum/dom-wind...tml#post534123

Да, но то мне не подходит! Демо которую я показал, это простой вариант, мне нужно немножко под другую задачу. Этот плагин так как он есть подходит, только он не работает!

Цитата:

Сообщение от ethereal

почему не работает,

плагин рассчитан на работу не выше jQuery 2.2

Цитата:

Сообщение от ethereal

Да, но то мне не подходит!

чем не подходит предложенный код? если он делает тоже самое что плагин?

Не работает даже с jQuery не выше 2.2

Как мне тот код внедрить в это:

$(function() {
		$('.site--video').on('inview', function(event, isInView, topOrBottomOrBoth) {
		  if (isInView) {
		    $(this).bgVideo();
		    $(this).get(0).play(); 
		  } else {
		    $(this).get(0).pause();
	            $(this).get(0).currentTime = 0;
		  }
		});
		$('.site--image---video').on('inview', function(event, isInView) {
		  if (isInView) {
		    $(this).addClass( "show" );
		  } else {
		    $(this).removeClass( "show" );
		  }
		});
	});

Цитата:

Сообщение от ethereal

Не работает даже с jQuery не выше 2.2

:-?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    body {
    width: 3000px;
    height: 3000px;
}
.element {
    width: 300px;
    height: 300px;
    float: left;
    margin: 10px;
    background: coral;
}
.visible.element {
    background: skyblue;
}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
    <script>
$(function() {
$('.element').on('inview', function (event, visible, topOrBottomOrBoth) {   console.log(visible)
    if (visible == true) {
        // element is now visible in the viewport
        if (topOrBottomOrBoth == 'top') {
            // top part of element is visible
        } else if (topOrBottomOrBoth == 'bottom') {
            // bottom part of element is visible
        } else {
            // whole part of element is visible
            $(this).addClass("visible");
        }
    } else {
        // element has gone out of viewport
        $(this).removeClass("visible");
    }
});



});
    </script>
</head>

<body>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>


</body>
</html>

Но все ровно не работает по горизонтале, а в комментарий написано // whole part of element is visible

Цитата:

Сообщение от ethereal

Как мне тот код внедрить в это:

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);
            else {
                if (isInView) {
                    div.play();
                    //$(div).bgVideo();
                } else {
                    div.pause();
                    div.currentTime = 0;
                }
            }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "100px",
        threshold: [0.1, 0.8] //настроить видимость
    });
    let container = document.querySelectorAll('.site--video, .site--image---video');
    container.forEach(div => observer.observe(div))
});

Попробую этот код уже утром. Спасибо!

Цитата:

Сообщение от рони (Сообщение 534138)

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);
            else {
                if (isInView) {
                    div.play();
                    //$(div).bgVideo();
                } else {
                    div.pause();
                    div.currentTime = 0;
                }
            }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "100px",
        threshold: [0.1, 0.8] //настроить видимость
    });
    let container = document.querySelectorAll('.site--video, .site--image---video');
    container.forEach(div => observer.observe(div))
});

Здравствуйте! Тот код который вы дали, не запускает видео на всех размерах блока. К примеру, один и тот же блок если ширину сделать 100% от контейнера, то все будет работать, видео запустится. А если ширину сделать 50% то видео уже на запускается, при это классы добавляються при любых размерах. При этом если блок с 50% сразу при загрузке в поле зрения, то видео запускается, но только первый раз, повторно не работает.

Никак не могу понять в чем дела, поменял значение на .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>

Цитата:

Сообщение от ethereal

threshold: [0.1, 0.8]

а почитать документацию? функция сработает два раза, когда блок будет виден на 10% и 80% --- 10 почти скрылся -- 80 почти открылся

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

ethereal,
Intersection_Observer_API
Настройки

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

Вот тут сам код как на сайте, может вам удастся настроить
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>