スキルアップを始める!

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

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

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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

デモサイトはこちら

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

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″ 上に移動

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

まとめ

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

デモサイトはこちら

https://js.eguweb.tech/1582/
URLをコピーしました!