Как изменить поведение прокрутки (например, скорость, ускорение) на сайте? - PullRequest
Новая
       17

Как изменить поведение прокрутки (например, скорость, ускорение) на сайте?

0 голосов
/ 02 апреля 2019

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

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

https://p2mv.studio/case/sony-music-france

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Вы можете просто сделать это, используя jquery.

Свойство css фактически вызывает задержку, поэтому вы можете отрегулировать задержку с его помощью. 

  transition-duration: 500ms;

Ссылка:

Свойство CSS-переходной длительности устанавливает продолжительность Переход анимации должен занять до завершения. По умолчанию это значение 0, что означает отсутствие анимации. 

$(document).on('mousemove', (event) => {
  $('.cursor').css({
    top: event.clientY,
    left: event.clientX,
  });
});
.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
0 голосов
/ 02 апреля 2019

У вас есть 2 способа достичь этого.Вы можете использовать CSS 

html { scroll-behavior: smooth; }

или JavaScript: 

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
})

Вы можете прочитать больше и найти больше примеров здесь: https://css -tricks.com / snippets/ JQuery / плавной прокрутки /

Надеюсь, это поможет.

...