web-dev-qa-db-ja.com

ウェブサイトのスクロール動作（速度、加速など）を変更するにはどうすればよいですか？

Webサイトでの変更されたスクロール動作はどのように行われますか？例にあるように、スクロール動作を加速させたいと思います。したがって、一定の速度でスクロールし、放した後、ページがそれ自体でもう少しスクロールし、速度が落ちて停止します。

残念ながら、私はあなたにコードを提供する根拠はまったくありません。あなたが私を助けてくれることを願っています。多分あなたは私にいくつかのjsプラグインをお勧めできますか？

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

javascriptscrollparallaxbehaviormotion
3
jeyy

Jqueryを使用してこれを簡単に行うことができます。

Cssプロパティが実際に遅延を引き起こしているので、それを使用して遅延を調整できます。

  transition-duration: 500ms;

参照：

Transition-duration CSSプロパティは、遷移アニメーションが完了するまでにかかる時間を設定します。デフォルトでは、値は0sです。つまり、アニメーションは発生しません。

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