vue-prlxを使ってさくっとパララックス体験をしてみる

今回は、Vue.jsで簡単にパララックス体験ができるプラグイン「vue-prlx」をご紹介します。

vue-prlxとは

指定の要素にパララックス効果を追加できるVue.jsプラグインです。
v-prlxディレクティブを追加することによりtranslateおよびbackground-positionによるアニメーションが可能になります。

インストール

npmもしくはcdnからインストールできます。

npm

プロジェクトディレクトリで下記のコマンドを実行します。

npm i vue-prlx

その後、所定のファイルに下記コードを記述します。

import VuePrlx from 'vue-prlx'

Vue.use(VuePrlx);

cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-prlx/dist/v-prlx.min.js"></script>
<script>
Vue.use(VuePrlx.default);
</script>

Vue.use()を使用してこのプラグインをインストールした場合、内部でVue.directiveが実行されてprlxディレクティブが自動的に追加されます。

ディレクティブ名を変更したい場合は、Vue.directive()の第1引数に任意のディレクティブ名、第2引数にVuePrlx.VuePrlxDirectiveを指定することで変更できます。

使い方

基本的にはパララックス効果を持たせたい要素に対して、v-prlxディレクティブを追加するだけです。
細かい挙動を制御したい場合は、ディレクティブに修飾子をつけたりオブジェクト形式で値を指定します。

ここでは代表的な機能をいくつかご紹介します。

モバイル対応

このプラグインをモバイル端末でも動作させるには、ディレクティブにmobile修飾子をつけます。

<img src="dummy.png" alt="" v-prlx.mobile>

backgroundをパララックス化

backgroundにパララックス効果を追加したいときはディレクティブにbackground修飾子をつけます。

// css
.bg {
    background: url(dummy.png) left top/auto 100% no-repeat;
    width: 100px;
    height: 100px;
}

// html
<div class="bg" v-prlx.background="{ fromBottom:true, direction: 'x' }"></div>

速度変更

speedプロパティに数値を指定することでパララックスの速度を変更できます。
translateの場合、デフォルト値は0.15で、background-positionの場合は0.02となっています。

<img src="dummy.png" alt="" v-prlx="{ speed: 0.3 }">

パララックス効果の開始位置を変更

通常、画面の中心を起点にして要素が動き始めます。
これを画面の下部に変更したい場合はfromBottomプロパティにtrueを指定します。

<img src="dummy.png" alt="" v-prlx="{ fromBottom: true }">

要素の移動方向を変更する

reverseプロパティにtrueを指定することで、要素が下方向ではなく上方向へ動くようになります。

<img src="dummy.png" alt="" v-prlx="{ reverse: true }">

要素の移動軸を変更する

通常y軸に沿って要素が移動しますが、directionプロパティに'x'を指定することで、移動軸をx軸に変えられます。

<img src="dummy.png" alt="" v-prlx.background="{ direction: 'x' }">

移動範囲の制御

limitプロパティにオブジェクト形式（{min: Int, max: Int}）で値を指定することにより、要素の移動範囲を制御できます。
負の値を使用する場合は、併わせてpreserveInitialPositionプロパティをfalseに指定する必要があります。

オリジナルアニメーション

要素の移動だけでなく、要素の大きさなどを変更したい場合は、customプロパティをtrueにします。
そうすることで、要素のstyle属性に--parallax-valueというカスタムプロパティが追加されます。

このカスタムプロパティを利用してCSSのクラスを作成することでオリジナルのアニメーションを作成できます。

// css
.sample {
    transform: rotate(calc(var(--parallax-value) * 1deg ));
}

// html
<img src="dummy.png" alt="" class="sample" v-prlx="{ custom: true }">

実際に試してみる

上記機能を詰め込んだサンプルです。
すべてのディレクティブにはmobile修飾子をつけているので、モバイル端末でも正常に動きます。

See the Pen bGdQWJv by sho itagaki (@sho_itagaki) on CodePen.

おわりに

パララックス機能を1から作るのは時間がかかるものなので、こういったプラグインはとてもありがたいですね。