Vue.jsの視差効果

getdocs

2年前

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

プレーン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>

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

<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アプリケーションで視差効果を作成する方法と、その動作をカスタマイズするためのいくつかの例を見てきました。

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