慣性スクロールで余韻をもたせるプラグイン jquery.easeScroll.js

慣性スクロール系プラグインは沢山あるんですが、いつもページ下に変な余白が出来たりします。
とにかくうまくいった試しがない。

マウススクロールをスムーズに動かしたい
慣性がついた余韻があるスクロールがしたい

って人にへ向けた記事です。

慣性スクロールって検索したら、だいたいがページ内リンクをスムーズにする”するするスクロール”系のプラグインがヒットします。

でも本当にしたいのはそうじゃないです！！

スクロールでページ全体にヌルッと余韻が残るアニメーションをつけたい！
そんなとき「jquery.easeScroll.js」なら簡単に出来ます！

マウススクロールに慣性をつけるjqueryプラグイン

こちらが公式の配布元です。
easeScroll

easeScroll.jsの使い方

jqueryとセットで使って下さいね。

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.easeScroll.js"></script>

$("html").easeScroll({
  frameRate: 60,
  animationTime: 1000,
  stepSize: 120,
  pulseAlgorithm: 1,
  pulseScale: 8,
  pulseNormalize: 1,
  accelerationDelta: 20,
  accelerationMax: 1,
  keyboardSupport: true,
  arrowScroll: 50,
  touchpadSupport: true,
  fixedBackground: true
});

応用編

こちらの記事を参考にしました。

意外と知らない！？マウススクロールに余韻をもたせるjqueryプラグイン

jQuery(function($) {

var ua = navigator.userAgent.toLowerCase();
 
// windowsのみ適用 macやiphone、ipadも適用させない
var isWindows = (ua.indexOf('windows') > -1) && !((ua.indexOf('mac') > -1) && (ua.indexOf('os') > -1)) && !((ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1));

if(isWindows) {
$("html").easeScroll({
  frameRate: 100,//数値が大きいほど滑らか。ただしパソコンの負担も大きくなる。
  animationTime: 1000,//動いている時間
  stepSize: 45,//動く距離
  pulseAlgorithm: 1,/ここは１で問題ない
  pulseScale: 8,//ブレーキを調整。値が大きいとブレーキが強くなる
  pulseNormalize: 1,/ここは１で問題ない
  accelerationDelta: 20,//加速度。数値を変えても変化が分からず
  accelerationMax: 1,//加速度。数値を変えても変化が分からず
  keyboardSupport: true,//キーボード矢印でも動かすか
  arrowScroll: 30,//矢印で動かす距離
  touchpadSupport: true,//スマホ、タブレットでも適用させるかどうか
  fixedBackground: false//背景に影響を与えるか。変化分からず
  });
}
});

WordPressのプラグインでも、慣性スクロールが使えるということなので、もしWordpressを使用しているならこちらのほうが圧倒的にラクですね。

パララックス系のエフェクトと合わせて使用すると、とても相性がいいので、皆さんも使ってみてください。

ほなね。