0

Только начал изучать javascript/jquery. Столкнулся с проблемой. Я хочу сделать так, чтобы заголовок h1 при появлении его на экране, плавно выезжал снизу вверх, переходя из прозрачного состояния в непрозрачное.

В плане css все ясно. В исходном состоянии transform: translateY(20px); opacity: 0; А после того, как элемент попадает в область просмотра, его стили нужно изменить на нужные. Проблема в том, что я не знаю, какое событие нужно обрабатывать и как правильно это написать в jquery.

1 ответ 1

0

Для прокрутки страницы событие window.onscroll, без jquery примерно так:

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  var elms = document.querySelectorAll('h1:not(.appear)');
  for (i = 0; i < elms.length; ++i) {
    if (elms[i].offsetTop < scrolled + window.innerHeight - 100) {
      elms[i].classList.add('appear');
    }
  }
}
body {
  padding: 100vh 0;
}

h1 {
  margin: 20vh 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all .5s;
}

h1.appear {
  opacity: 1;
  transform: translateY(0);
}
<h1>StackOverflow</h1>
<h1>Blah Blah</h1>

Но для таких событий нужно добавлять дебаунсер, тк событий прилетает очень много.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.