にゅわっとスクロールするやつの正体

一つ一つの要素にいちいちアニメーションをつけているのかなと思っていたが、
メンターさんに聴いた所、「慣性スクロール」「パララックス」というエフェクト？で、
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	水平方向のパララックススクロール効果の速度を指定できます