Форум

ethereal · #1 (**permalink**) 27.02.2021, 00:41

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

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

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

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

Спасибо!

рони · #2 (**permalink**) 27.02.2021, 01:06

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

ethereal · #3 (**permalink**) 27.02.2021, 01:13

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

рони · #4 (**permalink**) 27.02.2021, 01:20

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

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

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

рони · #5 (**permalink**) 27.02.2021, 01:22

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

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

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

ethereal · #6 (**permalink**) 27.02.2021, 01:25

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

ethereal · #7 (**permalink**) 27.02.2021, 01:28

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

$(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" );
		  }
		});
	});

рони · #8 (**permalink**) 27.02.2021, 01:32

Сообщение от 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>

ethereal · #9 (**permalink**) 27.02.2021, 01:38

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

рони · #10 (**permalink**) 27.02.2021, 01:49

Сообщение от 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))
});

Форум

Справочник

Discord чат

Курсы javascript