マウスホイールでリッチなスクロールの方法が知りたいです

https://maquillage.shiseido.co.jp/
こちらのサイトのような慣性スクロールというのでしょうか。
マウスでホイールでスクロールさせた際にイージングが効いて非常に気持ちの良いスクロールになっています。
こちらを実装したいと思っているのですが探してみてもよい内容が見つかりませんでした。
便利なライブラリ、もしくはヒントでも構いませんのでご教示いただけますと助かります。

defghi1977

2018/04/19 04:56

https://teratail.com/help/avoid-asking https://teratail.com/help/question-tips

m.ts10806

2018/04/19 04:58

「良い内容」というのは個人の感覚によるものが大きいと思います。具体的に要件と、それに対してやってみたことを質問に記載してください。（既に参考先があるならそこからコード持ってきて試すのが手っ取り早いと思いますが・・・）

defghi1977

2018/04/19 05:13

この程度であれば背後での動作を推理して欲しい処. 猫も杓子もライブラリでは実力がつきません.

行動規範の内容に同意します

回答3件

懐かしい、何年か前に似たことやったことあります。
mts10806さんがおっしゃっている通り、
自身で実装しないといけないかな、と思います。
もしかして見つかるかもしれないというキーワードは、
”パララックス”じゃないですかね。
”jQuery パララックス　プラグイン”　あたりで調べると見つかるかも。

実装するなら、考え方としては、
・通常スクロールの禁止（もしかしたらいらないかも）
・一定時間内のマウスホイールの移動量を検知（開始時間と終了時間をとっておいて、その間の移動量を持っておく）
・マウスホイールの移動量に応じて、追加分を計算して、アニメーションでスクロールを行う

じゃないでしょうか。
（すみません、少々規模大きくなりそうなので、ソースは割愛）

けっこう~~めんどくさい~~難しいと思いますが、頑張ってください。

投稿2018/04/19 05:26

miyabi_pudding

総合スコア9528

m.ts10806

2018/04/19 05:35 編集

私の場合は「自身でやって」というより「目の前にあるんだからまずそのまま入れてみてよ」ってことですけどね・・・；「あの靴かっこいい！履いてみたい！」となったときにいきなりありそうな店を探すんじゃなく、「とりあえずその人に借りてみれば？」という理論です。全世界に向けて発信されてるものなので赤の他人の靴借りるよりとっつきやすいとは思いますが。追記：確かにパララックスは近いものがありそうですね。

miyabi_pudding

2018/04/19 05:36

mts10806さん> なるほど！失礼しました！その通りですね　汗

行動規範の内容に同意します

ベストアンサー

たとえばこんな

CSS
1body, main{
2	height: 5000px;
3}
4body{
5	margin: 0;
6}
7main{
8	position: fixed;
9	width: 100%;
10	top: 0;
11	transition: top 2s ease;
12	background-image: url(a.jpg);
13}

HTML
1<body>
2	<main></main>
3</body>

JavaScript
1"use strict";
2{
3	const main = document.querySelector("main");
4	const style = main.style;
5	document.onscroll = e => style.top = `${-window.scrollY}px`;
6}