web-dev-qa-db-fra.com

Comment changer le comportement du défilement (par exemple la vitesse, l'accélération) sur le site Web?

Comment sont effectués les comportements de défilement modifiés sur les sites Web? Je veux accomplir un comportement de défilement accéléré comme vous pouvez le voir dans l'exemple. Donc, vous faites défiler à une certaine vitesse et après avoir lâché la page défile un peu plus par elle-même, ralentit et s'arrête.

Malheureusement, je n'ai absolument aucune base pour vous fournir du code, j'espère que vous pourrez toujours m'aider. Peut-être pouvez-vous me recommander des plugins js?

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

javascriptscrollparallaxbehaviormotion
3
jeyy

Vous pouvez simplement le faire en utilisant jquery.

La propriété css est en fait à l'origine du retard, vous pouvez donc l'ajuster avec.

  transition-duration: 500ms;

Référence:

La propriété CSS de transition-duration définit la durée nécessaire à une animation de transition. Par défaut, la valeur est 0s, ce qui signifie qu'aucune animation ne se produira.

$(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
Hiteshdua1