Scale Image CSS, JS

128

13 декабря 2019, 16:00

Задача: Выполнить scale используя animate().

Это необходимо выполнить, когда изображение попадает в поле зрения.

Вопрос: Как узнать, что объект находится в поле зрения?

P.s: изображений на странице несколько и эффект применяется для каждого.

Answer 1

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

$(window).on('scroll', function() { 
  $(".container").each(function() { 
    if (isScrolledIntoView($(this))) { 
      $(this).find(".element").addClass("active"); 
    } 
  }); 
}); 
 
function isScrolledIntoView(elem) { 
  var docViewTop = $(window).scrollTop(); 
  var docViewBottom = docViewTop + $(window).height(); 
 
  var elemTop = $(elem).offset().top; 
  var elemBottom = elemTop + $(elem).height(); 
 
  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

.space { 
  height: 110vh; 
} 
 
.container { 
  margin: 20px; 
} 
 
.element { 
  width: 200px; 
  height: 200px; 
  background: #eee; 
  display: inline-block; 
  margin-right: 20px; 
  transition: transform 1s ease; 
} 
 
.element.active { 
  transform: scale(1.1); 
  background: #333; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="space"></div> 
<div class="container"> 
  <span class="element"></span> 
  <span class="element"></span> 
</div> 
<div class="container"> 
  <span class="element"></span> 
</div>