フロントエンド開発者は、視差などのさまざまな種類のインタラクションやアニメーションを作成する必要があります。これは、背景画像のスクロールを遅くして、画面の奥深くにあるような錯覚を与える効果です。

プレーンCSSを使用してを実行する方法についてはすでに説明しましたが、そのパスに行きたくなく、アプリにVue.jsを使用している場合は、より簡単にすることができます。

そこで、 vue-parallaxy が機能し、視差効果を処理するコンポーネントを提供します。

簡単なデモ

まず、次のコマンドを実行してvue-parallaxyをインストールする必要があります。

$ npm install vue-parallaxy

# or, using Yarn
$ yard add vue-parallaxy

vue-parallaxy はコンポーネントであるため、他のコンポーネントと同様に、必要な場所にインポートする必要があります。

import Parallax from "vue-parallaxy";

export default {
  components: {
    Parallax
  }
};

最後に、画像をコンポーネントに渡す必要があります。

<parallax>
  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
</parallax>

スロットを使用して動作するため、<picture>要素またはsrc-set属性を持つ画像を渡すこともできます。

オプション

vue-parallaxy は、小道具を介して渡すことができる動作をカスタマイズするためのさまざまなオプションを提供します。

speedFactor は、効果の強さを決定する係数値です。 その範囲は0(視差なし)から1(最も攻撃的)で、デフォルトは0.15です。

<parallax :speed-factor="0.3">
  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
</parallax>

興味深い事実は、デフォルトでは視差効果がモバイルで無効になっていることです。 これは、デフォルトで(min-width: 968px)に設定されているbreakpointプロパティによって決定されるため、小さい画面で機能させる場合は、小さい値に設定できます。

<parallax :speed-factor="0.3" breakpoint="(min-width: 80px)">
  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
</parallax>

完全なpropsAPIは、ドキュメントで確認できます。

まとめ

vue-parallaxy を使用して、Vueアプリケーションで視差効果を作成する方法と、その動作をカスタマイズするためのいくつかの例を見てきました。

さらに、この記事のコードとデモは、このコードサンドボックスで確認できます。