Javascript.RU

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

Как при скроллинге активировать анимацию в пределах одного только определенного блока
Подскажите, пожалуйста, как при скроллинге активировать анимацию в тот момент, когда видимым станет блок .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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,837

parallax на видимом блоке
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>
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2020, 19:59
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 189

Огромнейшее спасибо!!!
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2020, 13:03
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 189

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

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

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

Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2020, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,837

Сообщение от LADYX
например, height: 100vh, то скрипт перестает работать.
Сообщение от LADYX
. Необходимо же, чтобы анимация начиналась, когда верхняя часть блока .parallax будет по верхнему краю экрана, а заканчивалась, когда нижняя часть блока .parallax будет уже по нижнему краю экрана.
когда виден верх, тогдаже виден и низ, когда анимировать?

Сообщение от LADYX
Если ставлю для секций .header и .footer z-index: 2, а для секции .parallax z-index: 1,
position: fixed;
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2020, 17:19
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 189

Сообщение от рони
когда виден верх, тогдаже виден и низ, когда анимировать?
Ой, прошу прощения, что-то я ступил, просто не о том я подумал)) Да, вы правы, этот вопрос снимается
Сообщение от рони
position: fixed;
Да, всё верно position: fixed;. Но если даже я ставлю для секций .header и .footer - z-index: 2 (z-index для них ставлю выше, чем для секции .parallax) и для этих же секций устанавливаю background-attachment: fixed;, то всё равно они не перекрывают секцию .parallax. Не могу понять почему. Вот как здесь быть?
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2020, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,837

Сообщение от LADYX
Не могу понять почему.
это к специалистам по css.
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2020, 19:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,001

<!-- © 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>
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2020, 21:18
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 189

рони,
Nexus,
огромное спасибо!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение блока при скроллинге region029 jQuery 11 06.10.2013 23:44
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 09:47
Как организовать скрытие блока при уменьшении окна? tempofnick Events/DOM/Window 1 11.02.2012 23:32
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Как сделать, чтобы музыка <embed> на странице не играла только при первом посещении? Bad Request Общие вопросы Javascript 22 27.07.2009 19:44