【vue.js】Vueアプリ内にscrollでstyle.backgroundPositionYを操作する機能を入れてパララックス風に見せる方法

投稿：2025/05/25｜ 更新： 2025/05/25 ｜ 3406文字

今回はVueアプリ内にscrollでstyle.backgroundPositionYを操作する機能を入れてパララックス風に見せるというのに挑戦してみます。ライブラリをさがしたけど、結局は『生のjavascriptで書いたコードを、vueで使う』という形に落ち着きました。早速、コードや表示例を確認していきましょう。

1 webデザインにおける、パララックス効果とは？
2 事前調査～Vueのパララックスライブラリはあるか？また代用できる方法は？
3 Vue & backgroundPositionパララックス　コードやポイント
- 3.1 コード例やポイント
- 3.2 注意点～コンテンツや画像のheightについて
4 Vue & backgroundPositionパララックス表示例
5 あとがき・まとめ

webデザインにおける、パララックス効果とは？

検索すると最近こんな感じでgoogleのAIが概要だしてくれます。『複数のレイヤー（層）を設け、スクロールの速さに合わせて異なる速度で動かすことで、立体感や奥行きを表現』。とのこと。ＴＶゲームとかでもありますよね。たとえばＳＦＣマリオコレクションでいうと、マリオが歩いている手前のレイヤーより、背景のレイヤーのスクロールスピードが遅い、みたいな。

今回は、『手前は通常スピードでスクロールして、背景はそれより遅くスクロールして立体的にする』というのを、パララックス（または、そういう風に見せるのをパララックス風）というように定義して、作ってみたいと思います。

事前調査～Vueのパララックスライブラリはあるか？また代用できる方法は？

普段このコラムでもよく登場しているvue用UIフレームワーク『element-plus』ですけど、どうやらその機能は無いとのことです。chat-gptにきいてみたところ・・・ vue-parallaxのようなライブラリはあるようです。npmコマンド(Node Package Managerのコマンド）でインストールするもののほか、CDNからロードして使えるものもあります。

vue-parallax
https://www.jsdelivr.com/package/npm/vue-parallax

他のプロンプト渡したところ『生のjavascriptで書いたコードを、vueで使う（addEventListener("scroll", onScroll)みたいなやつ）』というのも提示してくれたので、『backgroundPositionYのオフセットをスクロールに応じて変えればいいんじゃね？』というアイデアが思いつきました。この方法を採用しました。

Vue & backgroundPositionパララックス　コードやポイント

コード例やポイント

コードはこんな感じになりました。CSSでポイントになりそうなところはbackground-attachment: fixed;でしょうか。最初は固定状態(fixed)にしておきます。これだけでもちょっと立体的にに見えるのでおススメです。

#app{
background-image: url(bg.jpg);
object-fit: cover;
background-size: 150%;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
transition: background-position 20ms linear;
}

あと、javascript部分は、別にvueを間にかませなくてもできるんですけど（笑）、スクロールイベントを補足して、前述の固定背景のオフセットをずらしていくという処理を入れました。

この部分です。getElementById、addEventListenerはよく使う気がします（個人的な感想）。window.scrollY × 0.8分がオフセットになってずれていくので、パララックス的に見える感じです。

background-position(developer.mozilla.org)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

注意点～コンテンツや画像のheightについて

上記のコードではpタグに『margin-bottom:128px』がついていますが、コンテンツの縦の長さが短いとスクロールが発生しません。むりやり大きめのマージンを設定して、コンテンツが長くなってスクロールが発生するようにしています。

また、bg.jpgのサイズが『2048×1700』のものを使ってしまったのは、管理人のミスです（笑）スクロールに対して画像の縦の長さが足りない場合、下のほうが少し切れてしまうような表示になります。画像探すのに時間をかけたくなかったので、『メディアクエリで表示幅が狭くなったらbackground-size: 200%; のように拡大』みたいに応急処置しています。より縦長の画像を使う・スマートフォンやタブレット用の縦長画像も用意する・スクロール量がある程度超えたら、オフセットでずらすのをやめるのような処置が必要になります。

繰り返せるパターンの画像の場合はcssのbackground-repeatで繰り返してもokです。