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

Vuetifyで、画像にParallax(視差)効果を簡単に適用する方法[v-parallax]

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

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当てるなり置き換えて読んでください。

実際に動くサンプル

実際に動いているサンプルを作成してあります。
次のリンクより、確認することができます。
VuetifyのParallaxサンプル

公式ドキュメント、APIページについて

v-parallax コンポーネントの Vuetify公式ページは以下になります。
Parallaxコンポーネント — Vuetify

また、公式APIページはこちらになります。ここに、詳細な設定できる各種 props の一覧が記載されています。
v-parallax API — Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
画像に簡単にパララックス(視差)効果を適用することができる v-parallax についてご紹介しました。

シンプルなコンポーネントながら、印象的なコンテンツを作成できるので、
使いやすいコンポーネントかと思います。

また、使いやすく簡単に試せるので
以前ご紹介した v-btn と同じく、Vuetifyに初めて触れる方にも、
おすすめのコンポーネントかと思います。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。