会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【WordPress】パララックス(視差効果)を作る|Luxy.js

WordPress(ワードプレス)
この記事は約3分で読めます。

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

デモサイトはこちら

Luxy.js
luxy.init(); luxy.init({ wrapper: '#luxy', targets : '.luxy-el', wrapperSpee

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 - GitHub - min30327/luxy.js: Inertia scroll and parallax effect plugin in Vanilla.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″ 上に移動

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

まとめ

「Luxy.js」を使うと、慣性スクロールとパララックスを実装することができます。御参考ください。

デモサイトはこちら

Luxy.js
luxy.init(); luxy.init({ wrapper: '#luxy', targets : '.luxy-el', wrapperSpee
タイトルとURLをコピーしました