Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2019, 22:00
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 112

Как обратиться к блоку, который в поле видимости?
Здравствуйте. Хочу реализовать появление блоков при прокрутке через GSAP. Подскажите, как можно обратиться к блокам, которые находится в поле видимости?

https://jsfiddle.net/drkrol/yvduhk28/5/
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2019, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,570

drkrol,
https://javascript.ru/forum/dom-wind...tml#post513849

https://developer.mozilla.org/en-US/...ectionObserver

https://habr.com/ru/company/ruvds/blog/453586/
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2019, 22:29
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 112

дык при чём тут ленивая загрузка? Я хочу из opacity 0 делать opacity 1
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2019, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,570

блок в зоне видимости
Сообщение от drkrol
дык при чём тут ленивая загрузка? Я хочу из opacity 0 делать opacity 1

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.box	{
	width: 150px;
	height: 150px;
	margin: 50px;
	background: white;
	float:left;
    opacity: 0;
    transition: 1s;
}
.box.alt{
    background-color: #228B22;
    opacity: 1;
}

</style>


  <script>
document.addEventListener('DOMContentLoaded', ready);
function ready()
{
   const options = {
        rootMargin: '1px',
        threshold: 1.0,
      };
   const observer = new IntersectionObserver(lazyLoad, options);
   const boxs = document.querySelectorAll('.box');
      boxs.forEach(pic => {
        observer.observe(pic);
      });
   function lazyLoad(elements) {
        elements.forEach(item => {
          if (item.intersectionRatio > 0) {
            observer.unobserve(item.target);
            targetInSight(item.target);
          }
        });
      }
   function targetInSight(target)
   {
       target.classList.add('alt')
   }

}

  </script>
</head>

<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

Последний раз редактировалось рони, 18.10.2019 в 22:37.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть кнопку, если поле div, который она выводит пустой SuperTester Общие вопросы Javascript 5 18.03.2015 22:44
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 13:07
Как заполнить поле с помощью url-js? Дмитрий293293893 Opera, Safari и др. 1 18.01.2015 20:38
Как отследить пропал ли текст placeholder-а при фокусе на поле ввода z1987 Общие вопросы Javascript 2 19.12.2012 09:10
Поле загрузки файла. как опусташить? clgs Элементы интерфейса 1 26.06.2009 13:46