Показать сообщение отдельно
  #1 (permalink)  
Старый 12.02.2020, 22:11
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Как при скроллинге активировать анимацию в пределах одного только определенного блока
Подскажите, пожалуйста, как при скроллинге активировать анимацию в тот момент, когда видимым станет блок .parallax, и в пределах одного только этого блока? Сейчас анимация происходит при скроллинге всего body. Необходимо же, чтобы анимация начиналась, когда верхняя часть блока .parallax будет по верхнему краю экрана, а заканчивалась, когда нижняя часть блока .parallax будет уже по нижнему краю экрана. Благодарю!
[JS]$(function() {
  $('.parallax').animate({
    scrollTop: $(document).height()
  }, 1000);

  $(window).scroll(function() {
    $('span').css('font-size', Math.round($(window).scrollTop() / 5) + 'px');
  });
})[/JS]
<style>.header,
.footer,
.parallax {
  height: 1000px;
}

.header,
.footer {
  background-color: pink;
}

.parallax {
  background-color: beige;
}

span {
  text-align: center;
  font-size: 0px;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  line-height: 2px;
  margin-top: -1px;
}</style>
<div class="header"></div>
<div class="parallax"><span>Parallax</span></div>
<div class="footer"></div>
Ответить с цитированием