Форум

LADYX · #1 (**permalink**) 12.02.2020, 22:11

Подскажите, пожалуйста, как при скроллинге активировать анимацию в тот момент, когда видимым станет блок .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>

рони · #2 (**permalink**) 12.02.2020, 23:21

LADYX,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var parallax = document.querySelector('.parallax');

  $(window).scroll(function() {
    var {top,bottom} =  parallax.getBoundingClientRect();
    var size = 0;
    if(top < 0 && bottom > window.innerHeight) size = Math.round(-top / (parallax.scrollHeight - window.innerHeight) * 120);
    if(bottom < window.innerHeight) size = 120;
    $('span').css('font-size',  `${size}px`);
  });
})
  </script>
</head>
<body>

<div class="header"></div>
<div class="parallax"><span>Parallax</span></div>
<div class="footer"></div>
</body>
</html>

LADYX · #3 (**permalink**) 13.02.2020, 19:59

Огромнейшее спасибо!!!

LADYX · #4 (**permalink**) 14.02.2020, 13:03

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

Первый - если ставлю высоту для секций не height: 1000px, а, например, height: 100vh, то скрипт перестает работать. В самом скрипте я не могу понять, где зависимость именно от пикселей.

И второй момент тем более понять не могу. Если ставлю для секций .header и .footer z-index: 2, а для секции .parallax z-index: 1, то всё равно верхняя и нижняя секции не перекрывают секцию с параллаксом. Не могу понять почему так?

Спасибо!

рони · #5 (**permalink**) 14.02.2020, 14:40

Сообщение от LADYX

например, height: 100vh, то скрипт перестает работать.

Сообщение от LADYX

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

когда виден верх, тогдаже виден и низ, когда анимировать?

Сообщение от LADYX

Если ставлю для секций .header и .footer z-index: 2, а для секции .parallax z-index: 1,

position: fixed;

LADYX · #6 (**permalink**) 14.02.2020, 17:19

Сообщение от рони

когда виден верх, тогдаже виден и низ, когда анимировать?

Ой, прошу прощения, что-то я ступил, просто не о том я подумал)) Да, вы правы, этот вопрос снимается

Сообщение от рони

position: fixed;

Да, всё верно position: fixed;. Но если даже я ставлю для секций .header и .footer - z-index: 2 (z-index для них ставлю выше, чем для секции .parallax) и для этих же секций устанавливаю background-attachment: fixed;, то всё равно они не перекрывают секцию .parallax. Не могу понять почему. Вот как здесь быть?

рони · #7 (**permalink**) 14.02.2020, 17:32

Сообщение от LADYX

Не могу понять почему.

это к специалистам по css.

Nexus · #8 (**permalink**) 14.02.2020, 19:45

<!-- © https://javascript.ru/forum/dom-window/79465-kak-pri-skrollinge-aktivirovat-animaciyu-v-predelakh-odnogo-tolko-opredelennogo-bloka.html#post520035 -->
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>.header,
.footer,
.parallax {
  height: 1000px;
}

.header,
.footer {
  background-color: pink;
}
*!*
.footer {
    position: relative;
    z-index: 1;
}
*/!*
.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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var parallax = document.querySelector('.parallax');

  $(window).scroll(function() {
    var {top,bottom} =  parallax.getBoundingClientRect();
    var size = 0;
    if(top < 0 && bottom > window.innerHeight) size = Math.round(-top / (parallax.scrollHeight - window.innerHeight) * 120);
    if(bottom < window.innerHeight) size = 120;
    $('span').css('font-size',  `${size}px`);
  });
})
  </script>
</head>
<body>

<div class="header"></div>
<div class="parallax"><span>Parallax</span></div>
<div class="footer"></div>
</body>
</html>

LADYX · #9 (**permalink**) 14.02.2020, 21:18

рони,
Nexus,
огромное спасибо!!!

Форум

Справочник

Discord чат

Курсы javascript