スムーススクロールライブラリ。
Gekko は フィンランド語でヤモリを意味する言葉です。
- 他のライブラリに依存しません
- Typescript対応
- アンカーリンクまでアニメーションでスクロール
- 外部ページから遷移時にアニメーションでスクロール
- 位置調整(ヘッダーなど)
- 絶対パス、相対パスに対応
- data-gekko="no-smooth" 追加でアニメーション無効
- スクロール開始時に「beforeScroll」イベントを発火
- スクロール終了時に「afterScroll」イベントを発火
- スクロール中断時に「stopScroll」イベントを発火
- メソッド制御
npm install @darowasahito/gekko
import Gekko from "@darowasahito/gekko";
const gekko = new Gekko();
<script src="https://cdn.jsdelivr.net/npm/@darowasahito/gekko/dist/gekko.min.js"></script>
<script>
const gekko = new Gekko();
</script>
dist/gekko.min.js を良きディレクトリに設置
<script src="ディレクトリ/gekko.min.js"></script>
<script>
const gekko = new Gekko();
</script>
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
speed | number | 1000 | アニメーションスピード。 isSpeedAsDuration が false のとき、1 秒間に移動するピクセル量。 isSpeedAsDuration が true のとき、アニメーション時間 |
isSpeedAsDuration | boolean | false | speed をアニメーション時間(duration)として扱うかどうか |
delay | number | 0 | 遅延 ミリ秒 |
easing | いずれかの文字列 'inQuad', 'outQuad' , 'inOutQuad' , 'inCubic' , 'outCubic' , 'inOutCubic' , 'inQuart' , 'outQuart' , 'inOutQuart' , 'inQuint' , 'outQuint' , 'inOutQuint' , 'inSine' , 'outSine' , 'inOutSine' , 'inExpo' , 'outExpo' , 'inOutExpo' , 'inCirc' , 'outCirc' , 'inOutCirc' , 'inElastic' , 'outElastic' , 'inOutElastic' , 'inBack' , 'outBack' , 'inOutBack' , 'inBounce' , 'outBounce' , 'inOutBounce' | 'outQuad' | イージング |
offset | number | string | () => number | 0 | スクロール位置をずらす。 number: 数値を指定。指定ピクセル分ずらす。 string: セレクタを指定。該当セレクタの高さ分ずらす。 () => number: 数値を返す関数を指定。引数なし。返り値の数値分ずらす。 |
const gekko = new Gekko();
//スクロール開始時
gekko.on("beforeScroll", (anchor) => {
/* anchor: 移動先のアンカー */
});
// スクロール終了時
gekko.on("afterScroll", (anchor) => {
/* anchor: 移動先のアンカー */
});
// スクロール中断時
gekko.on("stopScroll", (anchor) => {
/* anchor: 移動先のアンカー */
});
const gekko = new Gekko();
// #anchor までスムーススクロール
gekko.scroll("#anchor");
// スムーススクロール停止
gekko.stop();
// オプション更新
gekko.options( オプション );
// gekko破棄
gekko.destory();
data-gekko="no-smooth"
がついたアンカーリンクは、スムーススクロールしません。
<a href="#anchor" data-gekko="no-smooth">アンカーリンク</a>
cferdinandi/smooth-scroll
vanilla js 化するにあたって参考にしました。
jQuery Easing
イージングのロジックを使っています。