2021年4月17日スポンサーリンクタイトルのとおり、「Luxy.js」を使って、慣性スクロールとパララックを簡単に実装する方法を解説します。慣性スクロール:余韻が残る画面のスクロールパララックス:スクロールに合わせて特定の要素を動かす機能ザックリ言えば、こんな機能のことです。イメージが湧かない方は、こちらをご覧ください「Luxy.js」はかなり便利なプラグインなので、今回の記事を読んで気になった方はぜひ試してみてください。「Luxy.js」を使う方法は、npmでインストールするGitHubから直接コピペするこのいずれかです。今回は2で実装していきますGitHubにて、「dist/js」をクリックします。その後、「luxy.js」か「luxy.min.js」のいずれかをソースコードをコピーします。コピーしたコードは「luxy.js」というファイルを作成し、その中にペーストします。あとは、公式ページにあるように、次のようにコードを書けば実装ができます。</script></body>ソウhead内の参照先は適宜修正をしてください。うまく実装できると、慣性スクロールが機能しているはずです。次にパララックスの設定方法を解説します。言っても方法は簡単で、パララックス効果を与えたい要素に「id=”luxy-el”」を追加するだけです。--></div>ソウ「data-speed-y=”〇”」の数値を変えると動くスピードが変わりますちなみに、次のように「data-horizontal=”1′′」と追記すれば、要素を横方向へ動かせます。data-speed-x="-5"></div></div>この際、「data-speed-〇」は「y」から「x」に変わります。以上を踏まえ、サンプルコードを書くと次のようなかんじになります。60%;}上記のコードでは、一番上の画像にパララックスを与えてますが、注目したいのが、パララックスを加えたい要素は囲う囲った要素に「overflow」を設定するという点です。これをやらないと、下図のように、パララックス効果を加えた要素が、次の要素に覆い被さってしまいます。要素を下に潜り込ませるには、必須なので忘れないように注意してください。他にも方法はあるかと思いますが、これが一番簡単な方法かと文字にパララックスを指定することも可能ちなみにですが、文字に対してパララックス効果を加えることも可能です。この場合のやり方も、画像にパララックスを設定したときと同様、動かしたい要素に「id=”luxy-el”」を加えます。具体的なコードにすると次のとおりです。bold;}完成したページはこちらをご覧ください。テキストにパララックス効果を加える際の注意点は二つあります。親要素に「overflow:hidden」設定するテキストに「display:inline-block」を設定する1は先ほど解説したので省略します。2ですが、パララックスはインライン要素には効かないようです。インライン要素にパララックス効果を与えるためには、display:blockdisplay:inline-blockこのいずれかを設定する必要があります。要素を「div」で囲う親要素に「overfolw:hidden」を設定するこれらが分からず、最初は少し躓きましたが、「Luxy.js」は便利なプラグインです。慣性スクロールやパララックスの実装する必要がある際は、ぜひ採用してみてください。最後に余談ですが、僕は一つだけ自慢できることがあります。妻子持ちブラック企業というハードモードの中、スクールには通わず、半年の独学で上場企業から内定したことです。チュートリアルなど、いわゆる「王道」の教材も使いましたが、一番参考になったのはUdemyで買った動画教材。CSSやJavaScriptの学習で参考になった教材がコチラです。専門書よりも安く買えるので、お試し購入がしやすいスマホから動画で学べるので、通勤中や昼休みにも勉強できるなど、独学者にはかなりオススメのコンテンツです。いわゆる初心者の勉強を終えた後のレベルアップ方法って悩みますよね。筋トレとブログと家族を愛しています。毎朝2時から勉強をして、独学半年で未経験からWeb系自社開発企業から内定をもらいました。