JavaScript

スクロールでパララックスするやつをやりたい【慣性スクロール / 実装 / Luxy.js】

 

今回は、以下のデモような、スクロールするとスクロール速度より画像が遅れてついてくるやつ（語彙）を実装します。

デモページ

使うのは、JavaScriptのプラグイン「Luxy.js」です。

この記事の通りに実装を行えば、美しいパララックスが表現できるかと思います。

是非参考にしてみてください！

Contents

Luxy.jsのプラグインをダウンロードして設置する

まずは以下のURLからLuxy.jsのプラグインをダウンロードしてきます。

https://github.com/min30327/luxy.js

緑の「Code」プルダウンを押し、「Download ZIP」をクリックしてソースをダウンロードしましょう。

ダウンロードしたZIPファイルを解凍し、そのなかの「dist/js/luxy.min.js」ファイルを、プロジェクトフォルダのjsフォルダなどにコピーして入れます。

私はこんな感じで、index.htmlと同階層にassets/jsフォルダを作り、そのなかにluxy.min.jsを入れました。

HTMLのhead内で、luxy.min.jsファイルを読み込みます。

<script src="assets/js/luxy.min.js"></script>

 

その後、</body>の直前に以下のコードを記入します。

<script charset="UTF-8">
  luxy.init();
</script>

 

これでLyuxy.jsを使う準備が整いました！

body内を記述していく

まずは、慣性スクロールを行いたいコンテンツエリアをid=”luxy”で囲います。

<div id="luxy">
   慣性スクロールするよ
</div>

 

かつ、パララックス効果を与えたい箇所にclass=”luxy-el”を当てます。

<div id="luxy">
    <div class="luxy-el">
        慣性スクロールかつパララックスするよ
    </div>
</div>

 

パララックス効果にはオプションが設定できますので、以下を参考にしてください。

data-speed-y=”○” 視覚効果の縦方向の速度を指定する
data-horizo​​ntal=”1″ 水平方向にスクロールする
data-speed-x=”○” 視覚効果の横方向の速度を指定する
data-offset=”○” オフセットを指定する

もしもななめに動かしたいときには、data-horizontal=”1″、data-speed-y=”○”、data-speed-x=”○”の3つのオプションを指定します。

実際にデモページを実装してみました

今回は、全画面でパララックス＋慣性スクロールが動くもの（デモページ上部）と、ある範囲のなかの画像が慣性スクロール＋パララックスで動く（デモページ下部）ものを実装してみました。
（表現あってるのかなこれ）

デモページ

HTML

HTMLはこちら。（headやhtmlタグは省略しています）

<body>
<div id="luxy">

  <!-- 全画面でパララックス＋慣性スクロールが動く -->
  <div class="content01">
    <div id="bg-section01" class="luxy-el" data-speed-y="15">
      <p class="luxy-el" data-speed-y="-15">Parallax test <br>
      scroll <br>
      ↓</p>
    </div>
  </div>
  
  <p class="txt">
    スクロール<br>
    ↓<br>
    ↓<br>
    ↓<br>
    ↓<br>
    ↓<br>
    ↓<br>
    ↓<br>
    ↓<br>
  </p>

  <!-- 範囲のなかの画像が慣性スクロール＋パララックスで動く -->
  <div class="content02">
    <div id="bg-section02" class="luxy-el" data-speed-y="-5"></div>
  </div>
</div>

<script charset="UTF-8">
  luxy.init();
</script>
</body>

CSS

CSSはこちら。

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ===========================================
* MAIN
* ======================================== */
.content01 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#bg-section01 {
  width: 100vw;
  height: 100vh;
  background-image: url(./img/DSC_0818.JPG);
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  color: #fff;
  font-size: 200%;
  font-weight: bold;
}

.content02 {
  width: 40vw;
  height: 25vw;
  margin-bottom: 800px;
  overflow: hidden;
  position: relative;
}

#bg-section02 {
  width: 100%;
  height: 180%;
  background-image: url(./img/DSC_0818.JPG);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 20%;
}


/* ===========================================
* テキストととのえ
* ======================================== */
.txt {
  color: #1a1a1a;
  font-size: 150%;
  line-height: 3.0;
}

簡単にHTML/CSS解説

イメージは、PhotoshopやIllustratorの「マスク」機能です。

content01,content02クラスで、マスクしたい範囲を作っています。

overflow: hidden;で、範囲外にはみ出た要素は見えなくします。

範囲内に入れる画像（bg-section01, bg-section02）をパララックスにしてスクロールスピードをいじることによって、スクロールしたときのズレを演出しています。

まとめ

ということで、Luxy.jsの導入とデモページの紹介でした。

実際に触ってみて、数値をいじってみたときの挙動を確認してみるのがいいプラグインだなと思いました！

まあこれはLuxy.jsに関わらずWeb制作においては全般的に言えることだと思うんですが、、

私のソースコードを参考に、data-speed-yをいじってみたり、class=”luxy-el”を入れる要素を変えてみたりなど、ぐちゃぐちゃっと崩してみてください。

それでは！

JavaScript
RELATED POST