Анимировать навигацию с помощью прокрутки - PullRequest
Новая
       9

Анимировать навигацию с помощью прокрутки

0 голосов
/ 03 июля 2019

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

Я пытался сделать это с помощью animate, но там я могу предоставить его только после прокрутки 50 px с анимацией за xxx секунд. 

$(window).scroll(function() {
if (ScrolledFromTop > 50) {
    $('nav').animate({CSS CHANGES});
}
});

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

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Какой вариант использования стоит за этим? Кажется непрактичным, что меню застревает между некоторыми переходами, когда пользователь прекращает прокрутку между 50 и 100 пикселей.

В любом случае вам необходимо отобразить текущее значение прокручиваемого пикселя в анимацию, например: 

$(window).scroll(function() {
  if (window.pageYOffset  >= 50 && window.pageYOffset  <= 100) {
      var percent = (window.pageYOffset - 50 ) * 2;
      animateMenu(percent);
  }else if(window.pageYOffset < 50) {
  	  animateMenu(0);
  }else if(window.pageYOffset > 100) {
      animateMenu(100);
  }
});

function animateMenu(percent){
   $('.menu').css({
      width: 100 - percent + "%",
      height: percent + "%"
   });
}
.menu{
  background: red;
  height: 50px;
  width: 100%;
  min-width: 50px;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.2s all ease-in;
  min-height: 50px;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
0 голосов
/ 03 июля 2019

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

...