Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Переделать скрипт jQuery inView (https://javascript.ru/forum/dom-window/81993-peredelat-skript-jquery-inview.html)

ethereal 26.02.2021 03:04

Переделать скрипт jQuery inView
 
Здравствуйте! Есть такой скрипт ---> https://www.jqueryscript.net/other/c...t-in-view.html

Он помогает определить если блок полностью в поле зрения.
Все работает, но он определяет только прокрутку по вертикале, мне нужно чтоб и по горизонтале (по всем сторонам одновременно)!

Вот тут демо:
https://codepen.io/ethereal94/pen/yLVvNQQ

Помогите сделать как надо, спасибо!

рони 26.02.2021 07:35

ethereal,
https://javascript.ru/forum/dom-wind...tml#post533705

читать про Intersection_Observer_API

ethereal 26.02.2021 18:10

Не понимаю я как с помощью этого сделать что нужно

рони 26.02.2021 20:45

добавление класса в зоне видимости IntersectionObserver
 
ethereal,

<!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;
    transition: 1s;
}
.visible.element {
    background: skyblue;
}
    </style>
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const lazyAnimate = divs =>
    divs.forEach(el => el.target.classList.toggle('visible', el.intersectionRatio > 0.4));
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "10px",
        threshold: [.3, 1.0]
    });
    let container = document.querySelectorAll('.element');
    container.forEach(div => observer.observe(div))
});
    </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>


Часовой пояс GMT +3, время: 18:36.