プログラミング・エンジニア転職

【Luxy.js】慣性スクロール&パララックスの実装方法を解説します

タイトルのとおり、「Luxy.js」を使って、慣性スクロールとパララックを簡単に実装する方法を解説します。

慣性スクロールとか、パララックスとか、何それ?

こんな人のために先に解説をすると、

  • 慣性スクロール:余韻が残る画面のスクロール
  • パララックス:スクロールに合わせて特定の要素を動かす機能

ザックリ言えば、こんな機能のことです。

ソウ

いまいちイメージが湧かない方は、こちらをご覧ください

「Luxy.js」はかなり便利なプラグインなので、今回の記事を読んで気になった方はぜひ試してみてください。

Luxy.jsのインストール方法

「Luxy.js」を使う方法は、

  1. npmでインストールする
  2. GitHubから直接コピペする

このいずれかです。

ソウ

今回は②で実装していきます

GitHubにて、「dist/js」をクリックします。

画像2

その後、「luxy.js」か「luxy.min.js」のいずれかをソースコードをコピーします。

画像3

コピーしたコードは「luxy.js」というファイルを作成し、その中にペーストします。

あとは、公式ページにあるように、次のようにコードを書けば実装ができます。

<head>
  <script src="luxy.js"></script>
</head>

<body>
  <div id="luxy">
    <!-- ここにコンテンツを入れる -->
  </div>
  
  <script>
    luxy.init({});
  </script>
</body>
ソウ

head内の参照先は適宜修正をしてください。

うまく実装できると、慣性スクロールが機能しているはずです。

パララックスの設定方法

次にパララックスの設定方法を解説します。

と言っても方法は簡単で、パララックス効果を与えたい要素に「id=”luxy-el”」を追加するだけです。

<div id="luxy-el" data-speed-y="5">
  <!-- この要素にパララックス効果が加わる -->
</div>
ソウ

「data-speed-y=”〇”」の数値を変えると動くスピードが変わります

ちなみに、次のように「data-horizontal=”1″」と追記すれば、要素を横方向へ動かせます。

<div id="luxy">
  <div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>

この際、「data-speed-〇」は「y」から「x」に変わります。

以上を踏まえ、サンプルコードを書くと次のようなかんじになります。


<div id="luxy">
  <div class="content1-wrapper">
    <img src="img/audience.jpg" class="luxy-el content1" data-speed-y="40">
  </div>
  <img class="content2" src="img/bouldering.jpg">
  <img class="content3" src="img/soccer.jpg">
</div>

<script>
  luxy.init({});
</script>
body{
  text-align: center;
}
.content1-wrapper{
  width: 60%;
  overflow: hidden;
  margin: auto;
}
.content1{
  width: 100%;
}
.content2, .content3{
  width: 60%;
}

上記のコードでは、一番上の画像にパララックスを与えてますが、注目したいのが、

  • パララックスを加えたい要素は囲う
  • 囲った要素に「overflow」を設定する

という点です。

これをやらないと、下図のように、パララックス効果を加えた要素が、次の要素に覆い被さってしまいます。

要素を下に潜り込ませるには、必須なので忘れないように注意してください。

ソウ

他にも方法はあるかと思いますが、これが一番簡単な方法かと

文字にパララックスを指定することも可能

ちなみにですが、文字に対してパララックス効果を加えることも可能です。

この場合のやり方も、画像にパララックスを設定したときと同様、動かしたい要素に「id=”luxy-el”」を加えます。

具体的なコードにすると次のとおりです。

<div class="content1">
  <img src="img/audience.jpg" class="luxy-el content1-img" data-speed-y="40">
</div>

<div class="content2">
  <div class="text1">
    <span data-horizontal="1" data-speed-X="5" class="luxy-el">Parallax - Code</span>
  </div>
  <div class="text2">
    <span data-horizontal="1" data-speed-X="-5" class="luxy-el">Inertial - Scroll</span>
  </div>
  <img class="content2-img" src="img/bouldering.jpg" alt="">
</div>

<div class="content3">
  <img class="content3-img" src="img/soccer.jpg" alt="">
</div>
body{
  text-align: center;
}
.content1{
  width: 60%;
  overflow: hidden;
  margin: auto;
}
.content2, .content3{
  position: relative;
  width: 60%;
  margin: 10px auto;
}
.content1-img, .content2-img, .content3-img{
  width: 100%;
}
.text1{
  position: absolute;
  top: 5%;
}
.text2{
  position: absolute;
  bottom: 5%;
  right: 0%;
}

.text1 >span, .text2 >span{
  color: white;
  display: inline-block;
  font-size: 50px;
  font-weight: bold;
}

完成したページはこちらをご覧ください。

テキストにパララックス効果を加える際の注意点は二つあります。

  1. 親要素に「overflow:hidden」設定する
  2. テキストに「display:inline-block」を設定する

①は先ほど解説したので省略します。

②ですが、パララックスはインライン要素には効かないようです。

なので、インライン要素にパララックス効果を与えるためには、

  • display:block
  • display:inline-block

このいずれかを設定する必要があります。

「Luxy.js」で慣性スクロールとパララックスを実装しました!

「まとめ」と書かれた画像

パララックスを実装するために必要な、

  • 要素を「div」で囲う
  • 親要素に「overfolw:hidden」を設定する

これらが分からず、最初は少し躓きましたが、「Luxy.js」は便利なプラグインです。

慣性スクロールやパララックスの実装する必要がある際は、ぜひ採用してみてください。

それでは!