【jquery非依存】Luxy.jsで簡単にパララックスと慣性スクロールを実装する

ひぐま
ひぐま

今回はパララックスと慣性スクロールを同時に実装できる「Luxy」というjsプラグインをご紹介いたします。

そもそもパララックス、慣性スクロールとは？

パララックスや慣性スクロールの言葉にピンとこない人のために説明しますと、

パララックス(parallax)
パララックスとは、英語で「視差」のことを差します。
複数重ねた要素に動かすスピードの差をつけてあげることで、遠近感や立体感を生み出す表現方法で、 前述した視覚効果で見る側に強いインパクトを与えられるためよく用いられている手法です。
慣性スクロール
慣性スクロールとは、画面をスクロールした際、実際にカーソルを動かした分よりも長く、
慣性が作用しているようにスクロールされた動きが維持されることを差します。
例えばどこかのウェブサイト上で、スクロールしてもピタリと止まらず、画面がヌルヌルと滑らかなスクロールを続けるような動きを感じたことはありませんか？
それが慣性スクロールと呼ばれているものになります。

実際にLuxy.jsの公式サイトで上記の動作を体感することができます。

luxyの公式サイト

実装してみる

公式サイトのドキュメントを見ながら、実際に実装してみます。

まず必要なファイルをGitHubからダウンロードします。
GitHub

緑のボタン「Code」をクリックし、「Download ZIP」を選択しZIPファイル一式をダウンロードします。

ダウンロードが終わったら解凍後「dist」の中から「luxy.js」または、軽量版の「luxy.min.js」を取り出し、自サイトのファイルに置いて下さい。

<script type="text/javascript" src="js/luxy/luxy.min.js" charset="utf-8"></script>

ファイルを読み込んだら、下記のスクリプトコードを書き記します。

<script charset="utf-8">
window.onload = function() {
 luxy.init();
}
</script>

次に、効果を付けたい場所を囲むコンテナ部分にID「luxy」を付けます。
luxyで囲んだ箇所は「position:fixed」が付きますので、固定要素は包含しないようにご注意ください。
※position:fixed;やbackground-attachment:fixed;の要素にはパララックス効果が表れません

パララックス効果を付けたい要素にはクラス「luxy-el」を付与します。

<div id="luxy"><!-- コンテンツの囲み部分にID「luxy」 -->
　<p class="luxy-el"><img src="img/sample.jpg" alt=""></p><!-- パララックス効果を付ける要素にはクラス「luxy-el」を付ける -->
</div>

縦の動き

data-speed-y=""を付与し、任意の数値をいれます。正の数は下へ、負の数は上へ動きます。数字が両極に大きいほどスピードが早くなります。

横の動き

data-horizontal="1"を付与し、data-speed-x=""に任意の数値をいれます。正の数で右へ、負の数で左へ動きます。数字が両極に大きいほどスピードが早くなります。

座標、表示位置

座標、表示位置の調整はdata-offset=""に任意の数値をいれます。

デモ

実際にどんな感じで動くかな～と私も設定してみましたが、こんな感じ↓

デモ

下にスクロールをずずいっとしてみてください
簡単な動作ですが、飛行機が雲の上からに下へ移動、バスが横切ります

HTML

HTMLはこんな感じです。

<div id="luxy">
    <main>
        <section class="one">
            <div>
                <h2>Airplane</h2>
                <p>This is dummy. This is dummy.<br>
                This is dummy. This is dummy. This is dummy.</p>
                <p class="luxy-el" data-speed-y="30"><img src="img/luxy/04.png" alt="飛行機"></p>
                <p class="luxy-el kumo" data-horizontal="1" data-speed-x="15" data-speed-y="20"><img src="img/luxy/07.png" alt="雲"></p>
                <p class="luxy-el kumo" data-horizontal="1" data-speed-x="-15" data-speed-y="10"><img src="img/luxy/08.png" alt="雲"></p>
            </div>
        </section>
        <section class="two">
            <div>
                <div class="luxy-el" data-speed-y="-5">
                    <h2>Bus</h2>
                    <p>This is dummy. This is dummy.</p>
                </div>
                <p class="luxy-el" data-horizontal="1" data-speed-x="-5"><img src="img/luxy/06.png" alt="バス"></p>
            </div>
        </section>
        <section class="three">
            <div>
                <div class="luxy-el" data-speed-y="-2">
                    <h2>Ship</h2>
                    <p>This is dummy. This is dummy.<br>
                    This is dummy.</p>
                </div>
                <p><img src="img/luxy/05.png" alt="船"></p>
            </div>
        </section>
    </main>
    <footer>
        <small>Copyright © 2012-2020 名古屋のホームページ制作 電脳職人村 All Rights Reserved.</small>
    </footer>
</div>

CSS

header{ top:0; z-index:100; }
main{ max-width:100%; }
main section{ height:120vh; padding:0 15px; overflow:hidden; position:relative; }
main section > div{
	max-width:1000px;
	margin:0 auto;
	text-align:center;
	color:#fff;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
main .one{ background:url(img/luxy/01.jpg) center; background-size:cover; }
main .two{ background:url(img/luxy/02.jpg) center; background-size:cover; }
main .three{ background:url(img/luxy/03.jpg) center; background-size:cover; }
main section div > h2{
	margin-bottom:35px;
	font-size:50px;
	font-weight:900;
}
main section div > p{
	font-size:18px;
	font-weight:500;
}
main section p img{ width:150px; display:inline-block; }
main .one .kumo img{ width:300px; }
main .two p img{ position:absolute; right:0; }

レイヤー(重ねるパーツ)をもっと増やしたり、じっくり画面構成を練ってから組んだらもっといろいろと遊べそうな気がします

皆さんも是非使ってみてください。

関連記事