にゅわっとスクロールするやつの正体
一つ一つの要素にいちいちアニメーションをつけているのかなと思っていたが、
メンターさんに聴いた所、「慣性スクロール」「パララックス」というエフェクト？で、
Luxy.jsを導入するのがおすすめだと聞いたので導入してみたいと思う
まずは公式ドキュメントをみてみる
手順
①npmもしくはgithubから、luxy.jsをDLしてプロジェクトファイルに入れ込む
- npmでインストールの場合
ターミナルで
terminal.terminal
$ npm install luxy.js --save
を叩く(もちろんプロジェクトファイルの中に移動してから）
↓npmコマンドについての補足
//インストール
% npm install (パッケージ名) --save
//アンインストール
% npm uninstall (パッケージ名) --save
//--save
//package.jsonファイルにパッケージ情報がdependencyとして追記される
//-dev
//Sassなど、開発やテストのみで必要な場合、ローカルインストール(devDependencies)
//※jqueryなど実行に必要なパッケージの場合はつけなくてOK(dependencies)
②HTMLのhead内にパスを通す
index.html
<head>
<script src="node_modules/luxy.js/dist/js/luxy.min.js"></script>
</head>
※パスは適宜変えてください。npmでインストールした場合はこれでokなはず。
③bodyの最後に以下を追加
index.html
//ここから
<script charset="utf-8">
luxy.init();
</script>
//ここまでを記述
//これより下は任意です。イメージのために入れてます・
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
④適用させたい要素を#luxyで包む
大体mainにid="luxy"付ければok
index.html
<header>ヘッダー</head>
<main id="luxy">
メインコンテンツ
</main>
ここまでで慣性スクロールは適用されているはずです。
⑤スマホ・iPadの慣性スクロールをオフにする
パララックスを適用させるには
| 1 | 2 |
|---|---|
| data-offset | ピクセル単位のオフセット（座標、表示位置）を指定できます |
| data-speed-y | 垂直方向のパララックススクロール効果の速度を指定できます |
| data-horizontal | ‘1’ に設定すると、水平視差スクロールを有効にできます |
| data-speed-x | 水平方向のパララックススクロール効果の速度を指定できます |