[Vue.js]Vuetifyで、画像にParallax（視差）効果を簡単に適用する方法[v-parallax]

Vuetifyで画像にParallax(パララックス)効果を適用してみる

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、24回目になります。
今回は、画像に簡単にParallax(視差)効果を適用できる
v-parallax について、書いた記事になります。

↑こちらの動画をご覧ください。スクロールに合わせて、背景画像と手前の文字に「視差効果」が生まれていることが確認できるかと思います。このサンプルは、当サイトの VuetifyのParallaxサンプルで実際に動く様子を確認できます。

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<template>
  <v-parallax 
    height="300"
    src="https://picsum.photos/1600/900?random=1">
  </v-parallax>
</template>

解説など

いたってシンプルです。
上記の様に、v-parallax コンポーネントを呼び出して、src という prop に表示したい画像を指定するだけです。
3行目にある height という prop で、表示されるエリアの高さを指定しています。

渡せる props は、

・alt
・height
・src
・srcset

の4種類です。
それぞれ何ができるかというのは、v-parallaxの公式apiページに詳しく載っています。

要素を内包する

以下の様にすると、要素を内包することも可能です。これにより、パララックス画像を背景として使用したコンテンツが作成可能です。

<template>
  <v-parallax 
    height="300"
    src="https://picsum.photos/1600/900?random=1">
      <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
        <h2>Sample Title</h2>
        <p>Vuetify is amazing framework!</p>
      </div>
  </v-parallax>
</template>

↑たとえばこの様にすると、
中央にタイトルとキャッチコピーを持った要素が作成できます。
綺麗な写真を背景にもってくれば、比較的簡単に印象的なコンテンツが作成できそうですね。
styleについてはお好みで。サンプルなのでstyle直書きですが、適宜class当てるなり置き換えて読んでください。