【WordPress】パララックス（視差効果）を作る｜Luxy.js

WordPress(ワードプレス)

2022.11.18

この記事は約3分で読めます。

何度も登場しているパララックスですが、今回もサンプルと共に試していきたいと思います。

デモサイトはこちら

https://js.eguweb.tech/1582/

Luxy.jsとは？
Luxy.jsを配置する
Luxy.jsを実装する
まとめ

Luxy.jsとは？

Luxy.jsは、慣性スクロールとパララックスエフェクトを実装することができるJavaScriptのプラグインです。

GitHub - min30327/luxy.js: Inertia scroll and parallax effect plugin in Vanilla.js

Inertia scroll and parallax effect plugin in Vanilla.js - min30327/luxy.js

githubに置いてくださっていますので、まずはファイルをダウロードします。

Luxy.jsを配置する

ファイルの読み込みができるディレクトリにファイルを置きます。WordPressの場合はwp-contentあたりに置いておくと良いかもしれません。

これで、ファイルを読み込みできます。

Luxy.jsを実装する

Luxy.jsを実装してみます。

<script type="text/javascript" src="/wp-contetnt/luxy.js-master/dist/js/luxy.js" charset="utf-8"></script>

あとは、luxy.init()でページを開いた際に読み込みます。

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

あとは、このような感じで画像を並べたhtmlブロックを追加します。

<div id="luxy">
<div class="luxy-el"><img src="/wp-content/uploads/svxe4b_gdrg.jpg" alt=""></div>
<div class="luxy-el"><img src="/wp-content/uploads/falyvtv1krg.jpg" alt=""></div>
<div class="luxy-el"><img src="/wp-content/uploads/otz-5ofaia4.jpg" alt=""></div>
<div class="luxy-el"><img src="/wp-content/uploads/svxe4b_gdrg.jpg" alt=""></div>
</div>

data-speed-x=”5″ 右に移動
data-speed-x=”-5″ 左に移動

data-speed-y=”5″ 下に移動
data-speed-y=”-5″ 上に移動

オプションを設定すると、動きに変化をつけることができます。