Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2021, 03:04
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

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

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

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

Помогите сделать как надо, спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2021, 07:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

читать про Intersection_Observer_API
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2021, 18:10
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Не понимаю я как с помощью этого сделать что нужно
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2021, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

добавление класса в зоне видимости 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переделать jQuery в JS Леонид777 Общие вопросы Javascript 0 23.11.2017 19:12
Возможно ли переделать как то скрипт? jenya82 Мобильный JavaScript 0 20.09.2015 21:37
Помогите переделать скрипт F_1N Общие вопросы Javascript 1 01.12.2011 19:23
Скрипт на jQuery NeoMurderer jQuery 7 09.03.2011 18:16
Не могу подогнать старый jQuery скрипт до версии 1.42 artnik jQuery 1 19.01.2011 18:02