JavaScript

luxy.jsを使ったスクロールパララックス演出

  /

今回はWebデザインにおいて魅力的な視覚効果を実現するためのツールである「luxy.js」を紹介します。
このライブラリを使用することで、スクロール時のパララックス効果を簡単に実装できます。初心者の方でもわかりやすく、楽しんで学べるように、具体的なコード例とともに詳しく説明していきます。さっそく始めましょう！

Contents

luxy.jsとは

luxy.jsは、スクロールに応じて要素を動かすパララックス効果を簡単に実装できる軽量なJavaScriptライブラリです。パララックス効果とは、スクロールすると背景画像や要素が異なる速さで動くことで奥行き感を演出する効果です。このライブラリを使うことで、コーディングの知識があまりなくても素早くパララックス効果をウェブサイトに追加できます。

luxy.jsの特徴

luxy.jsの主な特徴をいくつか挙げてみましょう。

  1. 軽量で高速:
    luxy.jsは非常に軽量で、ウェブページの読み込み速度にほとんど影響を与えません。
  2. 簡単な実装:
    初心者でも簡単に使えるように設計されています。複雑な設定は必要なく、シンプルなコードでパララックス効果を実装できます。
  3. カスタマイズ可能:
    要素ごとにスクロール速度や方向を自由に設定できるため、独自のデザインを作りやすいです。

これらの特徴を踏まえ、実際にluxy.jsを使ってパララックス効果を実装する方法を見ていきましょう。

luxy.js実践サンプルページを作成

次に、luxy.jsを使った簡単なサンプルページを作成してみましょう。このサンプルでは、3つのセクションに異なるパララックス効果を適用します。

CSSコード

まずは、ページ全体のスタイルを定義するCSSコードを見ていきます。このコードを使って各セクションのスタイルを設定します。

<style>
body {
    padding: 0;
    margin: 0;
    font-size: 18px;
}
h1{
    text-align: center;
    font-size: 30px;
    padding: 20px 0;
    line-height: 1.8em;
}
section{
    height: 120vh;
    overflow: hidden;
    position: relative;
    color: #fff;
}
section > div{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
section h2{
    font-size: 40px;
}
section img{
    width: 100px;
}
.area1{
    background-color: #000000;
}
.area2{
    background-color: #777777;
}
.area3{
    background-color: #333333;
}
</style>

　
このCSSコードでは、各セクションの背景色やテキストのスタイルを定義しています。また、セクション内の要素を中央に配置するためのスタイルも設定しています。

HTMLコード

次に、HTMLコードを見てみましょう。このコードを使って、luxy.jsを適用するためのセクションと要素を定義します。

<h1>luxy.jsを使ったスクロールパララックス演出<br>下にスクロールしてみてください。</h1>

<div id="luxy">
    <section class="area1">
        <div>
            <h2>エリア１</h2>
            <div class="luxy-el" data-speed-y="40"><img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="ロゴ"></div>
            <div class="luxy-el" data-horizontal="1" data-speed-x="30" data-speed-y="15"><img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="ロゴ"></div>
        </div>
    </section>
    <section class="area2">
        <div>
            <div class="luxy-el" data-speed-y="-5">
                <h2>エリア２</h2>
            </div>
            <div class="luxy-el" data-horizontal="1" data-speed-x="-5"><img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="ロゴ"></div>
        </div>
    </section>
    <section class="area3">
        <div>
            <div class="luxy-el" data-speed-y="-2">
                <h2>エリア３</h2>
            </div>
            <div class="luxy-el" data-speed-y="2" data-offset="-50"><img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="ロゴ"></div>
        </div>
    </section>
</div>

　
このHTMLコードでは、各セクションに異なるパララックス効果を持つ要素を配置しています。data-speed-yやdata-speed-xの属性を使って、各要素のスクロール速度や方向を設定しています。

JavaScriptコード

最後に、luxy.jsを初期化するためのJavaScriptコードを追加します。このコードを使って、ページ読み込み時にluxy.jsを初期化します。

<script type="text/javascript" src="luxy.min.js" charset="utf-8"></script>
<script charset="utf-8">
window.onload = function() {
 luxy.init();
}
</script>

　
このJavaScriptコードでは、ページが読み込まれたときにluxy.init()関数を呼び出してluxy.jsを初期化しています。

luxy.jsを使ったスクロールパララックス演出デモページ

ここまで説明したコードを使って作成したデモページを、以下のリンクから確認できます。実際にスクロールして、パララックス効果を体験してみてください。

luxy.jsを使ったスクロールパララックス演出デモページ

公式サイト

さらに詳しい情報や高度なアニメーションの実装方法については、Luxy.jsの公式サイトを参照してください。

Luxy.js

最後に

luxy.jsを使ったスクロールパララックス演出の導入方法を紹介しました。シンプルなコードで視覚的に魅力的な効果を実現できるため、初心者の方にもぜひ試していただきたいライブラリです。ウェブデザインの幅を広げるために、luxy.jsを活用し、パララックス効果の魅力をぜひ体感してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パララックス parallax luxy.js
関連記事